1. 介绍

本节为规范性内容。

CSS 将一个源文档组织为一个 元素树 的 元素（它可以包含其他 元素 和 文本节点 的混合） 和 文本节点（它可以包含文本）， 并将其呈现到一个 画布 上，比如屏幕、纸张或音频流。 虽然任何此类源文档都可以使用 CSS 渲染， 但最常用的类型是 DOM。 [DOM]（一些更复杂的树类型可能具有其他类型的节点， 例如 DOM 中的注释节点。 对于 CSS 的目的， 所有这些附加类型的节点都将被忽略， 就像它们不存在一样。）

为此，CSS 生成了一个中介结构， 即 盒子树， 它代表了渲染文档的格式结构。 盒子树 中的每个 盒子 代表它在画布上的对应 元素（或 伪元素） 的空间和/或时间表现， 而 文本序列 也同样代表其对应的 文本节点 的内容。

为了创建 盒子树， CSS 首先使用 层叠和继承， 为源树中的每个 元素 和 文本节点 分配每个 CSS 属性的 计算值。 （参见 [CSS-CASCADE-3]。）

接着，CSS 为每个 元素 生成一个或多个 盒子，根据该元素的 display 属性进行指定。 通常，元素会生成一个 盒子， 该 主盒子 代表自身，并在 盒子树 中包含其内容。 然而，某些 display 值 （如 display: list-item） 会生成多个盒子 （例如，一个 主块盒子 和一个子 标记盒子）。 一些值 （例如 none 或 contents） 会导致 元素 和/或其后代不生成任何 盒子。 盒子 通常根据其 display 类型命名——例如，一个由具有 display: block 的元素生成的 盒子 被称为“块盒子”或简称“块”。

盒子 被分配与其生成的 元素 相同的样式，除非另有说明。 通常，继承属性 被分配给 主盒子， 然后在盒子树中继承 给同一元素生成的任何其他盒子。 非继承属性默认适用于 主盒子， 但当元素生成多个盒子时， 有时会被定义为适用于不同的盒子： 例如，应用于表格元素的 border 属性会应用于其 表格网格盒子， 而不是其 主 表格包装盒子。 如果值计算过程改变了这些盒子的样式， 并且请求元素的样式 （例如通过 getComputedStyle()）， 则该元素会反映每个属性对应的被应用到的盒子的值。

类似地，每个相邻的 文本节点 序列生成一个 文本序列，包含它们的文本内容， 并被分配与生成的 文本节点 相同的样式。 如果该序列不包含文本，则不会生成 文本序列。

在构建盒子树时， 由元素生成的盒子是任何祖先元素的主盒子的后代。 通常情况下， 元素的 主盒子 的直接 父盒子 是其最近的生成 盒子 的祖先元素的 主盒子； 然而，也有一些例外， 例如 run-in 盒子、 生成多个容器盒子的显示类型（如表格）， 以及介入的 匿名盒子。

匿名盒子 是不与任何元素关联的盒子。匿名盒子 在某些情况下生成， 以修复当 盒子树 需要特定嵌套结构时， 而这些结构未由 元素树 生成的盒子提供。 例如，一个 表格单元格盒子 需要特定类型的父盒子（表格行盒子）， 如果其父级不是 表格行盒子，它将生成一个 匿名 表格行盒子。 （参见 [CSS2] § 17.2.1。） 与元素生成的盒子不同，它们的样式严格通过元素树继承， 匿名盒子（仅存在于 盒子树 中）通过其 盒子树 父系继承样式。

在布局过程中，盒子 和 文本序列 可能会被分解为多个 片段。 例如，当 内联盒子 和/或 文本序列 被分割成多行时， 或当 块盒子 被分割成跨页面或列时， 这种过程称为 分段。 它还可能由于文本的双向重排而发生 （参见 应用双向重排算法 于 CSS 书写模式） 或者是由于更高级别的 显示类型 盒子分裂， 例如 块内联分裂（参见 CSS2§9.2） 或 列跨距分裂 （参见 CSS 多列布局）。 因此，一个 盒子 由一个或多个 盒子片段 组成， 而一个 文本序列 由一个或多个 文本片段 组成。 有关 分段 的更多信息，参见 [CSS-BREAK-3]。

注意： 许多 CSS 规范是在这些术语确定之前编写的， 或错误地使用了术语， 因此在阅读旧规范时应小心使用这些术语。 应该可以从上下文中推断出它们实际的含义。 请在发现错误时 报告规范中的错误， 以便进行更正。

注意： 有关“听觉”盒子树及其与 display 属性交互的更多信息， 可以在 CSS 语音模块 中找到。 [CSS-SPEECH-1]

1.1. 模块交互

本模块替代并扩展了 display 属性的定义，最初定义于 [CSS2] 第 9.2.4 节。

本模块中的任何属性都不适用于 ::first-line 或 ::first-letter 伪元素。

1.2. 值定义

本规范遵循 CSS 属性定义约定，来自 [CSS2]，并使用 值定义语法，来自 [CSS-VALUES-3]。 本规范未定义的值类型由 CSS 值与单位模块 [CSS-VALUES-3] 定义。 与其他 CSS 模块结合时，可能会扩展这些值类型的定义。

除了在其定义中列出的特定属性值之外， 本规范中定义的所有属性 还接受 CSS 全局关键字 作为其属性值。 为了可读性，它们没有被显式重复。

2. 盒子布局模式：display 属性

用户代理应支持此属性在所有媒体上，包括非视觉媒体。 display 属性定义元素的 显示类型， 包含元素如何生成盒子的两个基本特性：

• 内部显示类型， 如果它是非替换元素，则定义它生成的 格式化上下文， 决定其后代盒子的布局方式。 （替换元素的内部显示不在 CSS 的范围内。）

