此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<display-box>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
这些关键词定义一个元素到底是否产生显示盒(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
<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;
}
结果
无障碍考虑
目前在大多数浏览器中的实现,是会从无障碍树中删除 display 属性值为 contents 的元素。这会引起该元素(在部分浏览器版本中)和其子项不读出来。这不符合 CSSWG 规范的行为要求。
浏览器兼容性
Loading...