display

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

示例

/* <display-outside> values
外部显示类型 */
display: block;
display: inline;
display: run-in;

/* <display-inside> values
内部显示类型 */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* global values */
display: inherit;
display: initial;
display: unset;

浏览器支持

浏览器都支持 display

语法

display :[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

display 属性使用关键字取值来指定，关键字取值被分为六类：

<display-outside>

这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）。

• block ：元素生成一个块元素框，在正常流中生成元素前后的换行符。
• inline ：元素生成一个或多个内联元素框，这些框不会在其前后生成换行符。在正常流中，如果有空间，下一个元素将位于同一行上
• run-in ：元素生成一个磨合盒。如果定义为display:run-in框的元素的相邻同级是块框，则run-in框将成为它后面的块框的第一个内联框。Run-in元素的作用类似于inline或block，具体取决于周围的元素。即：如果磨合框包含块框，则与块相同。如果块框在运行框之后，则运行框将成为块框的第一个内联框。如果后面有一个内联框，则运行框将成为块框。 此项还处于实验阶段

<display-inside>

这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式（假定该元素为非替换元素 non-replaced element）

• table ：这些元素的行为类似于HTML <table> 元素。它定义了块级别的框。
• flex ：元素的行为类似于块元素，并根据 flexbox （伸缩盒子）模型布局其内容。
• grid ：元素的行为类似于块元素，并根据 grid （网格模型）布置其内容。
• flow ：元素使用 flow （流）布局（块和内联布局）布局其内容。如果它的外部显示类型是inline或run-in，并且它参与了块或内联格式上下文，那么它将生成一个内联框。否则，它将生成一个块容器盒。 此项还处于实验阶段
• ruby ：元素的行为类似于一个内联元素，并根据ruby格式模型布局其内容。它的行为类似于相应的HTML <ruby> 元素。 此项还处于实验阶段

<display-listitem>

将这个元素的外部显示类型变为 block 盒，并将内部显示类型变为多个 list-item inline 盒。

列表项的单个值将导致元素的行为类似于列表项。这可以与列表样式类型和列表样式位置一起使用。

列表项还可以与任何 <display-outside> 关键字和 flow 或 flow-root ， <display-inside> 关键字组合使用。

<display-internal>

有些布局模型（如 table 和 ruby ）有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。

• table-row-group ：这些元素的行为 <tbody> HTML元素。
• table-header-group ：这些元素的行为 <thead> HTML元素。
• table-footer-group ：这些元素的行为 <tfoot> HTML元素。
• table-row ：这些元素的行为 <tr> HTML元素。
• table-cell ：这些元素的行为 <td> HTML元素。
• table-column-group ：这些元素的行为 <colgroup> HTML元素。
• table-column ：这些元素的行为 <col> HTML元素。
• table-caption ：这些元素的行为 <caption> HTML元素。
• ruby-base ：这些元素的行为 <rb> HTML元素。 此项还处于实验阶段
• ruby-text ：这些元素的行为 <rt> HTML元素。 此项还处于实验阶段
• ruby-base-container ：这些元素的行为 <rbc> HTML元素。 此项还处于实验阶段
• ruby-text-container ：这些元素的行为 <rtc> HTML元素。 此项还处于实验阶段

<display-box>

这些值决定元素是否使用盒模型。

• none ：关闭元素的显示，使其对布局没有影响（呈现文档时就像元素不存在一样）。所有子元素的显示也已关闭。若要使元素占用其通常占用的空间，但不实际呈现任何内容，请改用 visibility 属性
• contents ：这些元素本身不会生成特定的长方体。它们被它们的伪框和子框所取代。请注意，csssdisplaylevel3规范定义了contents值如何影响“异常元素”——这些元素不是纯粹由CSS框概念（如被替换的元素）呈现的元素。详见附录B：显示效果：异常元素的内容。由于浏览器中的可访问性，当前浏览器中的可访问性将不会从该元素中删除。 此项还处于实验阶段

<display-legacy>

CSS 2 对于 display 属性使用单关键字语法，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。

• inline-block ：元素生成一个块元素框，它将与周围的内容一起流动，就像它是一个单独的内联框一样（其行为与被替换的元素非常相似）。它相当于 flow-root .
• inline-table ：内联表值在HTML中没有直接映射。它的行为类似于HTML <table> 元素，但它是一个内联框，而不是块级的框。表框内是块级上下文。它相当于inline table.
• inline-flex ：元素的行为类似于一个内联元素，并根据flexbox模型布局其内容。它相当于 inline flex.
• inline-grid ：元素的行为类似于内联元素，并根据网格模型布局其内容。它相当于 inline grid.

display 的“遗留”取值

Level 3 规范详细说明了 display 属性的两类取值——显式地指定了外部和内部显示属性的规范——但是还没有被浏览器广泛支持。

display-legacy 方法允许使用单个关键字达到相同效果，开发者应该在双关键字取值被广泛支持之前采用这个方法。举例来说，你可以这样指定 inline flex 容器：

.container {
    display: inline-flex;
}

也可以用两个关键字来指定。

.container {
    display: inline flex;
}

可访问性相关

display: none;

将 display 设置为 none 会将元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。

如果你只是想从视觉上隐藏这个元素，对可访问性更加友好的做法是使用属性组合来将其从屏幕上隐藏，但仍可以被屏幕阅读器等辅助技术解析。

display: contents;

浏览器会将所有将 display 设置为 contents 的元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。

• Display: Contents Is Not a CSS Reset | Adrian Roselli
• More accessible markup with display: contents — hiddedevries.nl

Tables

将 <table> 元素的 display 值修改为 block , grid 或 flex 会修改其在可访问性树中的表示，这会使得表格不能被屏幕阅读技术正常处理。