视觉格式化模型 | Visual formatting model

可视化格式化模型

CSS 可视化格式模型是一种处理文档并将其显示在可视化媒体上的算法。这个模型是CSS的基本概念。

可视化格式模型转换文档的每个元素，并生成零、一个或多个符合CSS盒模型.每个方框的布局由以下几个方面确定：

箱子的尺寸：精确定义或约束，或不是。

框的类型：inline，inline-level，atomic inline-level，block。

定位方案：在正常流式，悬浮或绝对定位。

树中的其他元素：它的子类和同类。

视图大小和位置。

包含图像的内在尺寸。

其他外部信息。

该模型渲染一个框，相对于其包含块的边缘。通常，一个盒子为其后代建立包含块。但是，一个盒子不受其包含块的限制; 当一个盒子的布局超出容纳块时，据说会溢出。

盒生成

盒子生成是CSS视觉格式模型的一部分，它从文档元素中创建盒子。生成的框是不同类型的，这会影响视觉格式的完成。生成的框的类型取决于displayCSS属性的值。

块级元素和块框

一个元件被认为是块级时其的计算值displayCSS属性是：block，list-item，或table。块级元素被直观地格式化为块（例如，段落），旨在被垂直堆叠。

每个块级框参与块格式化上下文。每个块级元素至少生成一个块级框，称为主块级框。一些元素，比如一个list-item元素，产生更多的盒子来处理引入列表项的子弹和其他印刷元素，可能会产生更多的盒子。大多数只生成主体，块级别的框。

主要的块级框包含后代生成的框和生成的内容。这也是定位方案中涉及的盒子。

块级别的框也可以是块容器框。阿块容器盒是只包含其他块级框，或者创建一个内联格式化内容，因而只含行内框的盒子。

需要注意的是，块级框和块容器框的概念是分开的。第一，描述了盒子如何与其父母和兄弟姐妹行为。第二，它是如何与其后代相互作用的。某些块级别的框（如表格）不是块容器框。相反地，一些块容器盒，如未被替换的嵌入块和未被替换的表格单元，不是块级框。

块级容器也是块容器盒被称为块盒。

匿名块盒

在某些情况下，可视化格式化算法需要添加补充框。由于CSS选择器无法对这些框进行样式或命名，因此称为匿名框。

由于选择器不能使用匿名框，因此无法通过样式表进行样式设置。这意味着所有可继承的CSS属性都具有该inherit值，并且所有不可继承的CSS属性都具有该initial值。

块包含的框只包含内联层框，或者只包含块级框。但是文件通常包含两者的组合。在这种情况下，匿名块框将在相邻的内联级别框中创建。

例子

如果我们把下面的HTML代码（适用于它的默认样式，即<div>和<p>元素有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>元素的框不同，Web开发人员无法控制两个匿名框的样式。可继承属性从<div>属性值中获取值，如color定义文本的颜色，并将其他initial值设置为值。例如，他们将不会有一个具体的background-color，它总是透明的，该initial属性的价值，从而背景<div>是可见的。一个特定的背景颜色可以应用到<p>框中。同样，两个匿名框总是使用相同的颜色作为文本。

导致创建匿名块框的另一个案例是包含一个或多个块框的内联框。在这种情况下，包含块框的框被分成两个内联框：一个在块框之前，另一个在块框之后。块框之前的所有内联框随后被包含在一个匿名块框中，块框之后的内联框也是如此。因此，块框成为包含内嵌元素的两个匿名块框的兄弟。

如果存在多个块框，而没有内联内容，则在框组之前和之后创建匿名块框。

例子

如果我们使用以下HTML代码，<p>有display:inline和<span>有display:block*

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

创建了两个匿名块框，一个用于Element（）之前的文本，另一个用于it（）之后的文本，它提供了以下块结构：Some inline textfollowed by more inline text

这导致：

Some inline text
followed by a paragraph
followed by more inline text.

内联级元素和内联框

一个元件被认为是行内时，其的计算值displayCSS属性是：inline，inline-block或inline-table。从视觉上来说，它并不构成内容块，而是与其他内联级内容一起分布。通常，具有不同格式的段落的内容（如重点或图像）由内嵌级元素组成。

