path: root/files/zh-cn/web/css/display/index.html

---
title: display
slug: Web/CSS/display
tags:
  - CSS
translation_of: Web/CSS/display
---
<div>{{CSSRef}}
<p><strong><code>display</code></strong> 属性可以设置元素的内部和外部显示类型 <em>display types</em>。元素的外部显示类型 <em>outer display types</em> 将决定该元素在<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">流式布局</a>中的表现（<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">块级或内联元素</a>）；元素的内部显示类型 <em>inner display types</em> 可以控制其子元素的布局（例如：<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>，<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">grid</a> 或 <a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">flex</a>）。</p>
</div>

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

<h2 id="语法">语法</h2>

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

<pre class="brush: css notranslate">.container {
  display:  [ &lt;display-outside&gt; | &lt;display-inside&gt; ] | &lt;display-listitem&gt; | &lt;display-internal&gt; | &lt;display-box&gt; | &lt;display-legacy&gt; ;
}
</pre>

<h3 id="Outside">Outside</h3>

<dl>
 <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
 <dd>这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）。</dd>
 <dd>{{page("/zh-CN/docs/Web/CSS/display-outside", "Syntax")}}</dd>
 <dt>
 <h3 id="Inside">Inside</h3>
 </dt>
 <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
 <dd>这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式（假定该元素为非替换元素 non-replaced element）。</dd>
 <dd>{{page("/zh-CN/docs/Web/CSS/display-inside", "Syntax")}}</dd>
 <dt>
 <h3 id="List_Item">List Item</h3>
 </dt>
 <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
 <dd>将这个元素的外部显示类型变为 block 盒，并将内部显示类型变为多个 list-item inline 盒。</dd>
 <dd>{{page("/zh-CN/docs/Web/CSS/display-listitem", "Syntax")}}</dd>
 <dt>
 <h3 id="Internal">Internal</h3>
 </dt>
 <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
 <dd>有些布局模型（如 <code><span class="css">table</span></code> 和 <code>ruby</code>）有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。</dd>
 <dd>{{page("/en-US/docs/Web/CSS/display-internal", "Syntax")}}</dd>
 <dt>
 <h3 id="Box">Box</h3>
 </dt>
 <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
 <dd>这些值决定元素是否使用盒模型。</dd>
 <dd>{{page("/en-US/docs/Web/CSS/display-box", "Syntax")}}</dd>
 <dt>
 <h3 id="Legacy">Legacy</h3>
 </dt>
 <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
 <dd>CSS 2 对于 <strong><code>display</code></strong> 属性使用单关键字语法，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。</dd>
 <dd>{{page("/en-US /docs/Web/CSS/display-legacy", "Syntax")}}</dd>
</dl>

<h3 id="是否该继续使用_Legacy_取值？">是否该继续使用 Legacy 取值？</h3>

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

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

<pre class="brush: css notranslate">.container {
    display: inline-flex;
}</pre>

<p>也可以用两个关键字来指定。</p>

<pre class="brush: css notranslate">.container {
    display: inline flex;
}
</pre>

<p>有关规范变更的更多信息，查阅文章 <a href="/zh-CN/docs/Web/CSS/display/two-value_syntax_of_display">Adapting to the new two-value syntax of display</a>。</p>

<h3 id="全局设置">全局设置</h3>

<pre class="brush:css notranslate">/* Global values */
display: inherit;
display: initial;
display: unset;</pre>

<h2 id="指南和示例">指南和示例</h2>

<p>上面 {{anch("语法")}} 部分提供了 <strong><code>display</code></strong> 取值的多个示例。下面的资料将详细介绍 <strong><code>display</code></strong> 的各个取值。</p>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/display/two-value_syntax_of_display">接受 display 新的二值语法</a></li>
</ul>

<h3 id="CSS_Flow_Layout_display_block_display_inline">CSS Flow Layout (<code>display: block</code>, <code>display: inline</code>)</h3>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">块级和内联元素在正常流中的布局</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">流布局和溢出</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">流布局和书写方法</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">流内和流外</a></li>
</ul>

<h3 id="display_flex"><code>display: flex</code></h3>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">弹性盒模型的基本概念</a></li>
 <li>在弹性容器中对齐项目</li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items Along the Main Axis</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></li>
</ul>

<h3 id="display_grid"><code>display: grid</code></h3>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
</ul>

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

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS 网格布局</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible 布局</a></li>
 <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a> (初学者学习模块)</li>
</ul>

<h2 id="可访问性相关">可访问性相关</h2>

<h3 id="display_none"><code>display: none;</code></h3>

<p>将 <code>display</code> 设置为 <code>none</code> 会将元素从 <a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">可访问性树 <em>accessibility tree</em></a> 中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术 <em>screen reading technology </em>访问。</p>

<p>如果你只是想从视觉上隐藏这个元素，对可访问性更加友好的做法是使用 <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">属性组合</a> 来将其从屏幕上隐藏，但仍可以被屏幕阅读器 <em>screen readers</em>  等辅助技术解析。</p>

<h3 id="display_contents"><code>display: contents;</code></h3>

<p>当前大多数浏览器对 <code>display: contents;</code> 的实现是：将设置了该值的元素从 <a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">可访问性树 <em>accessibility tree</em></a> 中移除，但保留其子代元素。这会导致该元素自身不再被屏幕阅读技术 <em>screen reading technology</em>  访问。这在 <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS 规范</a> 中被视为不正确的行为。</p>

<ul>
 <li><a class="external external-icon" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
 <li><a class="external external-icon" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
</ul>

<h3 id="Tables">Tables</h3>

<p>将 {{HTMLElement("table")}} 元素的 <code>display</code> 值修改为 <code>block</code>, <code>grid</code>, 或 <code>flex</code> 会修改其在 <a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">可访问性树 <em>accessibility tree</em></a> 中的表现，这会使得 table 元素不能被屏幕阅读技术正常处理。</p>

<ul>
 <li><a class="external external-icon" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
 <li><a class="external external-icon" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
 <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
 <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Specifications" name="Specifications">规范</h2>

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

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("css.properties.display", 10)}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and inline layout in normal flow</a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">Introduction to formatting contexts</a></li>
 <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
 <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
</ul>