display

**display** CSS 属性设置元素是否被视为块级或内联盒子，以及用于其子元素的布局，例如流布局、网格或Flex。

正式地，**display** 属性设置元素的内部和外部 *显示类型*。外部类型设置元素在流布局中的参与方式；内部类型设置子元素的布局。display 的某些值在其各自的规范中完全定义；例如，声明 display: flex 时发生的情况的详细信息在 CSS Flexible Box Model 规范中定义。

试一试

语法

css
/* 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;

/* 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 属性使用关键字值指定。

分组值

关键字值可以分为六个值类别。

外部

<display-outside>

这些关键字指定元素的外部显示类型，这基本上是其在流布局中的作用。

block

该元素生成一个块级盒子，在正常流中，在元素前后都生成换行符。

inline

该元素生成一个或多个内联盒子，这些盒子在其前后不生成换行符。在正常流中，如果存在空间，则下一个元素将在同一行上。

注意：当支持多关键字语法的浏览器遇到仅具有 **外部** 值的 display 属性（例如，display: block 或 display: inline）时，内部值将设置为 flow（例如，display: block flow 和 display: inline flow）。

注意：为了确保布局在旧版浏览器上正常工作，您可以使用单值语法，例如 display: inline flex 可以具有以下回退

css
.container {
  display: inline-flex;
  display: inline flex;
}

有关更多信息，请参阅使用 CSS display 的多关键字语法。

内部

<display-inside>

这些关键字指定元素的内部显示类型，它定义其内容在其内布局的格式化上下文类型（假设它是非替换元素）。

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）。

列表项

<display-listitem>

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

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

list-item 还可以与任何 <display-outside> 关键字以及 flow 或 flow-root <display-inside> 关键字组合使用。

注意：在支持多关键字语法的浏览器中，如果未指定内部值，则默认为 flow。如果未指定外部值，则主框将具有 block 的外部显示类型。

内部

<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 元素。

框

<display-box>

这些值定义元素是否生成显示框。

contents

这些元素本身不会生成特定的框。它们被其伪框及其子框替换。请注意，CSS Display Level 3 规范定义了 contents 值如何影响“不寻常的元素”——那些并非纯粹由 CSS 框概念（如替换元素）渲染的元素。有关更多详细信息，请参阅附录 B：display: contents 对不寻常元素的影响。

none

关闭元素的显示，使其对布局没有影响（文档的渲染就像该元素不存在一样）。所有后代元素的显示也将被关闭。要使元素占用它通常会占用的空间，但实际上不渲染任何内容，请改用visibility 属性。

预组合

<display-legacy>

CSS 2 使用了 display 属性的单关键字预组合语法，需要分别使用关键字来表示同一布局模式的块级和内联级变体。

inline-block

该元素生成一个块级框，该框将像单个内联框一样与周围内容一起流动（行为类似于替换元素）。

它等效于 inline flow-root。

inline-table

inline-table 值在 HTML 中没有直接映射。它的行为类似于 HTML <table> 元素，但作为内联框，而不是块级框。表格框内是块级上下文。

它等效于 inline table。

inline-flex

该元素的行为类似于内联级元素，并根据弹性盒模型布局其内容。

它等效于 inline flex。

inline-grid

该元素的行为类似于内联级元素，并根据网格模型布局其内容。

它等效于 inline grid。

您应该使用哪种语法？

CSS display 模块 描述了您可以与 display 属性一起使用的值的多个关键字语法，以显式定义外部和内部显示。为了向后兼容，支持单关键字值（预组合的 <display-legacy> 值）。

例如，使用两个值，您可以如下指定内联弹性容器

css
.container {
  display: inline flex;
}

这也可以使用旧版单值指定

css
.container {
  display: inline-flex;
}

有关这些更改的更多信息，请参阅使用 CSS display 的多关键字语法 指南。

全局

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

描述

display 可以设置的不同类型值的各个页面都提供了这些值在实际应用中的多个示例——请参阅语法 部分。此外，请参阅以下资料，其中深入介绍了 display 的各种值。

多关键字值

CSS 流布局（display: block，display: inline）

display: flex

display: grid

动画显示

支持的浏览器 使用离散动画类型 对 display 进行动画处理。这通常意味着属性将在动画在两者之间进行时 50% 时在两个值之间切换。

有一个例外，即在对 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-behavior: allow-discrete 需要在transition-property 声明（或transition 简写）上设置，以启用 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 将会改变其在可访问性树 中的表示形式。这将导致表格不再被屏幕阅读器技术正确宣布。

正式定义

初始值inline
应用于所有元素
继承否
计算值作为指定的值，但定位和浮动元素以及根元素除外。在这两种情况下，计算值可能都是除指定关键字以外的其他关键字。
动画类型离散行为，除非动画到或从 none，否则在整个持续时间内可见

正式语法

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

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>inline flow-root</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>inline grid</option>
    <option>table</option>
    <option>block table</option>
    <option>list-item</option>
  </select>
</div>

CSS

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

js
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();

结果

请注意，出于说明目的添加了一些多关键字值，它们具有以下等效项

  • inline-block = inline flow-root
  • inline-flex = inline flex
  • inline-grid = inline grid
  • table = block table

您可以在分组值 下每个单独显示数据类型的页面中找到更多示例

规范

规范

CSS 显示模块 Level 3
# 显示属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