布局
1.格式化上下文
BFC是block formatting context的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型时什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。
如何触发一个盒子的BFC特性：
- display:flow-root | inline-block;
- position:absolute | fixed;
- float:不为none;
- overflow:不为visible
2.外边距塌陷
会产生外边距塌陷的情况：
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
消除外边距塌陷的方法：
- 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻；
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中
3.弹性盒子布局
Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高位置的情况下，也能排列和分割盒子内部的布局。而且在不同布局方向（横向/纵向）的调整更为灵活
- 作用于父元素（flex container）:
建立一个弹性盒子： display:flex | inline-flex;
规定盒子的主轴方向：row | column |...;
子元素折行显示形式：flex-wrap:nowrap | wrap | wrap-reverse;
主轴方向子元素的排列方式：jusify-content:center | space-between |...;
交叉轴方向子元素的对齐方式：align-items:flex-start | center | stretch |...;
交叉轴方向多行子元素的布局方式：align-content:flex-start | space-between |...;
以明确值设定子元素间的间隔:gap:;
- 作用于子元素(flex items):
规定item未放缩之前的默认大小:flex-basis:auto | 长度值...;
规定有剩余空间时，对item的分配比例：flex-grow:number;
规定空间不够时，对item的压缩的比例：flex-shrink:number;
以上三项的缩写：flex:grow shrink basis:默认 0 1 auto
规定item从左到右(row布局)显示的顺序：order:number;默认是0
规定单个item在交叉轴上的位置：align-self:auto | center | flex-start |...
