<display-box>

这些关键字定义元素是否生成显示框。

语法

有效的 <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;
}

Result

display: contents

在这个示例中，外部的 <div> 具有 2 像素的红色边框和 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;
}

Result

规范

未找到规范

未找到 css.properties.display.contents 的规范数据。
检查此页面是否有问题或将缺少的 spec_url 贡献到 mdn/browser-compat-data。还要确保规范已包含在 w3c/浏览器规范.

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。