CSS视觉格式化模型

ObjectKaz Lv4

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

行内级元素和行内级盒子

行内级元素 (inline-level element),即 displayinlineinline-blockinline-table 的元素。常见的行内级元素有 spanimgstrongem等。

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

例子

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

其中:

  • 参与行内格式化上下文创建的行内级盒子称为行内盒子 (inline box)。比如所有具有 display:inline 样式的非替换盒子,像 aspanstrong
例子
  • 不参与行内格式化上下文创建的行内级盒子称为原子行内级盒子 (atomic inline-level box)。例如可替换的行内级元素、 display 值为 inline-blockinline-table 的元素创建的盒子,像 img

块级元素和块级盒子

块级元素 (block-level element),即 displayblocklist-itemtable 的元素。常见的块级元素有 divlitablep等。

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

例子

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

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

匿名盒子

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

例子

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

块容器盒子

displayinline-block的盒子是非常奇怪的,它既有 inline 的表现,又有 block 的表现。

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

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

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

所以:

  • displayinline-block的盒子,它的外在是 行内级盒子,而内在是 块容器盒子
  • displayblock 的盒子,它的外在是 块级盒子,而内在是 块容器盒子
  • displayinline 的盒子,它的外在是 行内级盒子,而内在也是 行内级盒子

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

例子

总结

  1. 当块级盒子作为一个盒子的外在盒子,它会单独占据一整行,即使设置了宽度,也会通过 margin 属性来填充。

  2. 当行内级盒子作为一个盒子的外在盒子,它会和其他的行内级盒子在水平方向一个接一个排列,如果宽度不够排列,则会换行继续排列。

  3. 当块级盒子作为一个盒子的内在盒子,也就是块容器盒子,它会当成一个整体处理,而不会因为内容过长而换行。此时可以设置宽度、高度和内外边距。

  4. 当行内级盒子作为一个盒子的内在盒子,当内容太多,宽度太大时,会换行显示(像是被劈成很多份了)。这样的盒子可以设置水平方向上的 margin 但是无法设置垂直方向的 margin,至于 borderpadding ,垂直方向可以设置,但是垂直方向的 borderpadding 到达该行的边界后就会不显示。

  • 标题: CSS视觉格式化模型
  • 作者: ObjectKaz
  • 创建于: 2021-01-21 03:59:00
  • 更新于: 2021-04-23 00:31:44
  • 链接: https://www.objectkaz.cn/78854ed86db2.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。