该图使用过时的术语; 见下面的注释。除此之外，这是不正确的，因为右侧的黄色省略符号的定义与左边的相同，或大于（它可能是一个数学超集），因为规范说“行内元素生成内嵌级框，这些框是参与内联格式化上下文的框“，参见CSS 2.2，章节9.2.2

内嵌级元素生成内联级别框，这些框定义为参与内联格式化上下文的框。内联框是内联框和框，其内容参与其容器的内联格式化上下文。例如，对于所有未被替换的盒子就是这种情况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>

这导致：

跨度中的文本可以分成几行，因为它是内联框。

<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>

这导致：

跨度中的文本不能分割成几行，因为它是一个内联块框。

匿名内联框

至于块盒，有些情况下，CSS引擎会自动创建内联框。这些内联框也是匿名的，因为它们不能被选择器命名; 他们继承了所有可继承的属性的价值，并将其设置initial为所有其他属性。

创建匿名内联框最常见的情况是，当某个文本被找到，作为创建内嵌格式上下文的块框的直接子元素时。在这种情况下，这个文本被包含在最大可能的匿名内联框中。此外，空间内容将被white-spaceCSS属性中设置的行为删除，不会生成匿名内联框，因为它们会结束为空。

实例TBD

其他类型的盒子

线盒

行框由内联格式化上下文生成以表示一行文本。在一个块盒内，一个线框从盒子的一个边框延伸到另一个边框。当有浮标时，线框从左侧浮线的最右边开始，结束于右侧浮线的最左边。

这些框都是技术性的，Web作者通常不需要费心处理它们。

运行箱

使用定义的运行display:run-in框是根据下面框的类型是块框或内联框的框。在可能的情况下，可以使用它们来创建在第一段中运行的标题。

注意：从CSS 2.1标准中删除了运行框，因为它们没有被充分指定以允许可互操作的实现。他们可能会重新出现在CSS3中，但同时也被认为是实验性的。他们不应该用于生产。

模型诱导盒

除了内联和块格式上下文之外，CSS指定了可应用于元素的几个附加内容模型。这些用于描述特定布局的附加模型可以定义附加的框类型：

表格内容模型可以创建一个表格包装盒和一个表格盒子，而且还可以创建特定的盒子，如标题框。

多列内容模型可以在容器框和内容之间创建列框。

实验网格或弹性盒内容模型也创建了其他类型的盒子。

定位方案

一旦生成框，CSS引擎需要将它们放置在布局上。要做到这一点，它使用以下算法之一：

在正常流动 -位置每箱一前一后。

所述悬浮算法-提取从正常流动的盒，并把它与含箱的侧面。

所述绝对定位方案-定位是由包含元素建立了一个绝对坐标系统内的一个方块。一个绝对定位的元素可以涵盖其他元素。

正常流

在正常流中，箱子依次布置。在块格式上下文中，它们是垂直布局的; 在内联格式的上下文中，它们是水平布局的。当CSS的正常流动被触发position设置的值static或者relative，如果CSS float被设置为值none。

例

在正常流中，在块格式上下文中，方框依次垂直放置：

图像

在正常流中，在内联格式上下文中，方框依次水平放置：

图像

正常流有两个子情况：静态定位和相对定位：

在静态定位，由值触发。static在...position属性时，这些框将在正常流布局定义的准确位置绘制。图像

在相对定位，由值触发。relative在...position属性定义的偏移量绘制这些框。top，，，bottom，，，left和rightCSS属性

浮动

在浮动定位方案中，特定的框（称为浮动框或简单的浮动框）位于当前行的开始或结束处。这导致文本（更一般地说正常流中的任何东西）沿着浮动框的边缘流动的clear属性，除非由CSS属性不同地告知。

通过设置float属性设置为与none和position到static或relative.如果float设置为left，浮点数定位在行框的开头。如果设置为right，浮点定位在行框的末尾。在任何一种情况下，线盒收缩，以适合与浮动。

图像

绝对定位

在绝对定位方案中，盒子完全从流中移除，根本不与其进行交互。他们正在使用的相对于它们的包含块定位top，bottom，left和rightCSS特性。

元素的绝对位置，如果position设置为absolute或fixed...

带着固定定位元件，包含的块是视图。元素在视口中的位置是绝对的。滚动不会改变元素的位置。