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 。