常规流布局

1. 所有元素，默认情况下，都属于常规流布局。总体规则：块盒独占一行，行盒水平依次排列
2. 常规流中，块盒在其包含块中居中方法:定宽，左右margin设为auto， eg.{margin:0 auto}
3. 常规流中，行内元素居中方法：text-align:center;line-hight=highteghight:40px;text-align:center;line-hight:40px;
4. 行内元素与块级元素之间的转换：

外边距塌陷

产生外边距塌陷的条件

1. 子元素在父元素里面
2. 子元素中有margin-top和margin-bottom值

解决外边距塌陷的方法

1. 给父元素添加padding值或border值
2. 父元素增加overflow：hidden
3. 给父元素或者子元素增加浮动，让其脱离标准流

弹性盒子布局

1. 属性：
2. flex布局实现盒子水平垂直居中，注意：都是给父元素添加的样式：

Grid布局

1. Grid布局是最新加入的布局方式，有点像Android里的GridLayout（网格布局）或者WPF里的Grid布局。相比传统的布局方式Grid布局也非常好用。
2. 使用：在代码中我们只要把某个元素的display 属性设置为 grid或者 inline-grid，那么这个元素就会成为Grid父 容器 ，它下面直接的子元素将成为Grid子 元素 。网格布局从名字上应该就能理解大致的样子，由行和列组成的表格，就和Excel差不多。网格布局中由一条条水平和竖直的的网格线围成一个个格子被称为单元格。
3. grid-template-columns 用于定义每一列的宽度； grid-template-rows 用于定义每一行的高度。这两个属性可填的值挺多，常见的值如下：（1）px、rem等长度；（2）百分比；（3）以 fr 为单位的数据（作为分配可用空间的比例系数）；（4）repeat() 函数，该函数用于创建重复片段;（5）比如 grid-template-rows: repeat(3, 100px) 相当于 grid-template-rows: 100px 100px 100px（6）该函数接收两个参数，第一个参数为重复次数，第二个参数为数据片段（7）第一个参数也可以选择 auto-fill ，这样浏览器会在容器大小可能的范围内重复片段；（8）minmax(min, max) 函数， 限定长度在这两个范围内；（9）auto 表示由浏览器自行决定大小；