块级盒子和行级盒子：
块级：不和其他盒子并列摆放，适合所有的盒模型属性。
行级：和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用。
块级元素和行级元素：
盒子和元素不同，盒子是CSS中的概念，元素是HTML中的概念，但有一些关联性。默认情况下，块级元素会生成块级盒子，比如body、article和div等，行级的元素生成行级的盒子，比如span、em等。但是也可以通过CSS中的display:block或者display:inline把元素转化成块级或行级盒子。行级中盒子的内容分散在多个行盒(line box)中。
display属性：
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none 排版时完全被忽略
行级排版上下文
- inline Formatting Context（IFC）
- 只包含行级盒子的容器会创建一个IFC
IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定·一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
块级排版上下文：
- Block Formatting Context（BFC）
- 某些容器会创建一个BFC（根元素；浮动、绝对定位、inline-block；Flex子项和Grid子项；overflo值不是visible的块盒；display：flow-root）
