---
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>