• 外部显示类型， 决定主盒子自身如何参与 流布局。

文本序列没有 显示类型。

某些 display 值有额外的副作用： 例如 list-item，它还会生成一个 ::marker 伪元素， 以及 none，它会导致元素的整个子树从盒子树中省略。

值定义如下：

<display-outside>  = block | inline | run-in
<display-inside>   = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group |
                     table-footer-group | table-row | table-cell |
                     table-column-group | table-column | table-caption |
                     ruby-base | ruby-text | ruby-base-container |
                     ruby-text-container
<display-box>      = contents | none
<display-legacy>   = inline-block | inline-table | inline-flex | inline-grid

以下信息表总结了 display 的值：

注意： 根据“最兼容向后兼容规则，然后最短”的优先规则，等效的 display 值的序列化使用“简短 display”列。 [CSSOM]

2.1. 外部显示角色用于流布局：block、inline 和 run-in 关键字

<display-outside> 关键字指定元素的 外部显示类型，本质上是其 主盒子 在 流布局 中的角色。定义如下：

block

该元素在 流布局 中生成一个 块级盒子。[CSS2]

inline

该元素在 流布局 中生成一个 内联级盒子。[CSS2]

run-in

该元素生成一个 run-in 盒子，这是一种 内联级盒子，具有特殊行为，尝试将其合并到后续的块容器中。 详情参见 § 5 Run-In 布局。

注意： 外部显示类型 确实会影响 替换元素。

如果指定了 <display-outside> 值，但省略了 <display-inside>，则元素的 内部显示类型 默认为 flow。

2.2. 内部显示布局模型：flow、flow-root、table、flex、grid 和 ruby 关键字

<display-inside> 关键字指定元素的 内部显示类型，定义了布局其内容的格式化上下文的类型（假设它是 非替换元素）。定义如下：

flow

该元素使用 流布局 (块和内联布局) 来布局其内容。

如果它的 外部显示类型 是 inline 或 run-in，并且它参与了 块 或 内联 格式化上下文，那么它会生成一个 内联盒子。

否则，它会生成一个 块容器盒子。

根据其他属性的值（例如 position、float 或 overflow）以及它本身是否参与了块或内联 格式化上下文，它要么为其内容建立一个新的 块格式化上下文，要么将其内容集成到其父级的 格式化上下文 中。参见 CSS2.1 第九章。[CSS2] 一个 块容器 如果为其内容建立了一个新的 块格式化上下文，则被认为具有使用的内部显示类型 flow-root。

flow-root

该元素生成一个 块容器 盒子，并使用 流布局 来布局其内容。它总是为其内容建立一个新的 块格式化上下文。[CSS2]

table

该元素生成一个主 表格包装盒子，为其内容建立一个 块格式化上下文，并包含一个另外生成的 表格网格盒子，该盒子建立一个 表格格式化上下文。[CSS2]

flex

该元素生成一个主 弹性容器 盒子，并建立一个 弹性格式化上下文。[CSS-FLEXBOX-1]

grid

该元素生成一个主 网格容器 盒子，并建立一个 网格格式化上下文。[CSS-GRID-1]

（使用 子网格 的网格可能不会生成新的 网格格式化上下文；详情参见 [CSS-GRID-2]。）

ruby

该元素生成一个 ruby 容器 盒子，并建立一个 ruby 格式化上下文，此外还将其基础级内容集成到其父级 格式化上下文 中（如果它是内联的），或者如果它不是内联的，则生成一个适当 外部显示类型 的包装盒子。[CSS-RUBY-1]

如果指定了 <display-inside> 值，但省略了 <display-outside>，则元素的 外部显示类型 默认为 block—除了 ruby，它默认为 inline。

2.3. 生成标记框：list-item 关键字

list-item 关键字 使元素生成一个 ::marker 伪元素 [CSS-PSEUDO-4]，其内容由 list-style 属性指定 (CSS 2.1§12.5 列表) [CSS2]，并带有一个用于其自身内容的指定类型的主体框。

如果没有指定内部显示类型 值， 主体框的内部显示类型默认设置为 flow。 如果没有指定外部显示类型 值， 主体框的外部显示类型默认设置为 block。

