CSS

视觉格式化模型 | Visual formatting model

可视化格式化模型

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

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

  • 箱子的尺寸:精确定义或约束,或不是。

  • 框的类型:inline,inline-level,atomic inline-level,block。

  • 定位方案:在正常流式,悬浮或绝对定位。

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

  • 包含图像的内在尺寸。

  • 其他外部信息。

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

盒生成

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

块级元素和块框

一个元件被认为是块级时其的计算值displayCSS属性是:blocklist-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属性是:inlineinline-blockinline-table。从视觉上来说,它并不构成内容块,而是与其他内联级内容一起分布。通常,具有不同格式的段落的内容(如重点或图像)由内嵌级元素组成。

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

内嵌级元素生成内联级别框,这些框定义为参与内联格式化上下文的框。内联框内联框和框,其内容参与其容器的内联格式化上下文。例如,对于所有未被替换的盒子就是这种情况display:inline内联级别框的内容不参与内联格式化上下文,被称为原子内联级框。这些框,取而代之的行内的元件或通过用计算出的元件所产生display的值inline-blockinline-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,,,leftrightCSS属性

浮动

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

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

图像

绝对定位

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

元素的绝对位置,如果position设置为absolutefixed...

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