CSS显示模块第四级

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 Writing Modes），或更高级别的显示类型盒分割，如块中行内分割（见CSS2§9.2），或跨列分块分割（见CSS 多栏布局）。因此，一个盒子由一个或多个盒子片段组成，文本序列由一个或多个文本片段组成。更多关于碎片化的信息，参见[CSS-BREAK-3]。

注：许多 CSS 规范编写于这些术语尚未明确之前，或者使用术语不准确，因此在阅读旧规范时使用这些术语要留意其实际含义。应能根据上下文推断其真正含义。如果发现规范有误，请报告错误，以便修正。

注：关于“听觉”盒子树及其与display属性的交互，参见CSS Speech 模块。[CSS-SPEECH-1]

测试

1.1. 模块交互

本模块替换并扩展了display属性在[CSS2]第9.2.4节中的定义。

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

测试

1.2. 取值定义

本规范遵循CSS 属性定义惯例（见[CSS2]），并使用取值定义语法（见[CSS-VALUES-3]）。本规范未定义的取值类型在 CSS Values & Units [CSS-VALUES-3]中定义。与其他 CSS 模块结合时，这些取值类型的定义可能会被扩展。

除其定义中列出的属性特定取值外，本规范定义的所有属性也接受CSS 全局关键字作为属性值。为便于阅读，这些未在定义中重复列出。

2. 盒布局模式：display 属性

名称:	display
取值：	[ <display-outside> \|\| <display-inside> ] \| <display-listitem> \| <display-internal> \| <display-box> \| <display-legacy>
初始值：	inline
适用对象：	所有元素
继承性：	否
百分比：	不适用
计算值：	一对表示内部和外部显示类型的关键字，加上可选的list-item标志，或<display-internal>或<display-box>关键字；具体计算规则见各规范正文
规范顺序：	按语法
动画类型：	见§ 2.9 display 的动画与插值

用户代理应在所有媒介（包括非可视媒介）上支持该属性。 display 属性定义了元素的显示类型，即元素生成盒子的两种基本方式：

内部显示类型，它定义了（如果是非替换元素）生成的格式化上下文类型，决定其后代盒子的布局方式。（替换元素的内部显示超出 CSS 范畴。）
外部显示类型，决定主盒本身如何参与流式布局。

文本序列没有显示类型。

某些display值有额外的副作用：如list-item，还会生成::marker伪元素，而none会导致元素整个子树被排除在盒子树之外。

display属性不会影响元素的语义：语义由文档语言定义，不会被 CSS 影响。除none值外，该值还影响元素及其后代的听觉/语音输出[CSS-SPEECH-1]和交互性，其余display属性仅影响可视布局：其目的是让设计者能不影响底层文档语义地自由更改元素的布局表现。

取值定义如下：

<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	生成的盒子
none	—	子树在盒子树中被省略
contents	—	元素在盒子树中被内容替代
block	block flow	块级块容器（即块盒）
flow-root	block flow-root	块级块容器，建立新的块格式化上下文（BFC）
inline	inline flow	行内盒
inline-block	inline flow-root	行内级块容器（即inline block）
run-in	run-in flow	run-in 盒（一种带有特殊盒子树处理规则的行内盒）
list-item	block flow list-item	块盒，带有额外的标记盒
inline list-item	inline flow list-item	行内盒，带有额外的标记盒
flex	block flex	块级 flex 容器
inline-flex	inline flex	行内级 flex 容器
grid	block grid	块级 grid 容器
inline-grid	inline grid	行内级 grid 容器
ruby	inline ruby	行内级 ruby 容器
block ruby	block ruby	块盒，包含ruby 容器
table	block table	块级表格包装盒，包含表格网格盒
inline-table	inline table	行内级表格包装盒，包含表格网格盒
<display-internal> 类型	—	布局内部专用盒

注：依照“最兼容旧版，然后最短”优先级，等价display值的序列化使用“短display”一栏。[CSSOM]

测试

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

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

block: 元素在流式布局中生成一个块级盒。[CSS2]
inline: 元素在流式布局中生成一个行内级盒。[CSS2]
run-in: 元素生成一个run-in 盒，它是一种特殊行为的行内级盒，尝试与后续块容器合并。详见§ 6 Run-In 布局。

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

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

测试

