---
title: <display-box>
slug: Web/CSS/display-box
translation_of: Web/CSS/display-box
---
<div>{{CSSRef}}</div>

<p class="summary">这些关键词定义一个元素到底是否产生显示盒（display boxes）。</p>

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

<p>有效的 <code>&lt;display-box&gt;</code> 值:</p>

<p><code style="font-style: normal; font-weight: 700; font-size: 1rem; letter-spacing: -0.00278rem;">contents</code><strong style="font-size: 1rem; font-weight: 700; letter-spacing: -0.00278rem;"> {{Experimental_Inline}}</strong></p>

<dl>
 <dd>这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意CSS 层次3显示规格定义的 <code>contents</code> 值应该怎样影响"非常见元素" - 即不由CSS渲染的元素（诸如被取代元素）。参考 <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> 以获取细节。<br>
 <br>
 <em>由于浏览器中有个bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 <a href="#Accessibility_concerns">Accessibility concerns</a>  章节以获取细节。</em></dd>
 <dt><code>none</code></dt>
 <dd>关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。</dd>
 <dd>要一个元素占据空间（文件中存在），但不渲染，请使用 {{CSSxRef("visibility")}} 属性。</dd>
</dl>

<h2 id="举例">举例</h2>

<p>在第一个例子中，带有secret类的段落，会被设置成 <code>display: none</code>; 该盒子和内容不会渲染。</p>

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

<h4 id="HTML">HTML</h4>

<div id="Hide_element">
<pre class="brush: html">&lt;p&gt;Visible text&lt;/p&gt;
&lt;p class="secret"&gt;Invisible text&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">p.secret {
  display: none;
}</pre>

<h4 id="结果">结果</h4>

<p>{{EmbedLiveSample("Hide_element", "100%", 60)}}</p>
</div>

<div id="Display_contents">
<h3 id="display_contents">display: contents</h3>

<p>在本例中，其外部 {{htmlelement("div")}} 有一个 2px 红色边框 和300px的宽度。然而，它有 <code>display: contents</code> 因而指定这个 <code>&lt;div&gt;</code> 不会渲染，边框和宽度都没有，其子元素会显示。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div class="outer"&gt;
  &lt;div&gt;Inner div.&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer &gt; div {
  border: 1px solid green;
}
</pre>

<h4 id="结果_2">结果</h4>

<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
</div>

<h2 id="Accessibility_concerns">Accessibility concerns</h2>

<p>目前在大多数浏览器中的实现，是会从删除 <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> 删除 <code>display</code> 属性值为 <code>contents</code> 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 <a href="https://drafts.csswg.org/css-display/#the-display-properties">CSSWG specification</a>的行为要求。</p>

<ul>
 <li><a class="external" 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" 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>

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

<h3 id="Support_of_contents">Support of <code>contents</code></h3>

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

<h2 id="其它参考">其它参考</h2>

<ul>
 <li>{{CSSxRef("display")}}
  <ul>
   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
  </ul>
 </li>
 <li><a 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>
 <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
</ul>