对CSS渲染机制的一些理解
css渲染机制是建立在基础盒子模型之上的，图文样式、布局都可以抽象为对各个盒子的渲染排布。CSS 渲染的内容是HTML元素，分为块级元素和行内级元素。
元素、盒子
- 元素：HTML元素分为块级元素和行内级元素，HTML 标准中块级元素和行内级元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别，而”行内级“类别相当于 HTML5 中的措辞内容类别，不过除了这两个还有其他类别。
- 块级元素： block-level element，元素的 display 为 block、list-item、table 时，该元素将成为块级元素。
- 行内级元素：inline-level element，display 为 inline、inline-block、inline-table 的元素称为行内级元素。
元素是否是块级元素或行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。
- 盒子：box，一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。盒子有多种类型：
- 块级盒子： block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。
- 块盒子：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。
-
块容器盒子：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。
- 行内级盒子：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。
- 行内盒子：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。
- 原子行内级盒子：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。
块级格式化上下文
基础盒模型
渲染引擎根据 CSS 基础盒模型 将元素表示为一个个矩形盒子，每个盒子由四个部分（区域）组成：内容区域 内边距区域 边框区域 外边距区域。
视觉格式化模型
CSS 视觉格式化模型（visual formatting model）是用来处理在视觉媒体上显示文档时使用的计算规则。通俗来说就是根据基础盒模型生成盒子并确定如何排布。该模型是 CSS 的基础概念之一。
