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 和 inlinedisplay: 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 。