当前位置：文江博客知识库简体中文文档 Web CSS display-box

<display-box> - CSS（层叠样式表）编辑

这些关键词定义一个元素到底是否产生显示盒（display boxes）。

语法

有效的 <display-box> 值:

contents

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

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

举例

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

display: none

HTML

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

CSS

p.secret {
  display: none;
}

结果

display: contents

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

HTML

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

CSS

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

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

结果

Accessibility concerns

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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.