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
为inline-block
的盒子,它的外在是 行内级盒子,而内在是 块容器盒子。display
为block
的盒子,它的外在是 块级盒子,而内在是 块容器盒子。display
为inline
的盒子,它的外在是 行内级盒子,而内在也是 行内级盒子。
有时候display
为 block
的盒子包含的行内元素和块级元素,但是这些行内元素又往往创建了一个匿名块级盒子,最终它里面都是块级盒子:
例子
总结
当块级盒子作为一个盒子的外在盒子,它会单独占据一整行,即使设置了宽度,也会通过
margin
属性来填充。当行内级盒子作为一个盒子的外在盒子,它会和其他的行内级盒子在水平方向一个接一个排列,如果宽度不够排列,则会换行继续排列。
当块级盒子作为一个盒子的内在盒子,也就是块容器盒子,它会当成一个整体处理,而不会因为内容过长而换行。此时可以设置宽度、高度和内外边距。
当行内级盒子作为一个盒子的内在盒子,当内容太多,宽度太大时,会换行显示(像是被劈成很多份了)。这样的盒子可以设置水平方向上的
margin
但是无法设置垂直方向的margin
,至于border
和padding
,垂直方向可以设置,但是垂直方向的border
和padding
到达该行的边界后就会不显示。