blob: 03dc3fcb3ee30b8795b6067e72f916836a019604 (
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
|
---
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>
|