display-change-iframe.html （在线测试）（源码）
display-change-object-iframe.html （在线测试）（源码）
after-content-display-004.xht (visual test) （源码）
anonymous-box-generation-002.xht (visual test) （源码）
background-applies-to-011.xht (visual test) （源码）
background-attachment-applies-to-011.xht (visual test) （源码）
background-color-applies-to-011.xht (visual test) （源码）
background-image-applies-to-011.xht (visual test) （源码）
background-position-applies-to-011.xht (visual test) （源码）
background-repeat-applies-to-011.xht (visual test) （源码）
before-content-display-004.xht (visual test) （源码）
border-applies-to-011.xht (visual test) （源码）
border-bottom-applies-to-011.xht (visual test) （源码）
border-bottom-color-applies-to-011.xht (visual test) （源码）
border-bottom-style-applies-to-011.xht (visual test) （源码）
border-bottom-width-applies-to-011.xht (visual test) （源码）
border-collapse-applies-to-004.xht (visual test) （源码）
border-color-applies-to-011.xht (visual test) （源码）
border-left-applies-to-011.xht (visual test) （源码）
border-left-color-applies-to-011.xht (visual test) （源码）
border-left-style-applies-to-011.xht (visual test) （源码）
border-left-width-applies-to-011.xht (visual test) （源码）
border-right-applies-to-011.xht (visual test) （源码）
border-right-color-applies-to-011.xht (visual test) （源码）
border-right-style-applies-to-011.xht (visual test) （源码）
border-right-width-applies-to-011.xht (visual test) （源码）
border-spacing-applies-to-004.xht (visual test) （源码）
border-style-applies-to-011.xht (visual test) （源码）
border-top-applies-to-011.xht (visual test) （源码）
border-top-color-applies-to-011.xht (visual test) （源码）
border-top-style-applies-to-011.xht (visual test) （源码）
border-top-width-applies-to-011.xht (visual test) （源码）
border-width-applies-to-011.xht (visual test) （源码）
bottom-applies-to-011.xht (visual test) （源码）
caption-side-applies-to-004.xht (visual test) （源码）
clear-applies-to-011.xht (visual test) （源码）
clear-runin-001.xht (visual test) （源码）
color-applies-to-011.xht (visual test) （源码）
counter-increment-applies-to-011.xht （在线测试）（源码）
counter-reset-applies-to-011.xht （在线测试）（源码）
cursor-applies-to-011.xht (manual test) （源码）
direction-applies-to-011.xht (visual test) （源码）
display-004.xht (visual test) （源码）
empty-cells-applies-to-004.xht (visual test) （源码）
first-line-pseudo-009.xht (visual test) （源码）
float-applies-to-011.xht (visual test) （源码）
font-applies-to-004.xht (visual test) （源码）
font-family-applies-to-004.xht (visual test) （源码）
font-size-applies-to-004.xht (visual test) （源码）
font-style-applies-to-004.xht （在线测试）（源码）
font-variant-applies-to-004.xht （在线测试）（源码）
font-weight-applies-to-004.xht （在线测试）（源码）
height-applies-to-011.xht （在线测试）（源码）
left-applies-to-011.xht (visual test) （源码）
letter-spacing-applies-to-004.xht （在线测试）（源码）
line-height-applies-to-011.xht (visual test) （源码）
list-style-applies-to-011.xht （在线测试）（源码）
list-style-image-applies-to-011.xht (visual test) （源码）
list-style-position-applies-to-011.xht (visual test) （源码）
list-style-type-applies-to-011.xht （在线测试）（源码）
margin-applies-to-011.xht (visual test) （源码）
margin-bottom-applies-to-011.xht (visual test) （源码）
margin-left-applies-to-011.xht (visual test) （源码）
margin-right-applies-to-011.xht (visual test) （源码）
margin-top-applies-to-011.xht (visual test) （源码）
max-height-applies-to-011.xht （在线测试）（源码）
max-width-applies-to-011.xht （在线测试）（源码）
min-height-applies-to-011.xht （在线测试）（源码）
min-width-applies-to-011.xht （在线测试）（源码）
outline-applies-to-011.xht (visual test) （源码）
outline-color-applies-to-011.xht (visual test) （源码）
outline-style-applies-to-011.xht (visual test) （源码）
outline-width-applies-to-011.xht (visual test) （源码）
overflow-applies-to-011.xht (visual test) （源码）
padding-applies-to-011.xht (visual test) （源码）
padding-bottom-applies-to-011.xht (visual test) （源码）
padding-left-applies-to-011.xht (visual test) （源码）
padding-right-applies-to-011.xht (visual test) （源码）
padding-top-applies-to-011.xht (visual test) （源码）
position-applies-to-011.xht (visual test) （源码）
quotes-applies-to-011.xht （在线测试）（源码）
right-applies-to-011.xht (visual test) （源码）
run-in-001.xht (visual test) （源码）
run-in-002.xht (visual test) （源码）
run-in-003.xht (visual test) （源码）
run-in-004.xht (visual test) （源码）
run-in-005.xht (visual test) （源码）
run-in-006.xht (visual test) （源码）
run-in-007.xht (visual test) （源码）
run-in-008.xht (visual test) （源码）
run-in-009.xht (visual test) （源码）
run-in-010.xht (visual test) （源码）
run-in-011.xht (visual test) （源码）
run-in-012.xht (visual test) （源码）
run-in-013.xht (visual test) （源码）
run-in-abspos-between-001.xht （在线测试）（源码）
run-in-abspos-between-002.xht （在线测试）（源码）
run-in-abspos-between-003.xht （在线测试）（源码）
run-in-basic-001.xht （在线测试）（源码）
run-in-basic-002.xht （在线测试）（源码）
run-in-basic-003.xht （在线测试）（源码）
run-in-basic-004.xht （在线测试）（源码）
run-in-basic-005.xht （在线测试）（源码）
run-in-basic-006.xht （在线测试）（源码）
run-in-basic-007.xht （在线测试）（源码）
run-in-basic-008.xht （在线测试）（源码）
run-in-basic-009.xht （在线测试）（源码）
run-in-basic-010.xht （在线测试）（源码）
run-in-basic-011.xht （在线测试）（源码）
run-in-basic-012.xht （在线测试）（源码）
run-in-basic-013.xht （在线测试）（源码）
run-in-basic-014.xht （在线测试）（源码）
run-in-basic-015.xht （在线测试）（源码）
run-in-basic-016.xht （在线测试）（源码）
run-in-basic-017.xht （在线测试）（源码）
run-in-basic-018.xht （在线测试）（源码）
run-in-block-between-001.xht （在线测试）（源码）
run-in-block-between-002.xht （在线测试）（源码）
run-in-block-between-003.xht （在线测试）（源码）
run-in-breaking-001.xht （在线测试）（源码）
run-in-breaking-002.xht （在线测试）（源码）
run-in-clear-001.xht （在线测试）（源码）
run-in-clear-002.xht （在线测试）（源码）
run-in-contains-abspos-001.xht （在线测试）（源码）
run-in-contains-block-001.xht （在线测试）（源码）
run-in-contains-block-002.xht （在线测试）（源码）
run-in-contains-block-003.xht （在线测试）（源码）
run-in-contains-block-004.xht （在线测试）（源码）
run-in-contains-block-005.xht （在线测试）（源码）
run-in-contains-block-inside-inline-001.xht （在线测试）（源码）
run-in-contains-block-inside-inline-002.xht （在线测试）（源码）
run-in-contains-block-inside-inline-003.xht （在线测试）（源码）
run-in-contains-float-001.xht （在线测试）（源码）
run-in-contains-inline-001.xht （在线测试）（源码）
run-in-contains-inline-002.xht （在线测试）（源码）
run-in-contains-inline-003.xht （在线测试）（源码）
run-in-contains-inline-004.xht （在线测试）（源码）
run-in-contains-inline-005.xht （在线测试）（源码）
run-in-contains-inline-006.xht （在线测试）（源码）
run-in-contains-inline-007.xht （在线测试）（源码）
run-in-contains-inline-block-001.xht （在线测试）（源码）
run-in-contains-inline-table-001.xht （在线测试）（源码）
run-in-contains-relpos-block-001.xht （在线测试）（源码）
run-in-contains-relpos-block-002.xht （在线测试）（源码）
run-in-contains-relpos-block-003.xht （在线测试）（源码）
run-in-contains-run-in-001.xht （在线测试）（源码）
run-in-contains-run-in-002.xht （在线测试）（源码）
run-in-contains-run-in-003.xht （在线测试）（源码）
run-in-contains-table-001.xht （在线测试）（源码）
run-in-contains-table-002.xht （在线测试）（源码）
run-in-contains-table-003.xht （在线测试）（源码）
run-in-contains-table-caption-001.xht （在线测试）（源码）
run-in-contains-table-cell-001.xht （在线测试）（源码）
run-in-contains-table-column-001.xht （在线测试）（源码）
run-in-contains-table-column-group-001.xht （在线测试）（源码）
run-in-contains-table-inside-inline-001.xht （在线测试）（源码）
run-in-contains-table-inside-inline-002.xht （在线测试）（源码）
run-in-contains-table-inside-inline-003.xht （在线测试）（源码）
run-in-contains-table-row-001.xht （在线测试）（源码）
run-in-contains-table-row-group-001.xht （在线测试）（源码）
run-in-display-none-between-001.xht （在线测试）（源码）
run-in-display-none-between-002.xht （在线测试）（源码）
run-in-display-none-between-003.xht （在线测试）（源码）
run-in-fixedpos-between-001.xht （在线测试）（源码）
run-in-fixedpos-between-002.xht （在线测试）（源码）
run-in-fixedpos-between-003.xht （在线测试）（源码）
run-in-float-between-001.xht （在线测试）（源码）
run-in-float-between-002.xht （在线测试）（源码）
run-in-float-between-003.xht （在线测试）（源码）
run-in-inherit-001.xht （在线测试）（源码）
run-in-inheritance-001.xht (visual test) （源码）
run-in-inline-between-001.xht （在线测试）（源码）
run-in-inline-between-002.xht （在线测试）（源码）
run-in-inline-between-003.xht （在线测试）（源码）
run-in-inline-block-between-001.xht （在线测试）（源码）
run-in-inline-block-between-002.xht （在线测试）（源码）
run-in-inline-block-between-003.xht （在线测试）（源码）
run-in-inline-table-between-001.xht （在线测试）（源码）
run-in-inline-table-between-002.xht （在线测试）（源码）
run-in-inline-table-between-003.xht （在线测试）（源码）
run-in-linebox-001.xht (visual test) （源码）
run-in-linebox-002.xht (visual test) （源码）
run-in-listitem-between-001.xht （在线测试）（源码）
run-in-listitem-between-002.xht （在线测试）（源码）
run-in-listitem-between-003.xht （在线测试）（源码）
run-in-relpos-between-001.xht （在线测试）（源码）
run-in-relpos-between-002.xht （在线测试）（源码）
run-in-relpos-between-003.xht （在线测试）（源码）
run-in-replaced-001.xht （在线测试）（源码）
run-in-restyle-001.xht （在线测试）（源码）
run-in-restyle-002.xht （在线测试）（源码）
run-in-restyle-003.xht （在线测试）（源码）
run-in-run-in-between-001.xht （在线测试）（源码）
run-in-run-in-between-002.xht （在线测试）（源码）
run-in-run-in-between-003.xht （在线测试）（源码）
run-in-run-in-between-004.xht （在线测试）（源码）
run-in-run-in-between-005.xht （在线测试）（源码）
run-in-run-in-between-006.xht （在线测试）（源码）
run-in-run-in-between-007.xht （在线测试）（源码）
run-in-run-in-between-008.xht （在线测试）（源码）
run-in-table-between-001.xht （在线测试）（源码）
run-in-table-between-002.xht （在线测试）（源码）
run-in-table-between-003.xht （在线测试）（源码）
run-in-table-cell-between-001.xht （在线测试）（源码）
run-in-table-cell-between-002.xht （在线测试）（源码）
run-in-table-cell-between-003.xht （在线测试）（源码）
run-in-table-row-between-001.xht （在线测试）（源码）
run-in-table-row-between-002.xht （在线测试）（源码）
run-in-table-row-between-003.xht （在线测试）（源码）
run-in-text-between-001.xht （在线测试）（源码）
run-in-text-between-002.xht （在线测试）（源码）
run-in-text-between-003.xht （在线测试）（源码）
run-in-text-between-004.xht （在线测试）（源码）
run-in-text-between-005.xht （在线测试）（源码）
table-anonymous-block-001.xht (visual test) （源码）
table-layout-applies-to-004.xht (visual test) （源码）
text-align-applies-to-004.xht (visual test) （源码）
text-decoration-applies-to-004.xht （在线测试）（源码）
text-indent-applies-to-004.xht (visual test) （源码）
text-transform-applies-to-004.xht （在线测试）（源码）
top-applies-to-011.xht (visual test) （源码）
unicode-bidi-applies-to-011.xht (visual test) （源码）
vertical-align-applies-to-011.xht (visual test) （源码）
visibility-applies-to-011.xht (visual test) （源码）
white-space-applies-to-004.xht (visual test) （源码）
width-applies-to-011.xht （在线测试）（源码）
word-spacing-applies-to-004.xht (visual test) （源码）
z-index-applies-to-011.xht (visual test) （源码）

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

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

