深入css（下）
一、块级、行级元素
- 块级元素：生成块级盒子 display：block
- 行级元素：生成行级元素 display：inline
display属性中，inline-block
本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行。
二、行级排版上下文
只包含行级盒子的容器会创建一个IFC。
IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动元素
三、块级排版上下文
某些容器会创建一个BFC。
- 根元素（html）
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
BFC内的排版规则：
- 盒子从上到下摆放
- 垂直的margin会合并
- BFC内盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠
四、Flex Box
一种新的排版上下文。
它可以控制子级盒子的：
-
摆放的流向（上下左右）
-
摆放顺序
-
盒子宽度和高度
-
水平和垂直方向的对齐
-
是否允许折行
-
flex-grow：有剩余空间时的伸展能力。
-
flex-shrink：容器空间不足时收缩的能力。
-
flex-basis：没有伸展或收缩时的基础长度。
五、grid布局（网格布局）
display：grid使元素生成一个块级的Grid容器。
使用grid-template相关属性将容器划分为网格。
设置每一个子项占哪些行/列（rows/columns）。
设置grid-line来控制占的区域。
六、绝对定位
- relative：相对自身原本位置偏移，不脱离文档流。使用top、left、bottom、right设置偏移长度，流内其它元素当它没有偏移一样布局。
- absolute：绝对定位，相对非static祖先元素定位。脱离了常规流，相对于最近的非static祖先定位（从父级往上找最近的）。不会对浏内其它元素布局造成影响。
- fixed：相对于视口绝对定位。脱离了文档流。相对于窗口定位。
