From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/display-box/index.html | 109 +++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/zh-cn/web/css/display-box/index.html (limited to 'files/zh-cn/web/css/display-box') diff --git a/files/zh-cn/web/css/display-box/index.html b/files/zh-cn/web/css/display-box/index.html new file mode 100644 index 0000000000..51b0cffa39 --- /dev/null +++ b/files/zh-cn/web/css/display-box/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/CSS/display-box +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

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

+ +

语法

+ +

有效的 <display-box> 值:

+ +

contents {{Experimental_Inline}}

+ +
+
这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意CSS 层次3显示规格定义的 contents 值应该怎样影响"非常见元素" - 即不由CSS渲染的元素（诸如被取代元素）。参考 Appendix B: Effects of display: contents on Unusual Elements 以获取细节。
+
+ 由于浏览器中有个bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 Accessibility concerns  章节以获取细节。
+
none
+
关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。
+
要一个元素占据空间（文件中存在），但不渲染，请使用 {{CSSxRef("visibility")}} 属性。
+
+ +

举例

+ +

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

+ +

display: none

+ +

HTML

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

CSS

+ +
p.secret {
+  display: none;
+}
+ +

结果

+ +

{{EmbedLiveSample("Hide_element", "100%", 60)}}

+
+ +
+

display: contents

+ +

在本例中，其外部 {{htmlelement("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;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Display_contents", 300, 60)}}

+
+ +

Accessibility concerns

+ +

目前在大多数浏览器中的实现，是会从删除 accessibility tree 删除 display 属性值为 contents 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 CSSWG specification的行为要求。

+ + + +

浏览器兼容性

+ + + +

Support of contents

+ +

{{Compat("css.properties.display.contents", 10)}}

+ +

其它参考

+ + -- cgit v1.2.3-54-g00ecf