CSS布局
传统方案是基于盒装模型，依赖display属性+position属性+float属性，但对于一些特殊布局（eg:垂直居中）就不容易实现。
补充：
块元素：出现在另一个元素下面的元素；
内联元素：出现在另一个元素旁边的元素，就像段落中的单个单词一样；
dispaly属性一些默认的display的值，段落之间样式默认值为：display:block；<a>元素默认为display:inline。
注：display:flex和display:grid在布局上比较重要。
1、Flex布局
- 弹性盒子(Flexbox)
用于创建横向/纵向的一维页面布局，在其父元素上应用display:flex，所有直接子元素机会按照flex进行布局，但是子元素的float,clear,vertical-align属性将失效。
任何一个容器都可指定为flex布局。
.box {
display: flex;
}
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<div class="box3">three</div>
</div>
.box {
display: flex;
}
.box > div {
flex:1
}
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<div class="box3">three</div>
</div>
.container{
display:flex;
flex-wrap: wrap; /*可换行*/
justify-content:center;
}
.item{
flex: 0 1 150px;
margin: 5px; /*外边距*/
}
flex：是flex-grow、flex-shrink、flex-basis的合并形式。
2、Grid布局
用于同时在两个维度把元素按行和列排列整齐。grad-template-rows和grid-template-columns定义了行和列的轨道。grid-gap定义了网格间的间距。
Grid 布局只对项目生效，不对项目子元素起作用。
如下代码：
.box {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grad-template-rows: 100px 100px;
grid-gap:10px;
}
<div class="box">
<div class="box1">one</div>
<div class="box2">two</div>
<div class="box3">three</div>
<div class="box1">one</div>
<div class="box2">two</div>
</div>
注：
a.fr单位跨网格轨道可用空间的分布。上面代码中有着3个大小为1fr的轨道的网格容器，创建了三个列轨道；
b.若最后一个是2fr，则表示最后一个轨道是前者的二倍；
c.还可以与绝对单位结合使用，eg:
grid-template-columns: 150px 1fr 2fr;表示第一列宽是150像素，第三列宽是第二列宽的2倍;
d.grid-template-columns: 150px auto 150px;auto表示由浏览器自己决定
- 默认情况下，容器元素都是块级元素，但也可以设为行内元素。如下代码，就是指定了
div是一个行内元素，该元素内部采用网格布局：
div{display: inline-grid;}
注：设为网格布局后，容器子元素（项目）的float、display:inline-block、display:table-cell、vertical-align和column-*等
设置都将失效。 - 容器指定了网格布局后，就要划分行和列了。
列宽：grid-template-columns
行高：grid-template-rows
代码如下：
.container {
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
上面代码指定了一个三行三列的网格，列和宽都是100px,当然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，当容器大小不确定时可以用。
- 比较常用的布局
两栏布局：
grid-template-columns: minmax(150px,25%) 1fr;
表示第一列宽度最小为150px，最大宽度为总宽度的25%
三明治布局
grid-template-rows：auto 1fr auto;
垂直划分为上中下三部分（页眉、内容区、页脚），页眉和页脚都是本来的内容高度，内容区是剩下所有的高度。
圣杯布局（最常用）
是将三明治布局中的内容区分成三部分（左边栏、主栏、右边栏）
html代码
<div class="container">
<header/>
<div>
<main/>
<div/>
<footer/>
</div>
CSS代码：
.container{
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
表示垂直方向（页眉和页脚都是本身内容高度，内容区占满剩余的高度），水平方向（左边栏和右边栏都是本身内容高度，中间主栏占满剩余的高度）。
十二网格布局
grid-template-columns: repeat(12, 1fr);
一些常用的网格属性
行间距：
grid-row-gap列间距：
gid-column-gap合并写法：
grid-gap设置单元格内容的水平位置：
justify-items设置单元格内容的垂直位置：
align-items合并写法：
place-items整个内容区域在容器里面的水平位置：
justify-content整个内容区域在容器里面的垂直位置：
align-content合并写法：
place-contentgrid-column：1/3等同于grid-column: 1/span 2表示从第一根列线到第三根列线（即第一列和第二列）grid-row：1/span 2，第一根行线，横跨两个网格，（即表示第一行和第二行）grid-area：指定项目放在哪个区域
