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。

less 复制代码

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

Display 属性的用法

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

arduino 复制代码

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 。

引用

菜鸟教程