视觉格式化模型 | Visual formatting model (Miscellaneous) - CSS 中文开发手册 - Break易站

框中。同样，两个匿名框总是使用相同的颜色作为文本。

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

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

例子

如果我们使用以下HTML代码，

有display:inline和有display:block*

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

创建了两个匿名块框，一个用于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，永远不会分成几个盒，作为能够与内框。

注意：最初，原子内联级别框被称为原子内联框。这是不幸的，因为它们不是内联盒子。这是纠正错误的规范。尽管如此，每次遇到文献中的原子内联框时，都可以无害地读取原子内联框，因为这只是一个名称更改。

内联格式化上下文中的原子内联框不能分成几行。

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

这导致：

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

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

这导致：

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

匿名内联框

至于块盒，有些情况下，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...

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