display
Baseline 广泛可用 *
display 这个 CSS 属性用于设置元素是否被视为块级或行内盒子以及用于其子元素的布局，例如流式布局、网格或 flex。
从形式上来说，display 属性设置了元素的内部和外部显示类型。外部类型设置了元素在流式布局中的角色；内部类型设置了其子元素的布局。display 的某些值在其各自的规范中有完整的定义；例如，声明 display: flex 时会发生什么的细节，在 CSS 弹性盒子模型规范中被定义。
试一试
display: block;
display: inline-block;
display: none;
display: flex;
display: grid;
<p>
Apply different <code>display</code> values on the dashed orange-bordered
<code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
<div class="example-container">
Some text A.
<div id="example-element">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
Some text B.
</div>
</section>
.example-container {
width: 100%;
height: 100%;
}
code {
background: #88888888;
}
#example-element {
border: 3px dashed orange;
}
.child {
display: inline-block;
padding: 0.5em 1em;
background-color: #ccccff;
border: 1px solid #ababab;
color: black;
}
语法
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* Box suppression */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* 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;
CSS 的 display 属性通过关键字值来指定。
值的组合
关键字值可以分为六个值类别。
外部（Outside）
<display-outside>-
这些关键字指定了元素的外部显示类型，这基本上是它在流式布局中的角色。
备注：当支持多关键字语法的浏览器遇到一个只有外部值的 display 属性时（例如，display: block 或 display: inline），其内部值将被设置为 flow（例如，display: block flow 和 display: inline flow）。
备注：为确保布局能在旧版浏览器上工作，你可以使用单值语法，例如 display: inline flex 可以有以下回退方案：
.container {
display: inline-flex;
display: inline flex;
}
更多信息请参阅使用 CSS display 的多关键字语法。
内部（Inside）
<display-inside>-
这些关键字指定了元素的内部显示类型，这定义了其内容所处的格式化上下文的类型（假设它是一个非替换元素）。当这些关键字中的任何一个作为单个值使用时，元素的外部显示类型默认为
block（ruby除外，它默认为inline）。flow-
元素使用流式布局（块级和行内布局）来排布其内容。
如果其外部显示类型是
inline，并且它参与块级或行内格式化上下文，那么它会生成一个行内盒子。否则，它会生成一个块级盒子。根据其他属性的值（如
position、float或overflow）以及它本身是否参与块级或行内格式化上下文，它要么为其内容建立一个新的块格式化上下文（BFC），要么将其内容整合到其父格式化上下文中。 flow-root-
元素会生成一个块级盒子，并建立一个新的块格式化上下文，定义了格式化根所在的位置。
table-
这些元素的行为类似于 HTML
<table>元素。它定义了一个块级盒子。 flex-
元素的行为类似于一个块级元素，并根据 flexbox 模型来布局其内容。
grid-
元素的行为类似于一个块级元素，并根据网格模型来布局其内容。
ruby-
元素的行为类似于一个行内级元素，并根据 ruby 格式化模型来布局其内容。它的行为类似于相应的 HTML
<ruby>元素。
备注：当支持多关键字语法的浏览器遇到一个只有内部值的 display 属性时（例如，display: flex 或 display: grid），其外部值将被设置为 block（例如，display: block flex 和 display: block grid）。
列表项（List Item）
<display-listitem>-
元素为其内容生成一个块级盒子，并另外生成一个列表项行内盒子。
单个值 list-item 会使元素的行为类似于一个列表项。它可以与 list-style-type 和 list-style-position 一起使用。
list-item 也可以与任何 <display-outside> 关键字以及 flow 或 flow-root <display-inside> 关键字结合使用。
备注：在支持多关键字语法的浏览器中，如果没有指定内部值，它将默认为 flow。如果没有指定外部值，主盒子将具有 block 的外部显示类型。
内部专用（Internal）
<display-internal>-
一些布局模型，如
table和ruby，具有复杂的内部结构，其子元素和后代元素可以扮演多种不同的角色。本节定义了那些“内部专用”的显示值，它们仅在该特定布局模式下有意义。table-row-group-
这些元素的行为类似于
<tbody>HTML 元素。 table-header-group-
这些元素的行为类似于
<thead>HTML 元素。 -
这些元素的行为类似于
<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-
这些元素作为匿名盒子生成。
ruby-text-container-
这些元素的行为类似于
<rtc>HTML 元素。
盒子（Box）
<display-box>-
这些值定义了一个元素是否会生成显示盒子。
contents-
这些元素本身不产生特定的盒子。它们被其伪盒子和子盒子所替换。请注意，CSS Display Level 3 规范定义了
contents值应如何影响“不寻常元素”——即那些不纯粹由 CSS 盒子概念渲染的元素，如替换元素。更多细节请参见附录 B：display: contents 对不寻常元素的影响。 none-
关闭元素的显示，使其对布局没有影响（文档的渲染效果就好像该元素不存在一样）。所有后代元素的显示也会被关闭。如果想让一个元素占据其通常会占用的空间，但实际上不渲染任何东西，请改用
visibility属性。
预设值（Precomposed）
<display-legacy>-
CSS 2 为
display属性使用了一种单关键字、预设的语法，对同一布局模式的块级和行内级变体需要使用不同的关键字。inline-block-
元素会生成一个块级盒子，它会与周围内容一起流动，就好像它是一个单独的行内盒子一样（其行为很像一个替换元素）。
它等同于
inline flow-root。 inline-table-
inline-table值在 HTML 中没有直接的映射。它的行为类似于一个 HTML<table>元素，但它是一个行内盒子，而不是一个块级盒子。在表格盒子内部是一个块级上下文。它等同于
inline table。 inline-flex-
元素的行为类似于一个行内级元素，并根据 flexbox 模型来布局其内容。
它等同于
inline flex。 inline-grid-
元素的行为类似于一个行内级元素，并根据网格模型来布局其内容。
它等同于
inline grid。
你应该使用哪种语法？
CSS display 模块描述了一种多关键字语法，你可以用它来为 display 属性明确定义外部和内部显示类型。为了向后兼容，也支持单关键字值（预设的 <display-legacy> 值）。
例如，你可以使用两个值来指定一个行内 flex 容器，如下所示：
.container {
display: inline flex;
}
这也可以使用旧的单值来指定：
.container {
display: inline-flex;
}
有关这些更改的更多信息，请参阅使用 CSS display 的多关键字语法指南。
描述
display 可以设置的不同类型值的各个页面都包含这些值的多个实例——请参阅语法部分。此外，还可以参阅以下材料，其中深入介绍了 display 的各种值。
多关键字值
CSS 流式布局 (display: block, display: inline)
display: flex
display: grid
display 动画
支持的浏览器使用离散动画类型为 display 设置动画。这通常意味着该属性将在两个值之间动画进行到 50% 时发生切换。
有一个例外情况，即当动画目标是 display: none 或从 display: none 开始时。在这种情况下，浏览器将切换这两个值，以使动画内容在整个动画持续时间内都可见。例如：
- 当
display从none动画到block（或其他可见的display值）时，该值将在动画持续时间的0%处切换到block，使其在整个过程中可见。 - 当
display从block（或其他可见的display值）动画到none时，该值将在动画持续时间的100%处切换到none，使其在整个过程中可见。
这种行为对于创建进入/退出动画非常有用，例如，你想用 display: none 从 DOM 中移除一个容器，但希望它通过 opacity 淡出，而不是立即消失。
当使用 CSS 动画为 display 添加动画时，你需要在显式的关键帧中提供起始的 display 值（例如使用 0% 或 from）。请参阅使用 CSS 动画以获取示例。
当使用 CSS 过渡为 display 添加动画时，还需要两个额外的特性：
@starting-style为你想要在动画元素首次显示时进行过渡的属性提供起始值。这是为了避免意外行为。默认情况下，CSS 过渡不会在元素的首次样式更新或display类型从none变为其他类型时触发。- 需要在
transition-property声明（或transition简写）上设置transition-behavior: allow-discrete，以启用display的过渡。
关于 display 属性过渡的示例，请参阅 @starting-style 和 transition-behavior 页面。
无障碍
display: none
在元素上使用 display 值为 none 将会把它从无障碍树中移除。这将导致该元素及其所有后代元素不再被屏幕阅读技术播报。
如果你想在视觉上隐藏元素，一个更具可访问性的替代方法是使用属性组合，在视觉上将其从屏幕上移除，但仍然让屏幕阅读器等辅助技术可以访问它。
虽然 display: none 会从无障碍树中隐藏内容，但被可见元素的 aria-describedby 或 aria-labelledby 属性引用的隐藏元素仍会暴露给辅助技术。
display: contents
在某些浏览器中，当前的实现会将任何 display 值为 contents 的元素从无障碍树中移除（但其后代会保留）。这将导致该元素本身不再被屏幕阅读技术播报。根据 CSS 规范，这是不正确的行为。
表格
在某些浏览器中，将 <table> 元素的 display 值更改为 block、grid 或 flex 会改变其在无障碍树中的表示方式。这将导致表格不再被屏幕阅读技术正确播报。
正式定义
正式语法
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 值比较
在这个例子中，我们有两个块级容器元素，每个容器都有三个行内子元素。下面有一个下拉菜单，可以让你为容器应用不同的 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>block flow</option>
<option>inline</option>
<option>inline flow</option>
<option>flow</option>
<option>flow-root</option>
<option>block flow-root</option>
<option>table</option>
<option>block table</option>
<option>flex</option>
<option>block flex</option>
<option>grid</option>
<option>block grid</option>
<option>list-item</option>
<option>block flow list-item</option>
<option>inline flow list-item</option>
<option>block flow-root list-item</option>
<option>inline flow-root list-item</option>
<option>contents</option>
<option>none</option>
<option>inline-block</option>
<option>inline flow-root</option>
<option>inline-table</option>
<option>inline table</option>
<option>inline-flex</option>
<option>inline flex</option>
<option>inline-grid</option>
<option>inline grid</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();
结果
请注意，为了说明，添加了一些多关键字值，它们具有以下等效值：
block=block flowinline=inline flowflow=block flowflow-root=block flow-roottable=block tableflex=block flexgrid=block gridlist-item=block flow list-iteminline-block=inline flow-rootinline-table=inline tableinline-flex=inline flexinline-grid=inline grid
你可以在值的组合下的各个 display 类型页面中找到更多示例。
规范
| 规范 |
|---|
| CSS Display Module Level 3 # the-display-properties |
| Scalable Vector Graphics (SVG) 2 # VisibilityControl |
浏览器兼容性
加载中…