注意：在该级别中，由于语法限制， list-items 限制在 流布局 显示类型 (block/inline/run-in， 内部类型为 flow/flow-root）。 该限制可能会在该模块的未来级别中放宽。

2.4. 布局内部显示类型：table-* 和 ruby-* 关键字

一些布局模型，如 表格 和 ruby， 具有复杂的内部结构， 其子元素和后代元素可以承担不同的角色。 本节定义了这些“布局内部” display 值， 它们只在特定的布局模式中有意义。

除非另有说明， 使用这些 display 值的元素的 内部显示类型和 外部显示类型 都将设置为给定的关键字。

当 display 属性计算为其中一个 布局内部 值时， 它将被视为具有 inline 的使用值。 基于该 inline 值，必须在这些替换元素周围进行空白折叠和匿名框生成， 仿佛它们从未应用过 布局内部 的显示值。

作者不应为 布局内部 显示值分配给 替换元素。

<display-internal> 关键字定义如下：

table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column

该元素是一个内部表格元素。 它生成合适的 内部表格框， 并参与 表格格式化上下文。 参见 CSS2§17.2 [CSS2]。

table-cell 框具有 flow-root 内部显示类型。

table-caption

该元素生成一个 表格标题框， 它是一个具有与表格和表格包装框相关的特殊行为的 块框。 参见 CSS2§17.2 [CSS2]。

table-caption 框具有 flow-root 内部显示类型。

ruby-base, ruby-text, ruby-base-container, ruby-text-container

该元素是一个内部 ruby 元素。 它生成合适的 内部 ruby 框， 并参与 ruby 格式化上下文。[CSS-RUBY-1]

ruby-base 和 ruby-text 具有 flow 内部显示类型。

具有布局特定显示类型的框在放置于不兼容的父元素时会在其周围生成匿名包装框， 如其各自的规范所定义。

<div style="display:block;">
  <div style="display:table-cell">...</div>
</div>

块框
└匿名表格框
 └匿名表格行组框
  └匿名表格行框
   └表格单元框

<div style="display:table;">
  <div style="display:table-row">
    <div style="display:table-cell">...</div>
  </div>
</div>

表格框
└匿名表格行组框
 └表格行框
  └表格单元框

2.5. 框生成：none 和 contents 关键字

虽然 display 可以控制元素将生成的框的类型， 它也可以控制元素是否会生成任何框。

<display-box> 关键字定义如下：

contents

元素本身不会生成任何框， 但它的子元素和伪元素仍然会像往常一样生成框和文本序列。 出于框生成和布局的目的， 元素必须被视为在元素树中被其内容替换 （包括其源文档子元素及其伪元素， 如 ::before 和 ::after 伪元素， 这些伪元素与元素的子元素一样正常生成）。

注意：由于只影响框树， 基于文档树的任何语义， 如选择器匹配、事件处理， 和属性继承， 都不受影响。然而，截至撰写本文时，这一功能尚未在主流浏览器中正确实现， 因此在Web上使用此功能时必须谨慎， 因为它可能会阻止辅助工具 访问元素的语义。

此值在替换元素上计算为 display: none， 以及其他渲染不完全由CSS控制的元素； 详情请参见 附录B：display: contents 对异常元素的影响。

注意：替换元素和表单控件被特殊处理， 因为仅移除元素自身的生成框是一个或多或少未定义的操作。 由于如果用例（以及更精确的渲染模型）发展，这种行为可能会被改进， 因此作者应使用 display: none 而不是 display: contents 在此类元素上 以保证向前兼容性。

none

元素及其后代不会生成 框或文本序列。

同样地，如果一个文本节点 被定义为行为类似于 display: none， 它将不会生成 文本序列。

具有这两个值的元素没有 内部或 外部显示类型， 因为它们根本不会生成任何框。

注意：由于这些值使受影响的元素不生成框， 匿名框生成规则将完全忽略这些省略的元素， 仿佛它们在框树中不存在。

然而，基于标记的关系不受这些值的影响， 因为它们仅是渲染时的效果。例如， 虽然它们可能会影响哪个表格单元出现在一列中， 但它们不会影响哪个表格单元与特定列元素关联。 同样，它们不能影响哪个HTML summary 元素与特定表格关联 或者是否 legend 被认为是在标记特定 fieldset 的内容。

2.6. 预组合的内联级显示值

CSS 第2级使用单关键字语法来表示display， 需要为相同布局模式的块级和内联级变体分别使用不同的关键字。 这些<display-legacy> 关键字映射如下：

inline-block

计算为 inline flow-root。

inline-table

计算为 inline table。

inline-flex

计算为 inline flex。

inline-grid

计算为 inline grid。

注意：尽管这些关键字及其等价物计算为相同的值， 它们的指定值仍然是不同的。

注意：getComputedStyle() 序列化规则 总是会输出这些预组合的关键字， 而不是等效的双关键字对， 这是由于最短、最具向后兼容性的序列化原则。

2.7. 自动框类型转换

某些布局效果需要对框类型进行块化或内联化， 这会将框的计算外部显示类型分别设置为block或inline。 （这对不生成框的显示类型没有影响， 例如 none 或 contents。） 此外：

• 如果一个块框（块流）被内联化， 它的内部显示类型将设置为flow-root，以使其仍然是块容器。

• 如果一个内联框（内联流）被内联化， 它会递归地内联化它的所有流内子元素， 以便没有块级后代 打破其参与的内联格式化上下文。

• 由于历史原因， 如果一个内联块框 （内联流根） 被块化， 它将成为一个块框 （失去其flow-root性质）。 为了保持一致性， 一个run-in flow-root框 也会块化为一个块框。

• 如果一个布局内部框被块化， 它的内部显示类型将转换为flow，以便它成为一个块容器。内联化对 布局内部框没有影响。 （然而，放置在这样一个内联上下文中 通常会导致它们被适当地包装在一个匿名的内联级框中。）

注意：在框与其上下文不匹配时，有两种方法用于修正框类型。 一种是转换计算值的display，如这里描述的块化和内联化。 另一种是在框树构建期间发生的（在计算值确定之后）， 是创建中间的匿名框， 就像在表格、ruby、 和流布局中发生的那样。

2.8. 根元素的主框

根元素的显示类型总是 块化的， 并且其主框总是建立一个 独立的格式化上下文。 该框的包含块是 初始包含块。

此外，根元素的 display 为 contents 时，将计算为 block。

3. 显示顺序：order 属性

框通常按照它们在源文档中出现的顺序显示和布局。 在某些格式化上下文中， 可以使用 order 属性重新排列框的顺序， 从而故意造成元素的逻辑顺序 与它们在二维视觉画布上的空间排列之间的差异。 （参见 § 3.1 重新排序与可访问性。）

具体来说， order 属性控制 弹性项 或 网格项 在其容器内出现的顺序， 通过将它们分配到序号组。 它接受一个 <integer> 值， 指定该项属于哪个序号组。

以下是一个商品卡片的示例， 包含标题、照片和描述。 在每个条目中，源文档内容逻辑顺序是标题在前，接着是描述和照片。 这为语音渲染和非CSS浏览器提供了合理的顺序。 然而，为了获得更吸引人的视觉展示，使用 order 将图像从内容的后面拉到卡片的顶部。

article.sale-item {
  display: flex;
  flex-flow: column;
}
article.sale-item > img {
  order: -1; /* 将图像在布局顺序中移到其他内容之前 */
  align-self: center;
}

<article class="sale-item">
  <h1>Computer Starter Kit</h1>
  <p>This is the best computer money can buy, if you don’t have much money.
  <ul>
    <li>Computer
    <li>Monitor
    <li>Keyboard
    <li>Mouse
  </ul>
  <img src="images/computer.jpg"
    alt="您将获得：一台带有匹配外设的白色台式电脑。" >
</article>

Computer Starter Kit

这是您能买到的最好的电脑， 如果您没有太多钱。

• 电脑
• 显示器
• 键盘
• 鼠标

弹性盒和网格容器按其内容的顺序修改的文档顺序进行布局，从最小编号的序号组开始，逐渐增加。 具有相同序号组的项目按照它们在源文档中出现的顺序进行布局。 这也会影响绘制顺序 [CSS2]， 就像弹性盒项目/网格项目在源文档中被重新排序一样。 绝对定位的弹性盒/网格容器的子项在确定其相对于弹性盒项目/网格项目的绘制顺序时，被视为具有order: 0。

除非未来规范另有规定， 此属性对不是 弹性项或 网格项 的框没有效果。

3.1. 重新排序与可访问性

order 属性不会影响非视觉媒体中的顺序 （如语音）。 同样，order 也不会影响 顺序导航模式的默认遍历顺序 （例如，循环浏览链接，参见 tabindex [HTML]）。

作者必须仅将 order 用于空间而非逻辑的内容重新排序。 使用 order 执行逻辑重新排序的样式表是 不符合规范的。

注意：这样做是为了确保非视觉媒体和非CSS用户代理， 通常线性展示内容时， 可以依赖逻辑源顺序， 而order 用于调整布局顺序。 （由于视觉感知是二维且非线性的， 所以期望的布局顺序不总是逻辑顺序。）

为了在所有展示模式中保留作者意图的顺序， 作者工具——包括所见即所得编辑器以及基于Web的创作辅助工具——必须重新排序底层文档源 而不是使用 order 来执行重新排序， 除非作者明确表示 空间顺序应与 底层文档顺序（决定语音和导航顺序）不同步。

注意：用户代理，包括浏览器、辅助技术和扩展， 可能提供空间导航功能。 本节并不排除在这些空间导航模式中尊重 order 属性； 实际上，为了使此功能有效，需要考虑该属性。 但 order 并不是这种空间导航功能 唯一需要考虑的（甚至不是最主要的）CSS属性。 一个良好实现的空间导航功能需要考虑所有修改空间关系的CSS布局特性。

4. 不可见性：visibility 属性

visibility 属性指定框是否被渲染。不可见的框仍然影响布局。 （将 display 属性设置为 none，以完全禁止生成框。） 值的含义如下：

visible

生成的框可见，正常显示。

hidden

由元素生成的任何框都是不可见的。 然而，如果它们的visibility: visible 被设置为可见， 元素的后代可以是可见的。

collapse

表示框被折叠， 这可能会根据格式化上下文特定的方式占用比正常情况下更少的空间。 请参见 表格中的动态行和列效果 [CSS2] 和 弹性布局中的折叠弹性项 [CSS-FLEXBOX-1]。 但是，在所有其他情况下， （即除非另有说明） 这只会使框不可见， 就像 hidden 一样。

注意：目前，许多用户代理和/或辅助工具 尚未正确实现 可见元素与不可见元素之间的语义关系的可访问性影响， 因此，例如， 将具有特殊角色的父元素（如表格行）设置为 不可见，而让具有特殊角色的子元素（如表格单元格）保持可见 可能会对这些工具的用户造成问题。 作者应避免创建这些情况， 直到工具情况有所改善。

不可见的框不会被渲染 （就像它们完全透明一样）， 无法与之交互 （表现得像它们具有 pointer-events: none）， 被移除出导航 （类似于 display: none）， 并且不会渲染为语音 （除非 speak 为 always [CSS-SPEECH-1]）。 但是，与 display: contents 类似， 它们作为容器的语义角色不受影响， 以确保任何 可见 的后代 能够被正确解释。

注意：如果 speak 设置为 always， 那么即使是不可见的框也会被语音渲染， 并且可以使用非视觉/空间的方法与之交互。

<p>电影前面的象征性暗示在结尾处变得显而易见，
  当揭示出<spoiler-text><span>卢克是他自己的父亲</span></spoiler-text>时，
  巫师的隐晦谜语才变得有意义。
<style>
spoiler-text { border-bottom: 1px solid; }
spoiler-text > span { visibility: hidden; }
spoiler-text.shown > span { visibility: visible; }
</style>
<script>
[...document.querySelectorAll("spoiler-text")].forEach(el=>{
  el.addEventListener("click", e=>el.classList.toggle("shown"));
});
</script>

5. 运行布局

运行框 是一个合并到其后的块中的框， 将自己插入到该块的内联级内容的开头。 这对于格式化紧凑的标题、定义和其他类似内容很有用， 在这些情况下，适当的DOM结构是让标题在后面的段落前面， 但期望的显示效果是内联标题与文本一起布局。

<dl class='dict'>
  <dt>dictionary
  <dd>a book that lists the words of a language in alphabetical
      order and gives their meaning, or that gives the equivalent
      words in a different language.
  <dt>glossary
  <dd>an alphabetical list of terms or words found in or relating
      to a specific subject, text, or dialect, with explanations; a
      brief dictionary.
</dl>
<style>
.dict > dt {
  display: run-in;
}
.dict > dt::after {
  content: ": "
}
</style>

dictionary: a book that lists the words of a language
in alphabetical order and explains their meaning.

glossary: an alphabetical list of terms or words found
in or relating to a specific subject, text, or dialect,
with explanations; a brief dictionary.

运行框的行为与其他内联级框完全一样， 除非：

• 一个 运行框，其流的内部显示类型会内联化其内容。
• 如果一个运行序列 紧跟着一个块框 而该块框不建立新的块格式化上下文， 它将作为该块框的直接子元素插入： 放在其::marker伪元素的框之后（如果有）， 但在该块内容生成的任何其他框之前 （包括由::before伪元素生成的框，如果有）。 如果可能，重置父级会递归进行 （因此运行框实际上成为其格式化上下文中最深的后续“段落”的一部分， 并在此过程中收集新的相邻运行框）。

  重置的内容将像最初在该处作为父级一样进行格式化。注意，只有布局受到影响，继承不受影响， 因为非匿名框的属性继承仅基于元素树。

• 否则 （如果运行序列没有紧跟着这样的块）， 会在运行序列和所有紧随其后的内联级内容（不包括下一个运行序列，如果有）周围生成匿名块框。

运行序列 是一组最大的连续兄弟运行框及其间的空白和/或脱流框。

注意：此说明意味着脱流框如果位于两个运行框之间，则会重置父级。 另一种选择是留下中间的脱流框， 或者让脱流框阻止前一个框的运行。 实施者和作者被鼓励联系CSS工作组，如果他们有首选的行为，因为这个行为是随机选择的。

此修正发生在CSS2§9.2中描述的匿名块和内联框修正之前， 并且影响受影响元素的第一行格式化线的确定， 就像运行序列最初就在框树中的最终位置一样。

注意：由于最早的运行框代表其包含块的第一行格式化线上的第一个文本， 应用于该块元素的::first-letter伪元素选择运行框的第一个字母， 而不是其自身内容的第一个字母。

注意：此运行模型与早期修订版中提出的模型略有不同[CSS2]。

附录 A: 术语表

以下术语为方便起见进行定义：

根元素

文档树中元素的根部。 在 DOM 生成的文档树中， 它是文档元素； 在 HTML 中，它是 html 元素。[DOM] [HTML]

主要框

当元素生成一个或多个框时， 其中一个是主要框， 它包含其后代框和生成的内容， 并且是涉及任何定位方案的框。

某些元素可能除了主要框之外还生成其他框 （例如列表项元素， 它们生成一个额外的标记框， 或表格元素， 它们生成一个主要 表包装框和一个额外的表格网格框）。 这些额外的框是相对于主要框放置的。

内联级

参与内联布局的内容。 具体来说，是内联级框和文本序列。

块级

参与块布局的内容。 具体来说，是块级框。

内联框

一个非替换的内联级 框，其内部显示类型为流。 内联框的内容参与与内联框本身相同的内联格式化上下文。

内联

用作内联框或内联级框的简写，若无歧义， 或作为形容词表示内联级。 后一种用法已弃用。

原子内联

一个被替换的内联级框（例如图像） 或者是一个建立新格式化上下文的框（例如内联块或内联表格）， 并且无法跨行分割 （内联框和ruby 容器则可以）。

任何其内部显示类型不是流的内联级框 会建立一个指定的新的格式化上下文，内部显示类型。

块容器

一个块容器只包含参与内联格式化上下文的内联级框， 或者只包含参与块格式化上下文的块级框（可能会生成匿名块框来确保这一约束， 如CSS2 §9.2.1.1中定义的那样）。

一个只包含内联级内容的块容器会建立一个新的内联格式化上下文。 该元素还会生成一个根内联框，它包裹了所有的内联内容。注意，这个根内联框的概念 有效地替代了在CSS2 §9.2.2.1中引入的“匿名内联元素”概念。

如果其父级格式化上下文不是块格式化上下文， 那么块容器会建立一个新的块格式化上下文； 否则，当块容器参与到一个块格式化上下文时， 它会根据其他属性的限制（例如overflow或align-content）， 要么为其内容建立一个新的块格式化上下文， 要么继续参与它所在的格式化上下文。

注意：一个块容器框可以同时建立块格式化上下文和内联格式化上下文。

块框

一个既是块级框，也是块容器的框。

注意：并非所有的块容器框都是块级框： 例如，非替换的内联块和非替换的表格单元格， 它们是块容器，但不是块级框。 同样，也并非所有的块级框都是块容器： 例如，块级替换元素（display: block） 和弹性容器（display: flex）， 并不是块容器。

块

用作块框、块级框，或块容器框的简写， 在上下文明确时使用。

替换元素

一个内容不在CSS格式化模型范围内的元素， 如图像或嵌入文档。 例如，HTML中 img元素的内容 通常由其 src属性指定的图像替代。

替换元素通常具有自然尺寸。 例如，位图图像有一个以绝对单位指定的自然宽度和自然高度 （可以由此显然确定自然比例）。 另一方面，其他对象可能没有任何自然尺寸 （例如，一个空白的HTML文档）。 参见[css-images-3]。

用户代理可能会认为替换元素没有任何自然尺寸， 如果认为这些尺寸可能会向第三方泄露敏感信息。 例如，如果HTML文档的自然大小根据用户的银行余额变化， 那么UA可能希望将该资源视为没有自然尺寸。

替换元素的内容不被认为属于CSS格式化模型； 然而，它们的自然尺寸会在各种布局计算中使用。 替换元素总是会建立一个独立的格式化上下文。

非替换元素是 一个没有被替换的元素， 即其渲染由CSS模型决定。

包含块

一个用于确定相关框大小和定位的矩形区域。 值得注意的是，包含块 不是一个框（它是一个矩形）， 但通常由某个框的尺寸派生而来框。 每个框根据其包含块进行定位， 但并不局限于此包含块； 它可以溢出。 “一个框的包含块”这个短语意味着 “该框所在的包含块”， 而不是它生成的那个。

通常情况下，一个框的边缘 会作为其后代框的包含块； 我们说一个框“建立了”它的后代的包含块。 如果引用了包含块的属性， 那么它们引用的是生成该包含块的框的值框。 （对于初始包含块， 除非另有说明，值取自根元素。）

详见[CSS2] 第9.1.2节 和 第10.1节，以及 CSS 定位布局3 § 2.1 定位框的包含块的详细说明。

包含块链

一系列连续的包含块， 形成一个通过包含块关系的祖先-后代链。 例如，一个内联框的包含块是其最近的块容器祖先的内容框； 如果该块容器是一个流内块， 那么它的包含块由其父级块容器形成； 如果该祖父级块容器是绝对定位的， 那么它的包含块是其最近的定位祖先的内边缘（不一定是其父级）， 依此类推，直到初始包含块。

初始包含块

根元素的包含块。 初始包含块建立了一个块格式化上下文。 请参见CSS2.1第10.1节中关于连续媒体的内容； 以及[CSS-PAGE-3]中关于分页媒体的位置和尺寸。

格式化上下文

格式化上下文是相关框布局的环境。 不同的格式化上下文根据不同的规则布局它们的框。 例如，弹性布局上下文根据弹性布局规则来布局框[CSS-FLEXBOX-1]， 而块格式化上下文根据块和内联布局规则进行布局[CSS2]。 此外，一些类型的格式化上下文可以交叉存在： 例如，一个内联格式化上下文存在于并与其建立的元素的块格式化上下文相互作用， 而一个ruby容器覆盖了一个ruby格式化上下文，与其参与的内联格式化上下文交互。

一个框要么建立一个新的独立格式化上下文，要么继续其包含块的格式化上下文。 在某些情况下，它可能还会建立一个新的（非独立的）共存格式化上下文。 除非另有说明，建立一个新的格式化上下文会创建一个独立格式化上下文。 框建立的格式化上下文类型取决于其内部显示类型。 例如，一个网格容器建立了一个新的网格格式化上下文， 一个ruby容器建立了一个新的ruby格式化上下文， 而一个块容器可以建立一个新的块格式化上下文和/或一个新的内联格式化上下文。 参见display属性。

独立格式化上下文

当一个框建立了一个独立的格式化上下文（无论该格式化上下文是否与其父级的类型相同），它本质上创建了一个新的、独立的布局环境： 除了通过框本身的大小外，其后代的布局通常不会受到外部格式化上下文规则和内容的影响，反之亦然。

例如，在一个块格式化上下文中，浮动框会影响周围框的布局。 但它们的效果不会逃逸出其格式化上下文： 建立其格式化上下文的框会扩展以完全包含它们， 而来自该框外部的浮动不会被允许伸入并影响框内的内容。

另一个例子是，边距不会跨格式化上下文边界折叠。

排除布局特性可以跨越独立格式化上下文边界影响内容。 （在撰写本文时，它们是唯一可以这样做的布局特性。）[CSS3-EXCLUSIONS]

某些属性可以强制一个框在通常不会的情况下建立一个独立的格式化上下文。 例如， 使一个框脱离正常流会导致它块化，并且建立一个独立的格式化上下文。 另一个例子是，某些contain属性值可以导致一个框建立一个独立的格式化上下文。 将一个块变成一个滚动容器将使其建立一个独立的格式化上下文； 但是将一个子网格变成一个滚动容器不会—它继续作为子网格， 其内容参与其父级网格容器的布局。

块框如果建立了一个独立的格式化上下文，则为其内容建立一个新的块格式化上下文。 在大多数其他情况下， 强制一个框建立一个独立的格式化上下文是无效的操作—要么框已经建立了一个独立格式化上下文（例如弹性容器）， 要么无法在该类型的框上建立一个完全独立的新格式化上下文（例如非替换的内联框）。

块格式化上下文

内联格式化上下文

块 和 内联格式化上下文在CSS 2.1 第9.4节中定义。内联格式化上下文 存在于（并且是其包含的）块格式化上下文中；例如，属于 内联格式化上下文 的行框与属于块格式化上下文的浮动元素相互作用。

块布局

块级框的布局， 在 块格式化上下文中执行。

块格式化上下文根

一个 块容器，它为其内容建立了一个新的块格式化上下文。

BFC

块格式化上下文或块格式化上下文根的缩写。它有多种非正式定义，通常指包含内部浮动、排除外部浮动并抑制边距折叠的框，因此可能具体指以下之一：

• 一个 块容器，它为其内容建立了一个新的块格式化上下文

• 一个 块框（即 块级块容器），它为其内容建立了一个 块格式化上下文（与未建立的块框区分开来）

• （非常宽泛地）任何建立了新格式化上下文（而非内联格式化上下文）的块级框

脱离正常流

在正常流中

如果一个框被从其预期位置和与周围内容的交互中提取出来，并使用不同的布局模式在其父格式化上下文的正常流之外进行布局，则该框为 脱离正常流。 这种情况发生在框被浮动（通过float）或绝对定位（通过absolute position）时。 一个框如果不 脱离正常流，则为 在正常流中。

注意： 一些格式化上下文会抑制浮动，因此即使元素有float: left，它也不一定是脱离正常流。

文档顺序

框或内容在文档中出现的顺序（可能与其渲染时的顺序不同）。为了确定伪元素的相对顺序，使用框树顺序，详见 CSS Pseudo-Elements 4 § 4 树遵守伪元素。

详见 [CSS2] 第9章，其中有对这些术语的更完整定义。

附录B: display: contents 对非普通元素的影响

本节（目前）是非规范性的。

有些元素不仅仅通过CSS的框概念来呈现；例如，替换元素（如 img）、许多表单控件（如 input），以及SVG元素。

本附录定义了它们如何与 display: contents 进行交互。

HTML元素

br

wbr

meter

progress

canvas

embed

object

audio

iframe

img

video

frame

frameset

input

textarea

select

display: contents 计算为 display: none。

legend

根据HTML， legend 使用 display: contents 不是 可渲染的legend， 因此它没有特殊的显示行为。 （因此，它会正常响应 display: contents。）

button

details

fieldset

这些元素没有任何特殊行为；display: contents 只是移除了它们的 主框， 它们的内容会正常渲染。

其他任何HTML元素

在 display: contents 下的表现和常规相同。

SVG 元素

具有 CSS 盒模型布局的 svg 元素 （包括父元素是 HTML 元素的 svg， 以及文档根元素）

display: contents 计算为 display: none。

其他所有可渲染的SVG 容器元素

SVG 文本内容子元素

use

display: contents 会将该元素从格式化树中移除， 并将其内容提升到原元素的位置进行显示。 这些内容包括 use 元素的shadow-DOM内容。

其他任何SVG元素

display: contents 计算为 display: none。

当一个元素从格式化树中移除时， 该元素上的任何控制布局和视觉格式化的SVG属性 在渲染内容时将被忽略。 然而，SVG 呈现属性——映射到CSS属性——继续影响值的处理和继承 [CSS-CASCADE-3]； 因此这些属性可以通过影响这些后代上的属性值， 来影响元素后代的布局和视觉格式化。

MathML 元素

对于所有 MathML 元素，display: contents 计算为 display: none。

附录 C：规范作者的盒模型构造指南

本节是对规范作者的非规范性指导。

• 一个盒子不能同时被块化和行内化； 如果这种情况发生， 需要定义哪一个优先。

• 非主要的非匿名盒子不能被块化： 块化会影响元素的计算值， 从而决定其主要盒子的类型。

• 块化其内容的盒子不能直接包含行内级内容； 在此类元素内生成的任何盒子或文本序列 必须被块化或包裹在一个匿名的块容器中。

• 行内化其内容的盒子不能直接包含块级盒子； 在此类元素中生成的任何盒子 必须是行内级。

• 无法建立独立格式化上下文的盒子 （如非替换行内元素） 不能被要求建立独立的格式化上下文。 先对其进行块化， 或者将其盒子类型更改为能够建立 独立格式化上下文的类型。

致谢

我们要感谢多年来试图理清盒模型生成细节的许多人， 特别是 Bert Bos， 虽然他最后的尝试使用 display-model 和 display-role 未能成功， 但为我们当前的规范奠定了基础； Anton Prowse， 他对 CSS2.1 第 9 章的执着改进使混乱中产生了一些秩序； 以及 Oriol Brufau， 他揭示了本规范中的许多细微差别和错误。 也要向 David Baron、Mats Palmgren、Ilya Streltsyn 和 Boris Zbarsky 致以荣誉提及，感谢他们的反馈。

变更记录

自2020年候选推荐规范以来的更改

评论处理结果自 2020年5月19日候选推荐规范 发布以来已公布。

自 2020年5月19日候选推荐规范 以来的更改包括：

• 将“text run”重命名为“文本序列”。(问题7768)
• 定义了根元素，并在 § 2.8 根元素的主要盒子和初始包含块的定义中澄清了它的布局为块级。(PR 8095, 问题7207, 问题6480, 问题7786)
• 从order属性定义中拉入定义，因为它也适用于网格项目。(问题5865)
• 从[CSS2]中导入visibility属性定义，并更新为更详尽完整的内容。( 问题6123)
• 定义了具有内部布局的替换元素被视为display: inline。(问题6000)
• 澄清了<display-legacy>值实际上计算为与其两个关键词等价的值。(问题5575)

  inline-…

  表现为计算为inline …。

  注意：虽然这些关键字和它们的等价物计算为相同的值，但它们的指定值仍然不同。

  注意：getComputedStyle()序列化规则将总是输出这些预合成的关键字，而不是等价的两个关键字对，遵循最短、最向后兼容的序列化原则。

• 澄清了块化和行内化是计算值的变化。(问题6251)

  某些布局效果需要块化或行内化盒子类型，这将设置盒子的计算外部显示类型为块或行内（分别为）。

• 在术语表中添加了块布局的定义，便于参考。
• 更新了对CSS 网格布局的引用。
• 各种次要的编辑性澄清和交叉链接改进。

自2019年候选推荐规范以来的更改

自 2019年7月11日候选推荐规范 以来的更改包括：

• 合并了来自[CSS2]的其他内容至包含块的定义。
• 澄清了，对于CSS的目的，除元素和文本之外的DOM节点将被忽略。

  （一些源文档从更复杂的树开始，例如DOM，其中可能包含注释节点和其他类型的内容。对于CSS的目的，所有这些其他类型的节点都会被忽略，仿佛它们不存在。）

• 改进/移动了与绝对定位相关的术语表定义。

自 2018年8月28日候选推荐规范 以来的更改包括：

• 定义了盒子树的父级关系；见父级盒子。
• 在术语表中添加了绝对定位的定义；为了便于引用，从CSS2中复制。
• 在§ 1 引言中添加了对各种形式的分段的交叉引用。
• 将“表格盒子”重命名为“表格网格盒子”，以便更容易区分“表格包装盒子”。
• 在根元素→初始包含块传播中添加了“除非另有规定”，因为对于HTML body 元素存在一些遗憾的特殊例外情况。

候选推荐状态之前的更改

可以查看评论处理结果。

自 2018年4月20日工作草案 以来的更改包括：

• 具有 display: contents 的元素现在计算为 display: none。 (Issue 2755)
• 区分了“新的”格式化上下文和独立格式化上下文，因为某些格式化上下文会层叠。 (Issue 2597, Issue 1457)
• 定义了块级盒子，其建立了一个独立格式化上下文，使用的display值为flow-root，以提供更简便的引用点。 (Issue 1550)
• 澄清了display不可动画化（与离散动画不同）。 (Issue 2938)
• 一些小的编辑修复。

自 2017年7月20日工作草案 以来的更改包括：

• 收紧了 块化的规则，确保与 CSS2 兼容。 (Issue 1246)

• 调整了display的语法，将 list-item 关键字放在最后，这影响了预期的序列化顺序。 (Issue 1621)

• 更清楚地定义了在建立内联格式化上下文的块容器中块格式化上下文和内联格式化上下文之间的相互作用。 (Issue 1553)

• 更明确地定义了属性值在元素及其盒子之间的反映方式（当一个元素生成多个盒子时）。 (Issue 1643)

• 澄清了空文本对象在 CSS 渲染中被忽略。 (Issue 1808)

• 澄清了 display 对文档语义没有影响。 (Issue 2355)

• 修正了 display 的定义中的错误。 (Issue 1716)

• 为文档顺序添加了定义。

• 将缺失的SVG元素添加到了附录B的display: contents细节中。 (Issue 2118), 澄清了SVG属性的影响。 (Issue 2502), 并定义了MathML的行为。 (Issue 2167)

• 为未来规范作者添加了一些关于匿名盒子构造规则的指导。 (Issue 1643)

• 将“成为格式化上下文”的部分推回到CSS 容器，在其使用时进行说明。

• 进行了各种小的措辞修正和澄清。

自 2017年1月26日工作草案以来的更改包括：

• 移除了 inline-list-item 值，它等同于 inline list-item。

• 将“文本节点”的概念添加到 元素树中， 并将“文本序列”的概念添加到 盒子树中， 以定义 display: contents 的行为。 (Issue 19, Issue 32)

• 定义了根元素是“流内”元素。 (Issue 3)

• 定义了 ::first-line 和 ::first-letter 与 run-in 的交互。 (Issue 5, Issue 42)

• 澄清了 block/inline/run-in 只在 流布局 中起作用；在其他上下文中被忽略。

• Run-in 是一种内联框，而不仅仅是“类似”内联框。

• 修复了 run-in 在盒子树处理中的递归问题。 (Issue 45)

• 添加了关于 display: contents 如何作用于“非通常元素”的附录。 (Issue 8, Issue 18)

• 修复了 blockification 和 inlinification 规则，特别是对内部布局类型的处理。 (Issue 35, Issue 57)

• 澄清了各种盒子树修正的交互。 (Issue 38, Issue 48)

• 添加了“成为格式化上下文”的定义。

• 各种小的修正和澄清。

还提供了意见处理结果。

自2015年10月15日工作草案以来的更改包括：

• 推迟了 box-suppress/display-or-not 属性的发布，留待下一阶段的 Display 讨论使用案例。
• 指定了 display: contents 对于非通常元素（如替换元素和表单控件）的影响。
• 澄清了即使由于 display: contents 元素本身的盒子未生成，该元素的 ::before 和 ::after 伪元素仍然存在。
• 澄清了 display: contents 不影响事件冒泡。
• 澄清了 run-in 与流外元素及 ::first-letter 的交互。
• 将 table-caption 和 table-cell 切换为使用 flow-root 作为它们的 内显示类型，因为它们始终形成一个格式化上下文根。
• 关闭了剩余问题并添加了风险列表。

自 2015年7月21日工作草案 以来的更改包括：

• 添加了 in-flow 和 out-of-flow 的定义到术语表。

自 2014年9月11日工作草案 以来的更改包括：

• 移除了 display-inside、display-outside 和 display-extras 的长属性，改为让 display 成为多值属性。 （此更改是为了对可以组合的内容施加限制。此规范的未来版本可能会放宽或移除这些限制，前提是它们变得不必要或不受欢迎。）
• 创建了 flow 和 flow-root 内部显示类型，以更好地表达流布局的 显示类型，并创建一个明确的开关，使元素成为 BFC 根。 （此更改应消除类似 ::after { clear: both; } 以及 overflow: hidden 这样的黑客手段，旨在实现此目的。）

隐私注意事项

本规范未引入新的隐私注意事项。

安全注意事项

本规范未引入新的安全注意事项。

自我审查问卷

根据 安全和隐私：需考虑的问题的自我审查问卷

1. 该规范是否涉及可识别个人身份的信息？

   否。

2. 该规范是否涉及高价值数据？

   否。

3. 该规范是否为某个源引入了跨浏览会话持久的状态？

   否。

4. 该规范是否向网页暴露了持久的跨源状态？

   否。

5. 该规范是否向当前无法访问的源暴露了任何其他数据？

   否。

6. 该规范是否启用了新的脚本执行/加载机制？

   否。

7. 该规范是否允许某个源访问用户的位置？

   否。

8. 该规范是否允许某个源访问用户设备上的传感器？

   否。

9. 该规范是否允许某个源访问用户本地计算环境的某些方面？

   否。

10. 该规范是否允许某个源访问其他设备？

    否。

11. 该规范是否允许某个源对用户代理的原生UI进行一定程度的控制？

    否。

12. 该规范是否向网页暴露了临时标识符？

    否。

13. 该规范是否区分了第一方和第三方上下文中的行为？

    否。

14. 该规范在用户代理的“隐身”模式中应如何工作？

    没有不同。

15. 该规范是否将数据持久化到用户的本地设备？

    否。

16. 该规范是否包含“安全注意事项”和“隐私注意事项”部分？

    是。

17. 该规范是否允许降级默认安全特性？

    否。