CSS视觉格式化模型

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。

行内级元素和行内级盒子

行内级元素 (inline-level element)，即 display 为 inline、inline-block、inline-table 的元素。常见的行内级元素有 span、img、strong和em等。

行内级元素不会填满整个宽度。多个行内级元素在水平方向一个接一个排列，如果宽度不够排列将生成多行：

例子

行内级盒子(inline-level box)，由行内级元素生成。行内级盒子就负责一个网页的内容。

其中：

参与行内格式化上下文创建的行内级盒子称为行内盒子 (inline box)。比如所有具有 display:inline 样式的非替换盒子，像 a、span、strong。

例子

不参与行内格式化上下文创建的行内级盒子称为原子行内级盒子 (atomic inline-level box)。例如可替换的行内级元素、 display 值为 inline-block 或 inline-table 的元素创建的盒子，像 img。

块级元素 (block-level element)，即 display 为 block、list-item 、table 的元素。常见的块级元素有 div、li和table、p等。

块级元素默认会自动填满整个宽度，单独占用一整行，即使手动设置了宽度，剩余的部分也会被 margin 填充(但是其值为0)：

例子

块级盒子(block-level box)，由块级元素生成。块级盒子主要负责网页的结构。

一个块级元素至少会生成一个块级盒子，但也有可能生成多个(如列表项元素)。

在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子无法被CSS选择器选择，因此称为匿名盒子 anonymous boxes：

例子

这个例子中，p 是块级元素，单独占据一行，而为了保证 p 级前后的文本正常的界面展示，浏览器会为 p 级前后的文本创建一个匿名块级盒子。

display 为 inline-block的盒子是非常奇怪的，它既有 inline 的表现，又有 block 的表现。

实际上，对于它与其他盒子的关系，也就是外在的关系，他是作为行内级元素来使用的。

但是，对于它与自身和子盒子的关系，也就是内在的关系，他似乎是作为一个块级元素来使用的。

对于内在的关系，我们便冒出了新的名称：容器盒子(container box)。其中 块容器盒子 要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文。

所以：

有时候display 为 block 的盒子包含的行内元素和块级元素，但是这些行内元素又往往创建了一个匿名块级盒子，最终它里面都是块级盒子：

例子

当块级盒子作为一个盒子的外在盒子，它会单独占据一整行，即使设置了宽度，也会通过 margin 属性来填充。
当行内级盒子作为一个盒子的外在盒子，它会和其他的行内级盒子在水平方向一个接一个排列，如果宽度不够排列，则会换行继续排列。
当块级盒子作为一个盒子的内在盒子，也就是块容器盒子，它会当成一个整体处理，而不会因为内容过长而换行。此时可以设置宽度、高度和内外边距。
当行内级盒子作为一个盒子的内在盒子，当内容太多，宽度太大时，会换行显示（像是被劈成很多份了）。这样的盒子可以设置水平方向上的 margin 但是无法设置垂直方向的 margin，至于 border 和 padding ，垂直方向可以设置，但是垂直方向的 border 和 padding 到达该行的边界后就会不显示。