「前端早读君」css进阶之彻底理解视觉格式化模型

今日励志

不论你在什么时候开始，重要的是开始之后不要停止。

前言

对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。

如果你也有这种问题，那么是时候学习下什么是css视觉格式化模型了。知己知彼方能解决问题。

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

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

1. 盒子的尺寸：精确指定、由约束条件指定或没有指定
2. 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic
   inline-level）、块盒子（block）
3. 定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
4. 文档树中的其它元素：即当前盒子的子元素或兄弟元素
5. 视口尺寸与位置
6. 所包含的图片的尺寸
7. 其他的某些外部因素

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）

盒子生成介绍

盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS 的display属性。

块级元素与块盒子

当元素的 display为 block、list-item或 table时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。

每个块级盒子都会参与块格式化上下文（block formatting context）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box）。有一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。

主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。

一个块级盒子可能也是一个块容器盒子。块容器盒子（block container box）要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文（inline formatting context）。

能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。

一个同时是块容器盒子的块级盒子称为块盒子（block box）。

匿名块盒子
在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（anonymous boxes）。

CSS选择器不能作用于匿名盒子(anonymous boxes)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为 initial。

块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子。

示例节
考虑下面的HTML代码，假设 和 都保持默认的样式（即它们的 display 为 block）：

<div>
   Some inline text
   <p>followed by a paragraph</p>
   followed by more inline text.
</div>

此时会产生两个匿名块盒子：一个是 元素前面的那些文本（Some inline text），另一个是元素后面的文本（followed by more inline text.）。此时会生成下面的块结构：

显示为：

Some inline text

followed by a paragraph

followed by more inline text.

对这两个匿名盒子来说，程序员无法像<p>元素那样控制它们的样式，因此它们会从<div>那里继承那些可继承的属性，如 color。其他不可继承的属性则会设置为 initial，比如，因为没有为它们指定 background-color，因此其具有默认的透明背景，而 元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。

另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。

如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。

行内级元素和行内盒子节
如果一个元素的display属性为inline、inline-block或inline-table，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有display:inline样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或display值为inline-block或inline-table的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。

注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。

在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：

<style> span {
    display: inline; /* default value*/
}</style>
<div style="width:20em;">
    The text in the span
    <span>can be split in several lines as it</span>
    is an inline box.
</div>

可能会显示为：

The text in the span can be split into several
lines as it is an inline box.

而：

<style> span {
    display: inline-block;
}</style>
<div style="width:20em;">
    The text in the span
    <span>
    cannot be split in several lines as it
    </span>
    is an inline-block box.
</div>

则可能显示为：

The text in the span 
cannot be split into several lines as it is an
inline-block box.

其中的“cannot be split into several lines as it”永远不会换行。

匿名行内盒子

类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值initial。

一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于white-space的设置而被移除，从而导致最终的实际内容为空。

其他类型的盒子

行盒子

行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。

行盒子更多是以技术性目的而存在的，Web开发者通常不需要关心。

Run-in 盒子

Run-in 盒子通过display:run-in来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型。Run-in 盒子可以用来在可能的情况下将标题嵌入文章的第一个段落中。

注意：Run-in 盒子已经在CSS 2.1的标准中移除了，但可能会在CSS 3中作为一个实验性的内容再次加入。因此最好不要将其用于正式项目。

由其他模型引入的盒子

除了行内格式化上下文和块格式化上下文之外，CSS还定义了几种内容模型，这些模型同样可以应用于元素。这些模型一般用来描述布局，它们可能会定义一些额外的盒子类型：

• 表格内容模型可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等
• 多列内容模型可能会在容器盒子和内容之间创建多个列盒子
• 实验性的网格内容模型或flex-box内容模型同样会创建一些其他种类的盒子

定位规则
一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局。下面是定位盒子时所使用的规则：

• 普通流：按照次序依次定位每个盒子
• 浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边
• 绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素

普通流介绍

在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行内格式化上下文中，盒子则水平排列。当CSS的 position 属性为 static 或 relative，并且 float 为 none 时，其布局方式为普通流。

浮动介绍

在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素通过 clear 清除了前面的浮动。一个盒子的 float 值不为 none，并且其 position 为 static 或 relative 时，该盒子为浮动定位。如果将 float 设置为 left，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 right，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。

绝对定位介绍

在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系（译注：此处仅指定位和位置计算，而绝对定位的元素在文档树中仍然与其他元素有父子或兄弟等关系），其位置会使用 top、bottom、left 和 right

相对其包含块进行计算。如果元素的 position 为 absolute 或 fixed，该元素为绝对定位。

对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。

参考资料MDN文档：https://developer.mozilla.org...

你可能喜欢

打开微信扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光