<display-box>

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

语法

有效的 <display-box> 值:

contents  这是一个实验性的 API,请尽量不要在生产环境中使用它。

这些元素自己不显示。它们被它们的伪盒(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的行为要求。

浏览器兼容性

Support of contents

BCD tables only load in the browser

其它参考