From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/css/visibility/index.html | 75 +++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 files/zh-cn/web/css/visibility/index.html

(limited to 'files/zh-cn/web/css/visibility/index.html')

diff --git a/files/zh-cn/web/css/visibility/index.html b/files/zh-cn/web/css/visibility/index.html
new file mode 100644
index 0000000000..03dc3fcb3e
--- /dev/null
+++ b/files/zh-cn/web/css/visibility/index.html
@@ -0,0 +1,75 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS_参考
+translation_of: Web/CSS/visibility
+---
+<p>{{CSSRef()}}</p>
+
+<p>CSS属性 <code>visibility </code>显示或隐藏元素而不更改文档的布局。该属性还可以隐藏{{HTMLElement("table")}}中的行或列。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+<h3 id="语法" name="语法">语法</h3>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Global values */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<h3 id=".E5.8F.96.E5.80.BC" name=".E5.8F.96.E5.80.BC">取值</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>元素正常显示。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 <code>visibility: visible</code>，则该子元素依然可见。</dd>
+ <dt><code>collapse</code></dt>
+ <dd>
+   <ul>
+    <li>用于 {{HTMLElement("table")}} 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 <code>{{ Cssxref("display") }}: none</code> 用于表格的行/列上的效果相
+    当）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。</li>
+    <li>折叠的弹性项目被隐藏，他们将占用的空间被删除。</li>
+    <li>对于 <a href="/zh-CN/docs/Mozilla/Tech/XUL">XUL</a> 元素，元素的计算大小始终为零，而且通常会忽略影响大小的其他样式，尽管边距仍然有效。</li>
+    <li>对于其他元素，折叠处理与隐藏相同。</li>
+  </ul>
+ </dd>
+</dl>
+
+<h3 id=".E7.A4.BA.E4.BE.8B" name=".E7.A4.BA.E4.BE.8B">示例</h3>
+
+<p><a href="https://codepen.io/linkontoask/pen/qMMJOa">CodePen</a></p>
+
+<pre class="eval">p        { visibility: hidden; }   /* 隐藏段落                       */
+p.showme { visibility: visible; }  /* 只有 class 设为 showme 的才会显示*/
+tr.col   { visibility: collapse; } /* 折叠 class 设为 col 的行        */
+</pre>
+
+<h3 id=".E6.B3.A8.E9.87.8A" name=".E6.B3.A8.E9.87.8A">注释</h3>
+
+<p>有些现代浏览器对 <code>visibility: collapse</code> 不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 <code>visibility: hidden</code> 的效果。</p>
+
+<p><code>visibility:collapse</code> 会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定 <code>visibility: visible</code> 。</p>
+
+<h3 id=".E8.A7.84.E8.8C.83" name=".E8.A7.84.E8.8C.83">规范</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1</a></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<h3 id=".E5.8F.82.E8.A7.81" name=".E5.8F.82.E8.A7.81">参见</h3>
+
+<p>{{ Cssxref("display") }}</p>
+
+<p>{{ languages( { "en": "en/CSS/visibility", "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu" } ) }}</p>
-- 
cgit v1.2.3-54-g00ecf