display

CSS display 规定使用的关键字。

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

关键值可以被分组为六个种类。

<display-outside>

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

block

该元素生成一个块级元素盒，在正常的流中，该元素之前和之后产生换行。

inline

该元素生成一个或多个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。

<display-inside> (en-US)

这些关键字规定了元素的内部显示类型，其定义了该内容布局时的格式上下文的类型（假设它是一个非替换元素）：

flow 实验性

该元素使用流式布局（块和内联布局）来排布它的内容。

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

根据其他属性的值（例如 position、float 或 overflow）以及它自身是否参与到块或者内联格式化上下文，它要么为它的内容建立新的块级格式化上下文（BFC），要么将其内容集成到其父元素的格式化上下文中。

flow-root

该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。

table

该元素的行为类似于 HTML 中的 <table> 元素。它定义了一个块级别的盒子。

flex

该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。

grid

该元素的行为类似块级元素并且根据网格模型布局它的内容。

ruby 实验性

该元素的行为类似内联元素并且根据 ruby 格式化模型布局它的内容。它的行为像关联的 HTML 的 <ruby> 元素。

<display-listitem> (en-US)

该元素为内容生成一个块级盒子和一个单独的列表元素内联盒子。

list-item 的单独值将导致元素的行为类似于一个列表元素。其可以与 list-style-type 和 list-style-position 一起使用。

list-item 也可以与任意的 <display-outside> 关键字和 <display-inside> (en-US) 中的 flow 或 flow-root 关键字组合。

<display-internal>

一些布局模型，例如 table 和 ruby 有一个复杂的内置结构，它们的子孙后代可以扮演几个不同的角色。本节定义的这些“内部”display 值，仅在特定的布局模式下有用。

table-row-group

该元素的行为类似于 HTML 的 <tbody> 元素。

table-header-group

该元素的行为类似于 HTML 的 <thead> 元素。

table-footer-group

该元素的行为类似于 HTML 的 <tfoot> 元素。

table-row

该元素的行为类似于 HTML 的 <tr> 元素。

table-cell

该元素的行为类似于 HTML 的 <td> 元素。

table-column-group

该元素的行为类似于 HTML 的 <colgroup> 元素。

table-column

该元素的行为类似于 HTML <col> 元素。

table-caption

该元素的行为类似于 HTML 的 <caption> 元素。

ruby-base 实验性

该元素的行为类似于 HTML 的 <rb> 元素。

ruby-text 实验性

该元素的行为类似于 HTML 的 <rt> 元素。

ruby-base-container 实验性

该元素是作为匿名盒子生成的。

ruby-text-container 实验性

该元素的行为类似于 HTML 的 <rtc> 元素。

<display-box>

这些关键词定义一个元素到底是否产生 display 盒。

contents

这些元素自身不会产生特定的盒子。它们被伪盒子（pseudo-box）和子盒子取代。请注意，CSS Display Level 3 规范中定义了 contents 值如何影响“异常元素”——这些元素不是纯粹由 CSS 盒模型概念呈现的（例如替换元素）。更多的细节请参见附录 B：display 的影响：异常元素的内容。

由于浏览器的一个错误，该元素目前不会被添加到无障碍树中——屏幕阅读器将不会看到里面的内容。更多细节，参见下面的无障碍问题。

none

使元素不再显示，其对布局不会有影响（文档渲染得好像这个元素并不存在）。所有的后代元素也不会再显示。为了使元素占据一个它通常占据的空间，但实际上没有渲染任何东西，应该使用 visibility 属性。

<display-legacy>

CSS 2 为 display 属性使用单关键字的预组合的语法，对相同布局模式的块级和内联级变体需要单独的关键字。

inline-block

该元素生成块级元素盒，如果它是一个单独的内联盒，它将盒周围的内容一起流动（行为类似于替换元素）。

它等同于 inline flow-root。

inline-table

inline-table 值在 HTML 中没有直接的映射。它行为类似于 HTML 的 <table> 元素，但实际是一个内联盒，而不是一个块级盒子。table 盒内部是一个块级上下文。

它等同于 inline table。

inline-flex

元素的行为类似于内联元素并且它的内容根据弹性盒模型布局。

它等同于 inline flex。

inline-grid

元素的行为类似于内联元素并且它的内容根据网格盒模型布局。

它等同于 inline grid。

Level 3 规范中详细描述了 display 的双值属性——明确地启用外部和内部显示类型的规范——但浏览器尚未很好地支持这一点。

预组合 <display-legacy> 方法允许单关键字产生相同的结果，并且直到双关键值语法有着更好的支持之前，它应该被开发人员青睐。例如，你可以按以下方式使用双值语法指定一个内联的弹性容器：

.container {
  display: inline flex;
}

目前可以使用单个值来指定。

.container {
  display: inline-flex;
}

有关规范中的这些更改的更多信息，请参考这篇文章适应 display 的新的双值语法 (en-US).

display 为不同类型的值设置了单独的页面，其中包含这些值的多个示例——请参阅语法部分。此外，请参阅以下资料，其中深度展示了 display 的各种值。

• 适应 display 的新双值语法 (en-US)

• 常规流中的块和内联布局
• 流布局和溢出
• 流布局和书写模式
• 格式化上下文简介
• 流式布局以及如何脱离流式布局

• 弹性盒基础概念
• 对齐弹性容器中的弹性项目
• 控制 Flex 子元素在主轴上的比例
• 跨浏览器弹性盒的混合
• 掌握弹性物件的包装
• 弹性元素排序
• 弹性盒子与其他布局方法的联系
• 弹性盒的向后兼容
• 弹性盒的典型用例

• 网格布局的基本概念
• 网格布局和其他布局方法的联系
• 基于线的定位
• 网格模板区域
• 使用命名线布局
• 网格布局中的自动定位
• 网格布局中的盒模型对齐
• 网格、逻辑值和书写模式
• CSS 网格布局和无障碍
• CSS 网格布局和渐进增强
• 利用网格布局实现常用布局

在一个元素中使用 display 的值为 none 将会从无障碍树中移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。

如果你想要从视觉上隐藏元素，一个更好的替代方案是使用属性的组合将其直观地从屏幕删除，但是通过屏幕阅读器等辅助技术依然可以解析。

当前在大多数浏览器的实现是将任意 display 值为 contents 的元素从无障碍树中移除（但是保留后代元素）。这将导致该元素自身不再通过屏幕阅读器技术展示。根据 CSS 规范，这是错误的行为。

• 更多带有 display: contents 的无障碍标记 | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

将 <table> 元素的 display 值改为 block、grid 或 flex，这将改变它在无障碍树中的显示。这将导致表格不再通过屏幕阅读（screen reading）技术展示。

• 关于 CSS display 属性对表格语义的影响的简短说明——The Paciello Group
• 隐藏内容以获得更好的无障碍 | Go Make Things
• MDN Understanding WCAG，标准 1.3 解释 (en-US)
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

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

<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 值应用于容器，允许你去比较和对比不同的值如何影响元素及其他们子元素的布局。

我们在容器上以及它们的子元素中使用了 padding 和 background-color，以便更容易看到 display 值的影响。

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>

CSS

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

JavaScript

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

结果

• 常规流中的块和内联布局
• 介绍格式化上下文
• visibility、float、position
• grid、flex