CSS Visibility(可见性)

Visibility 属性指定元素是可见还是隐藏。

指定元素的可见性

您可以使用该visibility属性来指定元素是否可见。此属性可以采用下表中列出的以下值之一:

描述
visible默认值。该框及其内容是可见的。
hidden该框及其内容是不可见的,但仍会影响页面的布局。
collapse该值导致整个行或列从显示中删除。此值用于行,行组,列和列组元素。
inherit指定可见性属性的值应从父元素继承,即采用与其父元素相同的可见性值。

visibility: collapse;但是,样式规则会删除内部表格元素,但不会以任何其他方式影响表格的布局。表元素通常占用的空间将由随后的同级填充。

注意:如果visibility: collapse;为其他元素(而不是表元素)指定了样式规则,则其行为与相同hidden。

CSS Visibility vs Display

CSS display 与 visibility属性看起来似乎是一回事,但实际上它们是完全不同的,并且常常使Web开发的新特性感到困惑。

  • visibility: hidden;隐藏元素,但是它仍然占用布局中的空间。如果隐藏框的子元素的可见性设置为“可见”,则它们将是可见的。

  • display: none;关闭显示并从文档中完全删除该元素。即使它的HTML仍在源代码中,它也不占用任何空间。即使所有子元素的显示属性均设置为none,也将关闭其显示。


Visibility 属性的用法

Visibility 属性共有四个可用的值(visible、hidden、collapse 和 inherit),但常用的值是 visible 和 hidden。

visibility: visible
/* 元素可见,默认值 */
visibility: hidden
/* 元素不可见,但仍然为其保留相应的空间 */
visibility: collapse
/* 只对 table 对象起作用,能移除行或列但不会影响表格的布局。如果这个值用在 table 以外的对象上则表现为 hidden 。 */
visibility: inherit
/* 继承上级元素的 visibility 值。 */

Display 属性的用法

Display 属性的可用值有很多,但在这里我们只关注其中的几个值:block、none 和 inline

display: none
/* 元素不可见,并且不为其保留相应的位置 */
display: block
/* 表现为一个块级元素(一般情况下独占一行) */
display: inline
/* 表现为一个行级元素(一般情况下不独占一行) */

以上可以看出,虽然 Visibility 和 Display 属性都可以隐藏一个元素,但它们之间的不同点在于visibility: hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,而 display: none 则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。
另外,display: block 和 display: inline 的区别在于 block 元素会在页面中独占一行,而 inline 元素不会,有的对象默认为 block 元素,而有的对象则默认为 inline 元素,大家在使用时需要注意防止相同属性的重复定义。

何时使用 Visibility 或 Display 属性

Visibility 和 Display 属性虽然都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用 visibility: hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display: none 。