flow

元素使用流式布局（块与行内布局）排列内容。

如果其外部显示类型为inline或run-in，且参与的是块或行内格式化上下文，则生成一个行内盒。

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

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

flow-root

元素生成一个块容器盒，并以流式布局排列内容。总是为内容新建一个块格式化上下文。[CSS2]

table

元素生成主表格包装盒，建立块格式化上下文，并包含一个额外生成的表格网格盒用于建立表格格式化上下文。[CSS2]

flex

元素生成主flex 容器盒，并建立flex 格式化上下文。[CSS-FLEXBOX-1]

grid

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

（使用subgrid 的 grid 可能不会新建grid 格式化上下文；详见[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]，同时为其自身内容生成指定类型的主盒（principal box）。

如果未指定内部 display 类型的值，主盒的内部 display 类型默认是 flow。如果未指定外部 display 类型的值，主盒的外部 display 类型默认是 block。

注意：在本级别中，语法有相关限制， list-item 仅限于流式布局（Flow Layout）显示类型（block / inline / run-in ，内部类型为 flow / flow-root）。在该模块未来的级别中，这一限制可能会放宽。

测试

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

某些布局模型，如table和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 内部显示类型。

具有布局专用显示类型的盒子，在放入不兼容的父元素时，会在自身外层生成匿名包装盒，具体规则参见各自的规范。

例如，表格布局要求table-cell盒必须有table-row父盒。

如果层级错误，如下：

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

它将在自身外层生成包装盒，结构如下：

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

即便父元素是另一个表格内部元素，只要不是正确类型，也会生成包装盒。例如，下面的标记：

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

匿名包装盒生成结果为：

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

这种“修正”确保了表格布局有可预测的结构。

测试

本节没有测试。

2.5. 盒子生成：none 和 contents 关键字

display不仅能控制元素生成盒子的类型，还能控制元素是否生成任何盒子。

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

contents

元素自身不会生成任何盒子，但其子元素和伪元素仍照常生成盒子和文本序列。在盒子生成和布局时，该元素必须视为在元素树中被其内容替换（包括其源文档子元素和伪元素，如::before和::after伪元素，它们在子元素前后照常生成）。

注：只有盒子树受影响，基于文档树的语义，如选择器匹配、事件处理和属性继承不受影响。但实际主流浏览器尚未正确实现此特性，因此在网页上使用时需谨慎，可能会导致辅助工具无法获取元素语义。

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

注：替换元素和表单控件会被特殊处理，因为仅移除元素自身生成的盒子的行为基本上是未定义的。随着相关用例和更精确的渲染模型发展，此行为可能被细化，作者应优先对这类元素使用display: none，而非display: contents，以保证前向兼容性。

none

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

同样地，如果文本节点被定义为display: none，它不会生成文本序列。

使用这两种值的元素没有内部或外部显示类型，因为它们根本不会生成任何盒子。

注：由于这些值导致元素不生成盒子，匿名盒生成规则会完全忽略这些被省略的元素，就像它们在盒子树中不存在一样。

但基于标记的关系并不受这些值影响，因为它们只在渲染时生效。例如，虽然它们可能影响哪一个表格单元格显示在一列中，但不会影响哪个单元格与特定列元素关联。同样，它们也不会影响哪个 HTML summary 元素与特定表格关联，或 legend 是否视为标记特定 fieldset 的内容。

测试

2.6. 预组合行内级 display 取值

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

inline-block: 计算为 inline flow-root。
inline-table: 计算为 inline table。
inline-flex: 计算为 inline flex。
inline-grid: 计算为 inline grid。

注：虽然这些关键字及其等价写法计算结果相同，但它们的指定值依然不同。

注：getComputedStyle() 序列化规则总是输出这些预组合关键字，而不是等价的两关键字组合，因为最短且最兼容旧版的序列化原则。

测试

本节没有测试。

2.7. 盒类型自动转换

某些布局效果需要对盒类型进行块化（blockification）或行内化（inlinification），即将盒子的计算外部显示类型设置为block或inline （分别对应）。（这对根本不生成盒子的display 类型，如none或contents，无任何影响。）另外：

如果一个块盒（block flow）被行内化，其内部显示类型会被设为flow-root，以确保它仍为块容器。
如果一个行内盒（inline flow）被行内化，会递归对其所有 in-flow 子元素行内化，以保证没有块级后代分隔其所处的行内格式化上下文。
出于兼容性考虑，如果一个inline block 盒（inline flow-root）被块化，它会变为block盒（失去其flow-root特性）。为保持一致， run-in flow-root盒块化后也变为block盒。
如果一个布局内部盒被块化，其内部显示类型转换为flow，从而成为块容器。行内化对布局内部盒无影响。（但放入此类行内上下文时，通常会在其外层包裹合适类型的匿名行内级盒。）

注：当盒子类型与其上下文不匹配时，有两种修正方式。一种是对display的计算值进行转换，如本节所述的块化和行内化。另一种是在盒子树构建（计算值已定后）阶段创建中间匿名盒，例如表格、ruby和流式布局中的处理。

一些计算值修正的例子如下：

绝对定位或浮动元素会块化盒子的显示类型。[CSS2]
包含于ruby 容器会行内化该盒的显示类型，详见[CSS-RUBY-1]。
父元素为grid或flex的display 值会块化盒子的显示类型。[CSS-GRID-1] [CSS-FLEXBOX-1]

2.8. 根元素的主盒

根元素的显示类型始终会被块化，其主盒始终建立一个独立格式化上下文。该盒子的包含块是初始包含块。

此外，根元素上的display为contents时会被计算为block。

2.9. display 的动画与插值

一般来说， display属性的动画类型为离散。不过，类似于visibility的插值（参见Web Animations §  Animation of visibility），在 none 与其他display值间插值时，p 介于 0 和 1 时映射为非 none 值。另外，只要元素的display值（无视 Transitions 和 Animations 的 cascade origins）会被计算为 none，该元素就是inert的。

3. 显示顺序：order 属性

名称:	order
取值：	<integer>
初始值：	0
适用对象：	弹性盒项目（flex items）和网格项目（grid items）
继承性：	否
百分比：	不适用
计算值：	指定的整数
规范顺序：	按语法
动画类型：	按计算值类型

