<display-box>
Baseline 广泛可用 *
这些关键词定义了一个元素是否生成显示框。
语法
有效的 <display-box> 值
contents-
这些元素本身不生成特定的框。它们被它们的伪框和子框所取代。请注意，CSS Display Level 3 规范定义了
contents值应如何影响“不寻常元素”——不纯粹由 CSS 框概念（例如被替换元素）渲染的元素。有关更多详细信息，请参阅附录 B：display: contents 对不寻常元素的影响。由于浏览器中的一个错误，目前这会将元素从可访问性树中移除——屏幕阅读器将不会查看内部内容。有关更多详细信息，请参阅下面的可访问性部分。
none-
关闭元素的显示，使其对布局没有影响（文档渲染时如同该元素不存在一样）。所有后代元素也都会关闭显示。要使元素占据其通常会占据的空间，但不实际渲染任何内容，请使用
visibility属性代替。
无障碍
目前大多数浏览器中的实现会将任何 display 值为 contents 的元素从可访问性树中移除。这将导致该元素——在某些浏览器版本中，其后代元素——不再被屏幕阅读技术宣布。根据 CSSWG 规范，这是不正确的行为。
正式语法
<display-box> =
contents |
none
示例
在第一个示例中，类名为 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> 具有 2 像素的红色边框和 300 像素的宽度。但是，它还指定了 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;
}
结果
规范
| 规范 |
|---|
| CSS Display Module Level 3 # valdef-display-contents |
浏览器兼容性
加载中…