blob: 51b0cffa397df293043db006594b34f25d0f7b5e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: <display-box>
slug: Web/CSS/display-box
translation_of: Web/CSS/display-box
---
<div>{{CSSRef}}</div>
<p class="summary">这些关键词定义一个元素到底是否产生显示盒（display boxes）。</p>
<h2 id="语法">语法</h2>
<p>有效的 <code><display-box></code> 值:</p>
<p><code style="font-style: normal; font-weight: 700; font-size: 1rem; letter-spacing: -0.00278rem;">contents</code><strong style="font-size: 1rem; font-weight: 700; letter-spacing: -0.00278rem;"> {{Experimental_Inline}}</strong></p>
<dl>
<dd>这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意CSS 层次3显示规格定义的 <code>contents</code> 值应该怎样影响"非常见元素" - 即不由CSS渲染的元素（诸如被取代元素）。参考 <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> 以获取细节。<br>
<br>
<em>由于浏览器中有个bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 <a href="#Accessibility_concerns">Accessibility concerns</a> 章节以获取细节。</em></dd>
<dt><code>none</code></dt>
<dd>关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。</dd>
<dd>要一个元素占据空间（文件中存在），但不渲染，请使用 {{CSSxRef("visibility")}} 属性。</dd>
</dl>
<h2 id="举例">举例</h2>
<p>在第一个例子中，带有secret类的段落，会被设置成 <code>display: none</code>; 该盒子和内容不会渲染。</p>
<h3 id="display_none">display: none</h3>
<h4 id="HTML">HTML</h4>
<div id="Hide_element">
<pre class="brush: html"><p>Visible text</p>
<p class="secret">Invisible text</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">p.secret {
display: none;
}</pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample("Hide_element", "100%", 60)}}</p>
</div>
<div id="Display_contents">
<h3 id="display_contents">display: contents</h3>
<p>在本例中，其外部 {{htmlelement("div")}} 有一个 2px 红色边框 和300px的宽度。然而，它有 <code>display: contents</code> 因而指定这个 <code><div></code> 不会渲染，边框和宽度都没有，其子元素会显示。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div class="outer">
<div>Inner div.</div>
</div>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.outer {
border: 2px solid red;
width: 300px;
display: contents;
}
.outer > div {
border: 1px solid green;
}
</pre>
<h4 id="结果_2">结果</h4>
<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
</div>
<h2 id="Accessibility_concerns">Accessibility concerns</h2>
<p>目前在大多数浏览器中的实现，是会从删除 <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> 删除 <code>display</code> 属性值为 <code>contents</code> 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 <a href="https://drafts.csswg.org/css-display/#the-display-properties">CSSWG specification</a>的行为要求。</p>
<ul>
<li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
<li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
</ul>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<h3 id="Support_of_contents">Support of <code>contents</code></h3>
<p>{{Compat("css.properties.display.contents", 10)}}</p>
<h2 id="其它参考">其它参考</h2>
<ul>
<li>{{CSSxRef("display")}}
<ul>
<li>{{CSSxRef("<display-outside>")}}</li>
<li>{{CSSxRef("<display-inside>")}}</li>
<li>{{CSSxRef("<display-listitem>")}}</li>
<li>{{CSSxRef("<display-internal>")}}</li>
<li>{{CSSxRef("<display-legacy>")}}</li>
</ul>
</li>
<li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
<li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
</ul>
|