测试

flexible-order.html （在线测试）（源码）

盒子通常按照它们在源文档中的顺序显示和布局。在某些格式化上下文中，可以使用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="You get: a white desktop computer with matching peripherals."
    width="250" height="188">
</article>

You get: a white desktop computer with matching keyboard and monitor. — 上述代码的渲染示例。

弹性盒容器和网格容器以顺序修正后的文档顺序布局其内容，从序号最小的组开始依次排列。属于同一序号组的项目，按其在源文档中的顺序排列。这也影响绘制顺序 [CSS2]，就好像弹性盒/网格项目在源文档中被重排一样。弹性盒/网格容器的绝对定位子元素在确定其与 flex/grid 项的绘制相对顺序时，视为 order: 0。

除非未来规范另有规定，此属性对不是弹性盒项目或网格项目的盒子无效。

3.1. 重排与可访问性

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

作者只能用order进行空间顺序重排，不得用于逻辑顺序重排。使用order进行逻辑重排的样式表不符合规范。

注：这样做可保证非可视媒体和非CSS用户代理（通常线性展现内容）可以依赖逻辑源顺序，而order用于调整布局顺序。（视觉感知是二维且非线性的，所需布局顺序未必等于逻辑顺序。）

为确保所有呈现模式下作者意图顺序一致，编辑工具（包括所见即所得编辑器及基于Web的辅助工具）必须在底层文档源做重排，不得用order进行重排，除非作者明确要求空间顺序与底层文档顺序（决定语音和导航顺序）不同步。

例如，一个工具既可支持 flex 项目的拖拽排序，也可配合媒体查询为不同屏幕大小定义不同布局顺序。

通常情况下，重排应影响所有屏幕尺寸及导航和语音顺序，工具应在 DOM 层进行拖拽重排。但有时作者希望不同屏幕尺寸下布局顺序不同。工具可通过 order 配合媒体查询实现，同时将最小屏幕尺寸的顺序与底层 DOM 顺序绑定（因为这多半是逻辑线性顺序），其他尺寸则用 order 定义视觉顺序。

这种工具是合规的，而仅用 order 实现拖拽重排（即便实现简单）则不合规。

注：用户代理（包括浏览器、可访问性技术及扩展）可以提供空间导航特性。本节不妨碍在此类空间导航模式下参考order属性来决定元素顺序；实际上，为使该功能生效，必须考虑此属性。但order并非此类空间导航特性需要考虑的唯一（甚至主要）CSS属性。一个良好的空间导航功能应综合考虑所有影响空间关系的 CSS 布局特性。

4. 阅读顺序：reading-flow 属性

阅读流容器指的是一个块级、弹性或网格容器，且其 reading-flow 属性值不是 normal 的有效值。

渲染定义的同级阅读流（rendering-defined sibling reading flow）是阅读流容器的所有子元素按序组成的列表。所有子元素必须渲染为一个元素，并被视为该阅读流容器中的同级。顺序由 reading-flow 属性决定。

该属性是否也应该适用于表格？[Issue #9922]

名称:	reading-flow
值:	normal \| source-order \| flex-visual \| flex-flow \| grid-rows \| grid-columns \| grid-order
初始值:	normal
适用对象:	块级、弹性与网格容器
是否继承:	否
百分比:	不适用
计算值:	与指定一致
规范顺序:	按语法
动画类型:	不可动画化

reading-flow 属性控制元素在语音渲染或线性顺序导航时被访问的顺序。

它接收一个关键字值。值定义如下：

normal: 按照 DOM 中元素的顺序。
source-order: 适用于网格、弹性和块级布局。创建一个阅读流容器，并允许对直接子元素使用 reading-order 属性。除了尊重 reading-order 属性外，按 DOM 顺序排列元素。
flex-visual: 仅在弹性容器上生效。按弹性项目的视觉阅读顺序，并考虑书写模式。例如在英文文档中，若 flex-direction: row-reverse 且 reading-flow: flex-visual，则阅读顺序为从左到右。
flex-flow: 仅在弹性容器上生效。按 flex-flow 方向排列。
grid-rows: 仅在网格容器上生效。按网格项目的行视觉顺序排列，并考虑书写模式。
grid-columns: 仅在网格容器上生效。按网格项目的列视觉顺序排列，并考虑书写模式。
grid-order: 仅在网格容器上生效。按顺序修改后的文档顺序排列。因此，若无 order 属性变更项目顺序，则与 normal 相同。

例子：有三个弹性项目在一行展示，使用 reading-flow: flex-visual 以及 flex-direction: row-reverse。文档为英文，文本方向是从左到右。这三个项目的阅读顺序因此为 "Item 3"、"Item 2"、"Item 1"，从左到右阅读。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</div>

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

例子：有四个网格项目，放置于网格上，视觉顺序已不同于 DOM 顺序。 reading-flow 属性值为 grid-rows，文档为英文。这些项目的阅读顺序为 "Item 4"、"Item 2"、"Item 3"、"Item 1"。

<div class="wrapper">
  <a class="a" href="#">Item 1</a>
  <a class="b" href="#">Item 2</a>
  <a class="c" href="#">Item 3</a>
  <a class="d" href="#">Item 4</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
             "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

reading-flow 属性不会影响布局和绘制顺序，因此对视觉画布的渲染没有影响。

如果使用 flex-* 或 grid-* 关键字值时，会考虑 order 属性。

例子：有三个弹性项目在一行排列，使用 reading-flow: flex-flow。第三个项目的 DOM 元素上 order=-1。阅读顺序变为 "Item 3"、"Item 1"、"Item 2"。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</div>

.wrapper a:nth-child(3) {
  order: -1;
}

.wrapper {
  display: flex;
  reading-flow: flex-flow;
}

4.1. 覆盖阅读流：reading-order 属性

名称:	reading-order
值:	<integer>
初始值:	0
适用对象:	阅读流容器的直接块级、网格项或弹性项子元素。
是否继承:	否
百分比:	不适用
计算值:	指定整数值
规范顺序:	按语法
动画类型:	按计算值类型

reading-order 属性允许作者调整某项在阅读流中被访问的顺序，可覆盖父元素 reading-flow 设置的位置。它只接受一个 <integer> 值，指定该项属于哪个序数分组。同级元素根据序数分组从最小到最大排序。

如果两个项目的阅读顺序相同，则由 reading-flow 属性决定优先顺序。

例子：有六个网格项目， grid-auto-flow 属性值为 dense，项目展示顺序可能与源顺序不同。其中带有 top 类的项目的 reading-order 属性设为 -1，因此 Item 4 会成为阅读流中的第一个。其余项目按照行的显示顺序访问，因为 reading-flow 属性值为 grid-rows。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a class="top" href="#">Item 4</a>
  <a href="#">Item 5</a>
  <a href="#">Item 6</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: dense;
  reading-flow: grid-rows;
}

.top { reading-order: -1; }

例子：有五个块容器的直接块级子元素，其中 reading-flow 属性值是 source-order。第三个项目 reading-order 值是 -1。阅读流会先访问第三项，之后按源顺序访问其它项。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

.wrapper { reading-flow: source-order; }

.wrapper > a { display: block; }

.wrapper a:nth-child(3){ reading-order: -1; }

源文档应表达元素的底层逻辑顺序。 reading-flow 和 reading-order 属性适用于某些文档因布局变化（如响应媒体查询）而拥有多种阅读顺序的情景。在这种情况下，最常用或最基本的阅读顺序应编码在源顺序中，使文档在无 CSS 时依然合理。

设计考量及背景

设计 reading-flow 属性时的一些考量包括：

