<display-box>

这些关键词定义一个元素到底是否产生显示盒(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)删除元素,屏幕阅读者会看不到里面内容。参考下方无障碍考虑部分以获取细节。

none

关闭元素的显示,不影响布局(文件中没有该元素)。所有子项的显示也被关闭。

要一个元素占据空间(文件中存在),但不渲染,请使用 visibility 属性。

示例

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

display: none

HTML

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

CSS

css
p.secret {
  display: none;
}

结果

display: contents

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

HTML

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

CSS

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

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

结果

无障碍考虑

目前在大多数浏览器中的实现,是会从无障碍树中删除 display 属性值为 contents 的元素。这会引起该元素(在部分浏览器版本中)和其子项不读出来。这不符合 CSSWG 规范的行为要求。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contents
Specific behavior of unusual elements when display: contents is applied to them
Elements with display: contents are focusable
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见