语法

有效的 <display-box> 值:

contents {{Experimental_Inline}}

这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意CSS 层次3显示规格定义的 contents 值应该怎样影响"非常见元素" - 即不由CSS渲染的元素（诸如被取代元素）。参考 Appendix B: Effects of display: contents on Unusual Elements 以获取细节。

由于浏览器中有个bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 Accessibility concerns 章节以获取细节。
none: 关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。; 要一个元素占据空间（文件中存在），但不渲染，请使用 {{CSSxRef("visibility")}} 属性。

举例

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

<p>Visible text</p>
<p class="secret">Invisible text</p>

p.secret {
  display: none;
}

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

<div class="outer">
  <div>Inner div.</div>
</div>

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

目前在大多数浏览器中的实现，是会从删除 accessibility tree 删除 display 属性值为 contents 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 CSSWG specification的行为要求。