在某些场景下有明确需求，让阅读与导航顺序独立于盒布局顺序。最基础的情况是确保当阅读与导航顺序不同于盒布局顺序时能与视觉感知顺序保持一致。（视觉感知是非线性的，会受视觉元素大小、色彩对比度、间距等因素影响，不仅仅是页面上的空间坐标。）
根据 Web平台架构的核心原则，为了确保内容在当前及未来各种设备上皆能被最广泛受众访问，底层文档应可在无 CSS 情况下合理呈现。因此，底层文档顺序应表达其逻辑排序，而不是视觉呈现顺序。
对于页面上没有强烈固有顺序的组件，一个文档可以有多个布局形态的视觉呈现，都可传达相同语义信息。所有这些呈现方式都应支持良好的可访问性。
线性导航、焦点排序顺序与屏幕阅读器顺序应始终一致，因为有些用户会同时使用它们。
页面的每个组件或层级需要不同的重排序需求，所以 CSS 排序控制不应一刀切（如 box-sizing），应当针对性使用（如相对流向 vs. 物理属性与值）。

测试

DOM 需要方便的重排序函数让作者（包括不常写 JS 的作者）可以轻松实现源顺序重排，而不是误用 order 或 reading-flow。[Issue #7387]

5. 不可见性：visibility 属性

名称:	visibility
值:	visible \| hidden \| force-hidden \| collapse
初始值:	visible
适用对象:	所有元素
是否继承:	是
百分比:	不适用
计算值:	与指定一致
规范顺序:	按语法
动画类型:	离散
媒体类型:	视觉

visibility 属性用于指定该盒是否被渲染。不可见的盒子仍然会影响布局。（如需完全阻止盒生成，请将 display 属性设置为 none）。各个值含义如下：

visible: 生成的盒子正常可见。
hidden: 该元素生成的任何盒子都为不可见。但其后代元素如果设置了visibility: visible仍可以是可见的。
force-hidden: 该元素以及所有后代生成的盒子均为不可见（无论其 visibility 值为何）。
collapse: 表示该盒子已折叠，并可能以格式化上下文相关的方式占用更少空间。参见表格中的动态行与列效果 [CSS2] 以及弹性布局弹性项目折叠 [CSS-FLEXBOX-1]。其它情况下（即未特别另行规定），这只是让该盒子不可见，与 hidden 一样。

注意：目前，许多用户代理和/或辅助工具未正确实现可见元素与有语义关联的不可见元素的辅助功能影响。因此例如将具有特殊角色（如表格行）的父元素设为不可见，而保留具有特殊角色（如表格单元格）的子元素为可见，可能会对这些工具的用户造成问题。在工具改进之前，作者应避免制造此类情况。

不可见盒不会被渲染（如完全透明），不可交互（表现得如同pointer-events: none），会移出导航顺序（类似于display: none），并且不会被语音渲染（除非speak为always [CSS-SPEECH-1]）。但与 display: contents 类似，其作为容器的语义角色不会改变，保证有可见的后代时能被正确解释。

注意：如果speak设置为always，否则不可见盒将会被语音渲染，并可能通过非视觉/空间方式进行交互。

临时用 display: none 隐藏内容通常足够，但这样会将该元素完全从布局中移除，可能导致页面在元素显示与隐藏时发生不必要的移动和回流。可使用 visibility: hidden 以在隐藏和显示时保持页面布局稳定。

例如，下面是一个被有意简化的 "剧透" 元素实现，用户点击隐藏文本后即可显示内容：

<p>电影前半段的象征意义在结尾变得明显，
  当揭露<spoiler-text><span>Luke 是他自己的父亲</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>

此示例被故意简化，缺少了许多辅助功能及用户体验要素，真实站点的剧透元素应更加完善，本例仅用于直观展示 visibility 的用法。请勿直接用于生产环境。

测试

本节没有测试。

6. Run-In 布局

run-in 盒是一种会合并到其后的块中的盒子，并将自身插入该块的行级内容开头。这对于紧凑型标题、定义等类似内容的排版很有用，此时合适的 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.

一个run-in 盒的行为与其他行级盒完全一致，除非：

具有内部显示类型为flow的run-in 盒会对其内容进行行级化。
如果run-in 序列后紧跟一个不会建立新块格式化上下文的块盒，那么该序列会作为该块盒的直接子元素插入：插入位置在其::marker伪元素盒（如有）之后，但在该块内容生成的其他盒（包括::before伪元素生成的盒，如有）之前。这种重新父级操作会递归进行（因此 run-in 实际上会成为其格式化上下文中最深层后续“段落”的一部分，逐步收集新相邻的 run-in）。
重新父级后的内容会像最初就在那一样进行排版。注意：只影响布局，不影响继承，因为非匿名盒的属性继承仅基于元素树。
否则（即run-in 序列后没有这种块），会在该run-in 序列以及其后所有紧跟的行级内容（直到下一个run-in 序列，如有）外面生成一个匿名块盒。

run-in 序列指一组最大长度的连续同级run-in 盒及其间的空白和/或脱离流的盒。

注意: 这意味着如果两个 run-in 盒之间有脱离流的盒，这些脱离流的盒也会被重新归为子级。另一种做法是将这些脱离流的盒留在原处，或让其阻止前一个 run-in 盒并入后续块。实现者和作者如有偏好行为，欢迎联系 CSSWG，目前这一行为是随机选定的。

此修正发生在CSS2§9.2中描述的匿名块和行盒修正之前，并影响受影响元素的首行的判定，就好像run-in 序列最初就在盒树的最终位置一样。

注意: 最早的 run-in 代表其包含块的首行的首文本，所以对该块元素应用::first-letter伪元素时，会选中 run-in 的首字母，而不是其自身内容的首字母。

注意: 该 run-in 模型与早期 [CSS2] 的提案略有不同。

测试

display-change-iframe.html （在线测试）（源码）
display-change-object-iframe.html （在线测试）（源码）
after-content-display-004.xht (visual test) （源码）
anonymous-box-generation-002.xht (visual test) （源码）
background-applies-to-011.xht (visual test) （源码）
background-attachment-applies-to-011.xht (visual test) （源码）
background-color-applies-to-011.xht (visual test) （源码）
background-image-applies-to-011.xht (visual test) （源码）
background-position-applies-to-011.xht (visual test) （源码）
background-repeat-applies-to-011.xht (visual test) （源码）
before-content-display-004.xht (visual test) （源码）
border-applies-to-011.xht (visual test) （源码）
border-bottom-applies-to-011.xht (visual test) （源码）
border-bottom-color-applies-to-011.xht (visual test) （源码）
border-bottom-style-applies-to-011.xht (visual test) （源码）
border-bottom-width-applies-to-011.xht (visual test) （源码）
border-collapse-applies-to-004.xht (visual test) （源码）
border-color-applies-to-011.xht (visual test) （源码）
border-left-applies-to-011.xht (visual test) （源码）
border-left-color-applies-to-011.xht (visual test) （源码）
border-left-style-applies-to-011.xht (visual test) （源码）
border-left-width-applies-to-011.xht (visual test) （源码）
border-right-applies-to-011.xht (visual test) （源码）
border-right-color-applies-to-011.xht (visual test) （源码）
border-right-style-applies-to-011.xht (visual test) （源码）
border-right-width-applies-to-011.xht (visual test) （源码）
border-spacing-applies-to-004.xht (visual test) （源码）
border-style-applies-to-011.xht (visual test) （源码）
border-top-applies-to-011.xht (visual test) （源码）
border-top-color-applies-to-011.xht (visual test) （源码）
border-top-style-applies-to-011.xht (visual test) （源码）
border-top-width-applies-to-011.xht (visual test) （源码）
border-width-applies-to-011.xht (visual test) （源码）
bottom-applies-to-011.xht (visual test) （源码）
caption-side-applies-to-004.xht (visual test) （源码）
clear-applies-to-011.xht (visual test) （源码）
clear-runin-001.xht (visual test) （源码）
color-applies-to-011.xht (visual test) （源码）
counter-increment-applies-to-011.xht （在线测试）（源码）
counter-reset-applies-to-011.xht （在线测试）（源码）
cursor-applies-to-011.xht (manual test) （源码）
direction-applies-to-011.xht (visual test) （源码）
display-004.xht (visual test) （源码）
empty-cells-applies-to-004.xht (visual test) （源码）
first-line-pseudo-009.xht (visual test) （源码）
float-applies-to-011.xht (visual test) （源码）
font-applies-to-004.xht (visual test) （源码）
font-family-applies-to-004.xht (visual test) （源码）
font-size-applies-to-004.xht (visual test) （源码）
font-style-applies-to-004.xht （在线测试）（源码）
font-variant-applies-to-004.xht （在线测试）（源码）
font-weight-applies-to-004.xht （在线测试）（源码）
height-applies-to-011.xht （在线测试）（源码）
left-applies-to-011.xht (visual test) （源码）
letter-spacing-applies-to-004.xht （在线测试）（源码）
line-height-applies-to-011.xht (visual test) （源码）
list-style-applies-to-011.xht （在线测试）（源码）
list-style-image-applies-to-011.xht (visual test) （源码）
list-style-position-applies-to-011.xht (visual test) （源码）
list-style-type-applies-to-011.xht （在线测试）（源码）
margin-applies-to-011.xht (visual test) （源码）
margin-bottom-applies-to-011.xht (visual test) （源码）
margin-left-applies-to-011.xht (visual test) （源码）
margin-right-applies-to-011.xht (visual test) （源码）
margin-top-applies-to-011.xht (visual test) （源码）
max-height-applies-to-011.xht （在线测试）（源码）
max-width-applies-to-011.xht （在线测试）（源码）
min-height-applies-to-011.xht （在线测试）（源码）
min-width-applies-to-011.xht （在线测试）（源码）
outline-applies-to-011.xht (visual test) （源码）
outline-color-applies-to-011.xht (visual test) （源码）
outline-style-applies-to-011.xht (visual test) （源码）
outline-width-applies-to-011.xht (visual test) （源码）
overflow-applies-to-011.xht (visual test) （源码）
padding-applies-to-011.xht (visual test) （源码）
padding-bottom-applies-to-011.xht (visual test) （源码）
padding-left-applies-to-011.xht (visual test) （源码）
padding-right-applies-to-011.xht (visual test) （源码）
padding-top-applies-to-011.xht (visual test) （源码）
position-applies-to-011.xht (visual test) （源码）
quotes-applies-to-011.xht （在线测试）（源码）
right-applies-to-011.xht (visual test) （源码）
run-in-001.xht (visual test) （源码）
run-in-002.xht (visual test) （源码）
run-in-003.xht (visual test) （源码）
run-in-004.xht (visual test) （源码）
run-in-005.xht (visual test) （源码）
run-in-006.xht (visual test) （源码）
run-in-007.xht (visual test) （源码）
run-in-008.xht (visual test) （源码）
run-in-009.xht (visual test) （源码）
run-in-010.xht (visual test) （源码）
run-in-011.xht (visual test) （源码）
run-in-012.xht (visual test) （源码）
run-in-013.xht (visual test) （源码）
run-in-abspos-between-001.xht （在线测试）（源码）
run-in-abspos-between-002.xht （在线测试）（源码）
run-in-abspos-between-003.xht （在线测试）（源码）
run-in-basic-001.xht （在线测试）（源码）
run-in-basic-002.xht （在线测试）（源码）
run-in-basic-003.xht （在线测试）（源码）
run-in-basic-004.xht （在线测试）（源码）
run-in-basic-005.xht （在线测试）（源码）
run-in-basic-006.xht （在线测试）（源码）
run-in-basic-007.xht （在线测试）（源码）
run-in-basic-008.xht （在线测试）（源码）
run-in-basic-009.xht （在线测试）（源码）
run-in-basic-010.xht （在线测试）（源码）
run-in-basic-011.xht （在线测试）（源码）
run-in-basic-012.xht （在线测试）（源码）
run-in-basic-013.xht （在线测试）（源码）
run-in-basic-014.xht （在线测试）（源码）
run-in-basic-015.xht （在线测试）（源码）
run-in-basic-016.xht （在线测试）（源码）
run-in-basic-017.xht （在线测试）（源码）
run-in-basic-018.xht （在线测试）（源码）
run-in-block-between-001.xht （在线测试）（源码）
run-in-block-between-002.xht （在线测试）（源码）
run-in-block-between-003.xht （在线测试）（源码）
run-in-breaking-001.xht （在线测试）（源码）
run-in-breaking-002.xht （在线测试）（源码）
run-in-clear-001.xht （在线测试）（源码）
run-in-clear-002.xht （在线测试）（源码）
run-in-contains-abspos-001.xht （在线测试）（源码）
run-in-contains-block-001.xht （在线测试）（源码）
run-in-contains-block-002.xht （在线测试）（源码）
run-in-contains-block-003.xht （在线测试）（源码）
run-in-contains-block-004.xht （在线测试）（源码）
run-in-contains-block-005.xht （在线测试）（源码）
run-in-contains-block-inside-inline-001.xht （在线测试）（源码）
run-in-contains-block-inside-inline-002.xht （在线测试）（源码）
run-in-contains-block-inside-inline-003.xht （在线测试）（源码）
run-in-contains-float-001.xht （在线测试）（源码）
run-in-contains-inline-001.xht （在线测试）（源码）
run-in-contains-inline-002.xht （在线测试）（源码）
run-in-contains-inline-003.xht （在线测试）（源码）
run-in-contains-inline-004.xht （在线测试）（源码）
run-in-contains-inline-005.xht （在线测试）（源码）
run-in-contains-inline-006.xht （在线测试）（源码）
run-in-contains-inline-007.xht （在线测试）（源码）
run-in-contains-inline-block-001.xht （在线测试）（源码）
run-in-contains-inline-table-001.xht （在线测试）（源码）
run-in-contains-relpos-block-001.xht （在线测试）（源码）
run-in-contains-relpos-block-002.xht （在线测试）（源码）
run-in-contains-relpos-block-003.xht （在线测试）（源码）
run-in-contains-run-in-001.xht （在线测试）（源码）
run-in-contains-run-in-002.xht （在线测试）（源码）
run-in-contains-run-in-003.xht （在线测试）（源码）
run-in-contains-table-001.xht （在线测试）（源码）
run-in-contains-table-002.xht （在线测试）（源码）
run-in-contains-table-003.xht （在线测试）（源码）
run-in-contains-table-caption-001.xht （在线测试）（源码）
run-in-contains-table-cell-001.xht （在线测试）（源码）
run-in-contains-table-column-001.xht （在线测试）（源码）
run-in-contains-table-column-group-001.xht （在线测试）（源码）
run-in-contains-table-inside-inline-001.xht （在线测试）（源码）
run-in-contains-table-inside-inline-002.xht （在线测试）（源码）
run-in-contains-table-inside-inline-003.xht （在线测试）（源码）
run-in-contains-table-row-001.xht （在线测试）（源码）
run-in-contains-table-row-group-001.xht （在线测试）（源码）
run-in-display-none-between-001.xht （在线测试）（源码）
run-in-display-none-between-002.xht （在线测试）（源码）
run-in-display-none-between-003.xht （在线测试）（源码）
run-in-fixedpos-between-001.xht （在线测试）（源码）
run-in-fixedpos-between-002.xht （在线测试）（源码）
run-in-fixedpos-between-003.xht （在线测试）（源码）
run-in-float-between-001.xht （在线测试）（源码）
run-in-float-between-002.xht （在线测试）（源码）
run-in-float-between-003.xht （在线测试）（源码）
run-in-inherit-001.xht （在线测试）（源码）
run-in-inheritance-001.xht (visual test) （源码）
run-in-inline-between-001.xht （在线测试）（源码）
run-in-inline-between-002.xht （在线测试）（源码）
run-in-inline-between-003.xht （在线测试）（源码）
run-in-inline-block-between-001.xht （在线测试）（源码）
run-in-inline-block-between-002.xht （在线测试）（源码）
run-in-inline-block-between-003.xht （在线测试）（源码）
run-in-inline-table-between-001.xht （在线测试）（源码）
run-in-inline-table-between-002.xht （在线测试）（源码）
run-in-inline-table-between-003.xht （在线测试）（源码）
run-in-linebox-001.xht (visual test) （源码）
run-in-linebox-002.xht (visual test) （源码）
run-in-listitem-between-001.xht （在线测试）（源码）
run-in-listitem-between-002.xht （在线测试）（源码）
run-in-listitem-between-003.xht （在线测试）（源码）
run-in-relpos-between-001.xht （在线测试）（源码）
run-in-relpos-between-002.xht （在线测试）（源码）
run-in-relpos-between-003.xht （在线测试）（源码）
run-in-replaced-001.xht （在线测试）（源码）
run-in-restyle-001.xht （在线测试）（源码）
run-in-restyle-002.xht （在线测试）（源码）
run-in-restyle-003.xht （在线测试）（源码）
run-in-run-in-between-001.xht （在线测试）（源码）
run-in-run-in-between-002.xht （在线测试）（源码）
run-in-run-in-between-003.xht （在线测试）（源码）
run-in-run-in-between-004.xht （在线测试）（源码）
run-in-run-in-between-005.xht （在线测试）（源码）
run-in-run-in-between-006.xht （在线测试）（源码）
run-in-run-in-between-007.xht （在线测试）（源码）
run-in-run-in-between-008.xht （在线测试）（源码）
run-in-table-between-001.xht （在线测试）（源码）
run-in-table-between-002.xht （在线测试）（源码）
run-in-table-between-003.xht （在线测试）（源码）
run-in-table-cell-between-001.xht （在线测试）（源码）
run-in-table-cell-between-002.xht （在线测试）（源码）
run-in-table-cell-between-003.xht （在线测试）（源码）
run-in-table-row-between-001.xht （在线测试）（源码）
run-in-table-row-between-002.xht （在线测试）（源码）
run-in-table-row-between-003.xht （在线测试）（源码）
run-in-text-between-001.xht （在线测试）（源码）
run-in-text-between-002.xht （在线测试）（源码）
run-in-text-between-003.xht （在线测试）（源码）
run-in-text-between-004.xht （在线测试）（源码）
run-in-text-between-005.xht （在线测试）（源码）
table-anonymous-block-001.xht (visual test) （源码）
table-layout-applies-to-004.xht (visual test) （源码）
text-align-applies-to-004.xht (visual test) （源码）
text-decoration-applies-to-004.xht （在线测试）（源码）
text-indent-applies-to-004.xht (visual test) （源码）
text-transform-applies-to-004.xht （在线测试）（源码）
top-applies-to-011.xht (visual test) （源码）
unicode-bidi-applies-to-011.xht (visual test) （源码）
vertical-align-applies-to-011.xht (visual test) （源码）
visibility-applies-to-011.xht (visual test) （源码）
white-space-applies-to-004.xht (visual test) （源码）
width-applies-to-011.xht （在线测试）（源码）
word-spacing-applies-to-004.xht (visual test) （源码）
z-index-applies-to-011.xht (visual test) （源码）

附录A：术语表

以下术语定义于此，便于查阅：

根元素

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

主盒

当元素生成一个或多个盒时，其中有一个是主盒，它包含其后代盒和生成内容，并且也是参与任何定位方案的盒。

有些元素除了主盒还会生成其他盒（如list-item元素，会额外生成 marker 盒，或table元素，会生成主表包装盒和一个额外的表格网格盒）。这些附加盒的位置是相对主盒放置的。

行级

参与行内布局的内容。具体为行级盒和文本序列。

块级

参与块布局的内容。具体为块级盒。

行盒

非替换的行级盒，其内部显示类型为flow。行盒的内容与自身一起参与相同的行内格式化上下文。

inline

可作为行盒或行级盒的简写（在不歧义时），或作为形容词表示行级。后者用法已不推荐。

原子行内

替换类的行级盒（如图片），或建立新格式化上下文的盒（如inline-block或inline-table），且不可跨行断开（而行盒和ruby 容器可以）。

任何内部显示类型非flow的行级盒，都会为自身内容建立新的格式化上下文。

块容器

块容器要么只包含参与行内格式化上下文的行级盒，要么只包含参与块格式化上下文的块级盒（可能生成匿名块盒以满足该约束，详见CSS2§9.2.1.1）。

只包含行级内容的块容器会建立新的行内格式化上下文。元素还会生成一个根行盒包裹所有行内容。注意，这个根行盒的概念实际上取代了CSS2§9.2.2.1中的“匿名行内元素”概念。

当其父格式化上下文不是块格式化上下文时，块容器会建立新的块格式化上下文；否则，在自身参与块格式化上下文的情况下，它要么为自身内容建立新块格式化上下文，要么沿用现有的，具体由其他属性（如overflow或align-content）的约束决定。

注意: 块容器盒可以同时建立块格式化上下文和行内格式化上下文。

块盒

既是块级盒也是块容器的盒。

注意: 并非所有块容器都是块级盒：非替换的inline-block和非替换表格单元格就是块容器，但不是块级盒。同样，并非所有块级盒都是块容器：块级替换元素（display: block）和 flex 容器（display: flex），不是块容器。

block

在不歧义时，作为块盒、块级盒或块容器盒的简写。

替换元素

内容不受 CSS 排版模型控制的元素，比如图片或嵌入文档。例如，HTML img 元素的内容通常会被其 src 属性指定的图片替换。

替换元素通常有自然尺寸。例如，位图图片有用绝对单位指定的自然宽高（可据此得出自然比例）。但其他对象可能没有任何自然尺寸（如空白 HTML 文档）。详见[css-images-3]。

如果认为自然尺寸可能泄露敏感信息，用户代理可以认为替换元素没有自然尺寸。例如，如果 HTML 文档的自然尺寸会随用户的银行余额变化， UA 可能会将其视为没有自然尺寸。

替换元素的内容不参与 CSS 排版模型；但其自然尺寸会用于各种布局计算。替换元素总是建立独立格式化上下文。

非替换元素是指不是替换的元素，即其渲染由 CSS 模型决定。

包含块

用于确定与其相关盒的尺寸和定位的矩形。注意，包含块不是盒（而是矩形），但通常来源于某个盒的尺寸。每个盒相对于其包含块有一个位置，但不会受包含块约束；可以溢出。 “盒的包含块”指 “盒所处的包含块”，而不是它生成的那个。

一般来说，盒边会作为后代盒的包含块；这称为某盒“建立”了其后代的包含块。若引用包含块的属性，就引用生成该包含块的盒上的值。（对于初始包含块，除非另有说明，值取自根元素。）

详见[CSS2] 9.1.2节、10.1节和CSS Positioned Layout 3 § 2.1 定位盒的包含块。

包含块链

一组通过包含块关系连接而成的祖先-后代链的连续包含块序列。例如，行盒的包含块是其最近的块容器祖先的内容盒；如果该块容器是流内块，则它的包含块由其父块容器形成；如果该祖父块容器是绝对定位的，则它的包含块是最近定位祖先的内边距边（不一定是其父），依此类推直至初始包含块。

初始包含块

根元素的包含块。初始包含块会建立块格式化上下文。有关其位置和尺寸，参见CSS2.1§10.1的连续媒体；以及[CSS-PAGE-3]的分页媒体。

格式化上下文

格式化上下文指一组相关盒被排版的环境。不同的格式化上下文有各自的排版规则。例如，flex 格式化上下文遵循flex 布局规则[CSS-FLEXBOX-1]，而块格式化上下文则用块与行规则[CSS2]。有些类型的格式化上下文是交错/共存的：例如行内格式化上下文存在于并与建立它的元素的块格式化上下文互动， ruby 容器会在其ruby 基础容器参与的行内格式化上下文上叠加ruby 格式化上下文。

盒要么建立新的独立格式化上下文，要么延续其包含块的格式化上下文。某些情况下，还会建立新的（非独立的）共存格式化上下文。但除非另有说明，建立新格式化上下文时即创建独立格式化上下文。盒建立何种格式化上下文由其内部显示类型决定。例如，grid 容器建立grid 格式化上下文， ruby 容器建立ruby 格式化上下文，块容器可建立块格式化上下文和/或行内格式化上下文。详见display属性。

独立格式化上下文

当盒建立独立格式化上下文时（不论其类型与父上下文是否一致），实际上建立了一个新的独立排版环境：除非通过盒自身尺寸，其后代的布局一般不受外部格式化上下文规则和内容影响，反之亦然。

例如，在块格式化上下文中，浮动盒会影响周围盒的布局。但其影响不会超出其格式化上下文：建立该格式化上下文的盒会扩展以完全包含它们，外部的浮动不会侵入盒内影响其内容。

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

排除区可以跨独立格式化上下文边界影响内容。（截至撰写时，这是唯一可以跨布局特性的情况。）[CSS3-EXCLUSIONS]

某些属性可强制盒建立独立格式化上下文，即使通常不会。例如，将盒设为脱离流会导致其块级化，同时建立独立格式化上下文。还有， contain属性的某些值也可导致盒建立独立格式化上下文。将块变为滚动容器也会让其建立独立格式化上下文；但将子网格设为滚动容器不会——其内容仍参与父grid 容器的布局。

块盒建立独立格式化上下文后，会为其内容建立新的块格式化上下文。其他大多数情况下，强制盒建立独立格式化上下文无实际效果——要么盒已建立独立格式化上下文（如flex 容器），要么无法在该类型盒上建立独立新格式化上下文（如非替换行盒）。

块格式化上下文

行内格式化上下文

块和行内格式化上下文定义见CSS 2.1 第9.4节。行内格式化上下文存在于（属于其包含的）块格式化上下文；例如，属于行内格式化上下文的行盒会与属于块格式化上下文的浮动发生交互。

块布局

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

块格式化上下文根

建立新块格式化上下文的块容器。

BFC

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

为其内容建立新块格式化上下文的块容器
为其内容建立块格式化上下文的块盒（即块级块容器），与未建立者区分。
（非常宽泛地）任何建立新格式化上下文（非行内格式化上下文）的块级盒

脱离流

流内

如果一个盒子从它预期的位置和与周围内容的交互中被提取出来，并以不同的布局范式在其父格式化上下文的正常内容流之外进行布局，则该盒子是脱离流（out-of-flow）的。当盒子被浮动（通过 float）或绝对定位（通过 position）时会发生这种情况。如果一个盒子不是脱离流的，则它是在流中（in-flow）的。

注意：某些格式化上下文会抑制浮动，因此拥有 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。

这里的设计意图是，只要元素内部的“渲染上下文”与外部上下文不同，就应用 display: none 行为。如果该元素的子元素不是其父元素的合法子元素，就不能简单地将它们提升到格式化树上。

例如，SVG 的文本内容和文本格式化元素需要 text 元素上下文；如果移除了 text，其子文本内容和元素将不再有效。因此，display: contents 应用于 text 会阻止整个 text 元素被渲染。相比之下，任何在 tspan 或 textPath 内的有效内容，在父文本格式化上下文内也是有效内容，因此这些元素适用内容提升行为。

同样，如果内容提升会将子元素从不可渲染元素（如 pattern 或 symbol 内的形状）转变为可渲染元素（如直接作为 svg 的子元素的形状），那这就是无效的渲染上下文变更。因此，永不渲染的容器元素不能通过 display: contents “去盒化”。

当元素从格式化树中移除时，该元素上用于控制布局和视觉格式的 SVG 属性在渲染内容时会被忽略。但 SVG 表现属性（映射到 CSS 属性）仍影响属性值计算与继承 [CSS-CASCADE-3]；因此这些属性可以通过影响后代元素上的 CSS 属性值，影响其布局和视觉表现。

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 提出的反馈。

变更记录

Level 3 以来的新增内容

以下特性是在 CSS Display Module Level 3 之后新增的：

reading-flow 属性 (问题 8589)
reading-order 属性 (问题)
可对 display 属性进行动画处理
force-hidden 作为 visibility 的一个值

隐私注意事项

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

安全注意事项

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

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语的组合表达。规范性部分中出现的关键词 “MUST”（必须）、“MUST NOT”（禁止）、“REQUIRED”（必需）、“SHALL”（应）、“SHALL NOT”（不应）、“SHOULD”（应该）、“SHOULD NOT”（不应该）、“RECOMMENDED”（推荐）、“MAY”（可以）、“OPTIONAL”（可选）应按照 RFC 2119 的描述进行解释。但为了可读性，本规范中这些词不会全部用大写字母表示。

除明确标记为非规范性的部分、示例和注释外，本规范的所有文本均为规范性内容。[RFC2119]

本规范中的示例以“例如”引入，或通过 class="example" 与规范性文本区分开来，如下所示：

说明性注释以“注意”开头，并通过 class="note" 与规范性文本区分开来，如下所示：

告示是规范性内容，为突出重点而特别呈现，通过 <strong class="advisement"> 与其他规范性文本区分，如下所示： 用户代理必须提供可访问的替代方案。

一致性类别

如果样式表中所有使用本模块定义的语法的语句都符合通用 CSS 语法和本模块各特性定义的语法，则该样式表符合本规范。

如果渲染器除了按照相关规范解释样式表外，还能通过正确解析并据此渲染文档，支持本规范定义的所有特性，则其符合本规范。但由于设备限制导致 UA 无法正确渲染文档，并不视为不符合规范。（例如，UA 并不要求在单色显示器上渲染颜色。）

如果作者工具生成的样式表在语法上符合通用 CSS 语法和本模块各特性定义的语法，并满足本模块所述样式表的其它一致性要求，则其符合本规范。

部分实现

为了便于作者利用前向兼容的解析规则分配回退值，CSS 渲染器必须将所有不支持的 at-规则、属性、属性值、关键字及其它语法结构视为无效（并适当忽略）。特别地，用户代理不得在单个多值属性声明中选择性地忽略不支持的组件值而保留支持的值：如果有任何值被视为无效（如不支持的值），CSS 要求整个声明被忽略。

不稳定和专有特性的实现

非实验性实现

一旦规范进入候选推荐阶段，非实验性实现即成为可能，实现者应发布任何已证明正确实现、符合规范的 CR 级特性的无前缀实现。

为了确保和维护 CSS 在不同实现间的互操作性，CSS 工作组要求非实验性 CSS 渲染器在发布任何 CSS 特性的无前缀实现前向 W3C 提交一份实现报告（如有必要，还要提交实现报告使用的测试用例）。提交给 W3C 的测试用例将由 CSS 工作组审查和修正。

CSS显示模块第4级

摘要

本文档状态

1. 引言

1.1. 模块交互

1.2. 取值定义

2. 盒布局模式：display 属性

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

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

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

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

2.5. 盒子生成：none 和 contents 关键字

2.6. 预组合行内级 display 取值

2.7. 盒类型自动转换

2.8. 根元素的主盒

2.9. display 的动画与插值

3. 显示顺序：order 属性

Computer Starter Kit

3.1. 重排与可访问性

4. 阅读顺序：reading-flow 属性

4.1. 覆盖阅读流：reading-order 属性

5. 不可见性：visibility 属性

6. Run-In 布局

附录A：术语表

附录 B：display: contents 对非常规元素的影响

HTML 元素

SVG 元素

MathML 元素

附录 C：规范作者的盒构建指南

致谢

变更记录

最新变更

Level 3 以来的新增内容

隐私注意事项

安全注意事项

一致性

文档约定

一致性类别

部分实现

不稳定和专有特性的实现

非实验性实现

索引

本规范定义的术语

引用中定义的术语

参考文献

规范性引用

参考性引用

属性索引

问题索引