css布局
position布局
relative:相对于原位置来调整top，right，left，bottom且不会影响其他元素。
fixed：相对于视窗来定位；
absolute：相对于最近的“positioned”祖先元素除了static定位。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素
float布局
使用漂浮后还是相对于父元素定位，但是可以溢出父元素；而且不会对文字造成影响，如果不溢出父元素的话，文字自动包围浮动块级元素。
另外浮动元素会使块级元素失去display：block；使两个会计元素位列与同一行。
若要是使浮动元素不溢出盒子，则需要令父元素盒子加上样式
overflow:auto;
（但是会有滚动条一个缺点是，在外部元素上使用边距和填充的某些组合可能会导致滚动条出现，但这可以通过将边距和填充放在另一个包含父元素的元素上来解决。）
清理浮动
display布局
主要是改变
行,块
状态
flex布局
位置
flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）
flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
align-self属性（控制单个项目的位置）
比例
flex-grow属性（存在剩余空间时起作用）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性（空间不足时起作用）
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
Flex 布局教程：实例篇
grid布局
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
（关键是要指定行与列）
grid-template-columns属性
定义每一列的列宽
grid-template-rows 属性
定义每一行的行高。
auto-fill 关键字
单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
fr 关键字
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
grid-row-gap 属性
grid-row-gap属性设置行与行的间隔（行间距）
grid-column-gap 属性
grid-column-gap属性设置列与列的间隔（列间距）
grid-template-areas 属性
网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
//上面代码先划分出9个单元，然后将其定名为a到i的九个区域，分别对应这九个单元格。
}
grid-auto-flow 属性
主要用于填满容器内的空格
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。
justify-items 属性
（指项目里面的内容位置）
属性设置单元格内容的水平位置（左中右）
align-items
置单元格内容的垂直位置（上中下）
justify-content 属性
（指容器里面的项目位置）
而且要在容器的width属性大于一行的width时起作用
整个内容区域在容器里面的水平位置（左中右）
align-content 属性
（指容器里面的项目位置）
而且要在容器的height属性大于一列的height时起作用
整个内容区域的垂直位置（上中下）
grid-auto-columns 属性，grid-auto-rows 属性
用于处理新增或者多余的网格的长宽。若不设置的话就会由浏览器据其内容决定长宽。
项目的起始位置
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
可以指定网格线，也可以指定网格线名字
关键字span
表示”跨越”，即左右边框（上下边框）之间跨越多少个网格
grid-area 属性
决定项目放在哪一个单元格中
justify-self 属性
在水平位置上用于单个项目间内容上的调整
align-self 属性
再垂直位置上调整单个项目的内容