--- title: display slug: Web/CSS/display tags: - CSS translation_of: Web/CSS/display ---
{{CSSRef}}

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

在 CSS 规范（特指 CSS Level 1/2/3 规范）中查阅 display 属性的所有取值时需要注意：个别取值的详细信息记录在独立的规范中。 例如，display: flex 的详细信息在 CSS Flexible Box Model 规范中记录。可以在本文档末尾的表格中查看所有有关的规范。

语法

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

.container {
  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

Outside

{{CSSxRef("<display-outside>")}}
这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）。
{{page("/zh-CN/docs/Web/CSS/display-outside", "Syntax")}}

Inside

{{CSSxRef("<display-inside>")}}
这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式（假定该元素为非替换元素 non-replaced element）。
{{page("/zh-CN/docs/Web/CSS/display-inside", "Syntax")}}

List Item

{{CSSxRef("<display-listitem>")}}
将这个元素的外部显示类型变为 block 盒，并将内部显示类型变为多个 list-item inline 盒。
{{page("/zh-CN/docs/Web/CSS/display-listitem", "Syntax")}}

Internal

{{CSSxRef("<display-internal>")}}
有些布局模型（如 table 和 ruby）有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。
{{page("/en-US/docs/Web/CSS/display-internal", "Syntax")}}

Box

{{CSSxRef("<display-box>")}}
这些值决定元素是否使用盒模型。
{{page("/en-US/docs/Web/CSS/display-box", "Syntax")}}

Legacy

{{CSSxRef("<display-legacy>")}}
CSS 2 对于 display 属性使用单关键字语法，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。
{{page("/en-US /docs/Web/CSS/display-legacy", "Syntax")}}

是否该继续使用 Legacy 取值？

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

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

.container {
    display: inline-flex;
}

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

.container {
    display: inline flex;
}

有关规范变更的更多信息，查阅文章 Adapting to the new two-value syntax of display。

全局设置

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

指南和示例

上面 语法 部分提供了 display 取值的多个示例。下面的资料将详细介绍 display 的各个取值。

CSS Flow Layout (display: block, display: inline)

display: flex

display: grid

除此之外，你可以在 MDN 上找到布局模型的详细解释：

可访问性相关

display: none;

将 display 设置为 none 会将元素从 可访问性树 accessibility tree 中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术 screen reading technology 访问。

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

display: contents;

当前大多数浏览器对 display: contents; 的实现是：将设置了该值的元素从 可访问性树 accessibility tree 中移除，但保留其子代元素。这会导致该元素自身不再被屏幕阅读技术 screen reading technology  访问。这在 CSS 规范 中被视为不正确的行为。

Tables

将 {{HTMLElement("table")}} 元素的 display 值修改为 block, grid, 或 flex 会修改其在 可访问性树 accessibility tree 中的表现，这会使得 table 元素不能被屏幕阅读技术正常处理。

规范

规范 状态 备注
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}} {{Spec2('CSS3 Display')}} 新增 run-in, flow, flow-root, contents, 以及多关键字取值。
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}} {{Spec2('CSS3 Ruby')}} 新增 ruby, ruby-base, ruby-text, ruby-base-container, 和 ruby-text-container。
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}} {{Spec2('CSS3 Grid')}} 新增 grid 盒模型的值。
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}} {{Spec2('CSS3 Flexbox')}} 新增 flexible 盒模型的值。
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}} {{Spec2('CSS2.1')}} 新增 table 模型的值和 inline-block.
{{SpecName('CSS1', '#display', 'display')}} {{Spec2('CSS1')}} 初始定义.，基础值： none, block, inline, 以及 list-item.

浏览器兼容性

{{Compat("css.properties.display", 10)}}

参见