display

display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。

display 的一些取值已经在其单独的规范中给出了完整的定义；在文末的表格中可以找到所有规范的链接。

用法

/* <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-outside>

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

<display-inside>

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

<display-listitem>

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

<display-internal>

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

<display-box>

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

<display-legacy>

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

<display-xul>  已废弃 Gecko 62

只有 Firefox 使用，主要用于 XUL 文档 的样式.

display 的“遗留”取值

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

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

.container {
    display: inline-flex;
}

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

.container {
    display: inline flex;
}

正式语法

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
where 
<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-list-item | inline-table | inline-flex | inline-grid

示例

各类的 display 取值的单独页面上有多个示例——见 用法。也可以看看下面这些文章,它们详细介绍了这些取值的用法.

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

• Block and Inline Layout in Normal Flow
• Flow Layout and Overflow
• Flow Layout and Writing Modes
• Formatting Contexts Explained
• In Flow and Out of Flow

display: flex

• Basic concepts of flexbox
• Aligning Items in a Flex Container
• Controlling Ratios of Flex Items Along the Main Axis
• Cross-browser Flexbox mixins
• Mastering Wrapping of Flex Items
• Ordering Flex Items
• Relationship of flexbox to other layout methods
• Backwards Compatibility of Flexbox
• Typical use cases of Flexbox

display: grid

• Basic Concepts of Grid Layout
• Relationship to other layout methods
• Line-based placement
• Grid template areas
• Layout using named grid lines
• Auto-placement in grid layout
• Box alignment in grid layout
• Grids, logical values and writing modes
• CSS Grid Layout and Accessibility
• CSS Grid Layout and Progressive Enhancement
• Realizing common layouts using grids

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

• CSS 网格布局
• CSS Flexible 布局
• CSS 布局 (初学者学习模块)

可访问性相关

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 会修改其在可访问性树中的表示，这会使得表格不能被屏幕阅读技术正常处理。

• Short note on what CSS display properties do to table semantics — The Paciello Group
• Hidden content for better a11y | Go Make Things
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

规范

浏览器兼容性

此页面上的兼容性表是根据结构化数据生成的。如果您想为数据做出贡献，请查看
https://github.com/mdn/browser-compat-data并向我们发送拉取请求。

参见

• Block and Inline Layout in Normal Flow
• Formatting contexts explained
• visibility, float, position
• grid, flex