(一)盒模型
content-box
border-box
content-box（默认）
布局所占宽度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
border-box(推荐使用)
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
为什么推荐使用border-box？
更好用
（二）垂直居中
（三）BFC
BFC全称是Block Formatting Context，即块格式化上下文
如何触发BFC？
- 根元素或其它包含它的元素；
- 浮动(元素的float不为none)；
- 绝对定位元素(元素的position为absolute或fixed)；
- 行内块inline-blocks(元素的display: inline-block)；
- 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
- overflow的值不为visible的元素；
- 弹性盒 flex boxes(元素的display: flex或inline-flex)；
但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。
（四）flex
（五）gird
（六）清除浮动
.clearfix {
Content: '';
Display: block / table ；
Clear: both;
}
把clearfix加到容器上，里面的子元素的浮动就被清除了。
（七）CSS权重问题
权重计算
———————————————————————————————
布局
文档流
文档流
margin合并
margin合并问题
