4 - CSS的继承和布局（下）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 11 天 4. Grid

这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

4. Grid 排版上下文

1. Grid 布局的概念及优点

网格布局（Grid）是最强大的 CSS 布局方案
采用水平线和垂直线切分出网格并为元素分配网格单元（切分后的网格的块），这样的效果在以前只能通过复杂的 CSS 框架实现
Flex 布局是一维的流式布局，而 Grid 是二维的块状布局，更灵活

2. 容器和项目

采用网格布局的区域，称为“容器”（container）。容器内部采用网格定位的子元素，称为“项目”（item）。

<div id="container">
    <div class="item"><p>1</p></div>
    <div class="item"><p>2</p></div>
    <div class="item"><p>3</p></div>
</div>

Grid 布局只对容器和项目生效，即该片段中的#container和.item

Grid 布局并不对<p>标签生效，因为它并不是容器或项目

3. `display` 属性

div {
    display: grid;
}

display同时也接受inline-grid，使之可以作为一个行内元素

4. `grid-template` - 网格模板

grid-template包含两个属性：grid-template-columns和grid-template-rows即列和行

1. grid-template-columns

定义网格在列上的划分，接受length和auto

{
    grid-template-columns: 100px auto auto;
}

创建一个三列的网格，第一列为100px，其余两列自动均分。

2. grid-template-rows

定义网格在行上的划分，接受length和auto

{
    grid-template-rows: 1fr 2fr;
}

创建一个两行的网格，第二行的宽度是第一行的两倍。

fr单位仅可应用于grid，指代网格中可用空间的一等分

3. grid-template

可以使用grid-template来集中定义行和列的属性、

{
    grid-template: 150px / auto auto
}

定义一个一行两列的网格，第一行高150px，两列均分尺寸

5. `grid-area` - 网格空间

1. grid-line（网格线）

arid-area使用grid-line(网格线)这个概念来界定容器内每个被切分的块的位置，水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

1_bg2019032503

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

2. grid-area（定义位置）

定义每个item(项目)在div(容器)内所占据的位置。

grid-area包含四个属性grid-row-start、grid-colums-start、grid-row-end和grid-column-end

.a {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3;
}

定义属性a的元素开始于 (1, 1)，结束于 (3, 3)。

可以使用grid-area属性集中表示以上内容

.a {
    /* grid-row-start grid-colums-start grid-row-end grid-column-end */
    grid-area: 1/1/3/3;
}

两段CSS样式表示出的效果完全一致

3. grid-area（项目命名）

可以使用grid-area对item进行命名，并配合grid-template-areas属性进行排布

.item1 { 
    grid-area: header; 
}

aeid-area：将class为item1的对象命名为header

4. grid-template-areas

<!-- 定义容器 -->
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

<style>
    /* grid-area 对象重命名 */
    .item1 { grid-area: header; }
	.item2 { grid-area: menu; }
	.item3 { grid-area: main; }
	.item4 { grid-area: right; }
	.item5 { grid-area: footer; }
    /* grid-template-areas 模板布局 */
    .grid-container {
        display: grid;
        grid-template-areas:
          'header header header header header header'
          'menu main main main right right'
          'menu footer footer footer footer footer';
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
    }
    /* 边框线 */
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }
</style>

6. 参考资料

浮动（Float）

现一般仅用于完成图文混排形式下文字环绕图片的效果

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

绝对定位（Position）

属性值	说明
`static`	默认值，非定位元素
`relative`	相对自身原本位置偏移，不脱离文档流
`absolute`	绝对定位，相对非`static`祖先元素定位
`fixed`	相对于视口绝对定位
`sticky`	基于用户的滚动位置相对定位，直到接触设定位置才固定

position: relative

在常规流中布局
相对于自己本该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内的其它元素将其视作没有偏移进行布局

{
    position: relative;
    left: -20px
}

position: absolute

脱离常规流
相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
不会对流内的元素布局造成影响
与其他元素重叠

{
	position: absolute;
	left: 100px;
	top: 150px;
}

position: fixed

相对于视口定位，即相对于浏览器窗口位置固定
即使页面滚动也不会移动
脱离常规流，不占据空间
与其他元素重叠

{
    position: fixed;
    top:30px;
    right:5px;
}

position: sticky

基于用户的滚动位置来定位
依赖于用户的滚动，在position: relative和position: fixed之间切换
默认为position: relative，在页面滚动超出目标区域时，切换到position: fixed
仅接受top、right、bottom和left

{
    position: sticky;
    top: 0;
}

[video-to-gif output image]

4 - CSS的继承和布局（下）｜ 青训营笔记