在JS最繁华的年代，我们来学习一下CSS
参考资料
- www.w3.org/TR/CSS2/vis…
- 区块格式化上下文 - CSS：层叠样式表 | MDN
- www.w3.org/TR/CSS2/vis…
- www.w3.org/TR/CSS2/css…
- github.com/ayqy/CSS2-1
相关术语
| 缩写 | 全称 | 备注 |
|---|---|---|
| FC | Formatting Context | 格式化上下文 |
| BFC | Block Formatting Context | 块级格式化上下文 |
| IFC | Inline Formatting Context | 行内格式化上下文 |
FC
- 元素在标准流里面都属于一个FC
- 块级元素的布局属于 Block Formatting Context（BFC）
- 行内级元素的布局属于Inline Formatting Context（IFC）
BFC
- 在垂直方向上一个挨着一个的排布
- 垂直方向的间距由margin属性决定
- 在同一个BFC中，相邻两个box之间的margin会折叠(collapse)
- 在BFC中，每个元素的左边缘挨着包含块的左边缘
BFC 的高度是auto的情况下，时如下方法计算高度的
- 1 如果只有inline-level 是行高的顶部和底部的距离
- 2 如果有block-level， 是由最顶层块的上边缘和最底层块盒子的下边缘之间的距离
- 3 如果有绝对定位元素，将被忽略
- 4 如果有浮动元素，那么会增加高度以包含这些浮动元素的下边缘（解决浮动浮动高度塌陷）
