initial commit

1 files changed, 109 insertions, 0 deletions

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: <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>&lt;display-box&gt;</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">&lt;p&gt;Visible text&lt;/p&gt;
+&lt;p class="secret"&gt;Invisible text&lt;/p&gt;</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>&lt;div&gt;</code> 不会渲染，边框和宽度都没有，其子元素会显示。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div&gt;Inner div.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer &gt; 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("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</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>