Visibility 屬性指定元素是可見還是隱藏。
您可以使用該visibility屬性來指定元素是否可見。此屬性可以采用下表中列出的以下值之一：
| 值 | 描述 |
|---|---|
| visible | 默認(rèn)值。該框及其內(nèi)容是可見的。 |
| hidden | 該框及其內(nèi)容是不可見的，但仍會影響頁面的布局。 |
| collapse | 該值導(dǎo)致整個(gè)行或列從顯示中刪除。此值用于行，行組，列和列組元素。 |
| inherit | 指定可見性屬性的值應(yīng)從父元素繼承，即采用與其父元素相同的可見性值。 |
visibility: collapse;但是，樣式規(guī)則會刪除內(nèi)部表格元素，但不會以任何其他方式影響表格的布局。表元素通常占用的空間將由隨后的同級填充。
注意：如果visibility: collapse;為其他元素（而不是表元素）指定了樣式規(guī)則，則其行為與相同hidden。
CSS display 與 visibility屬性看起來似乎是一回事，但實(shí)際上它們是完全不同的，并且常常使Web開發(fā)的新特性感到困惑。
visibility: hidden;隱藏元素，但是它仍然占用布局中的空間。如果隱藏框的子元素的可見性設(shè)置為“可見”，則它們將是可見的。
display: none;關(guān)閉顯示并從文檔中完全刪除該元素。即使它的HTML仍在源代碼中，它也不占用任何空間。即使所有子元素的顯示屬性均設(shè)置為none，也將關(guān)閉其顯示。
Visibility 屬性共有四個(gè)可用的值（visible、hidden、collapse 和 inherit），但常用的值是 visible 和 hidden。
visibility: visible /* 元素可見，默認(rèn)值 */ visibility: hidden /* 元素不可見，但仍然為其保留相應(yīng)的空間 */ visibility: collapse /* 只對 table 對象起作用，能移除行或列但不會影響表格的布局。如果這個(gè)值用在 table 以外的對象上則表現(xiàn)為 hidden 。 */ visibility: inherit /* 繼承上級元素的 visibility 值。 */
Display 屬性的可用值有很多，但在這里我們只關(guān)注其中的幾個(gè)值：block、none 和 inline
display: none /* 元素不可見，并且不為其保留相應(yīng)的位置 */ display: block /* 表現(xiàn)為一個(gè)塊級元素（一般情況下獨(dú)占一行） */ display: inline /* 表現(xiàn)為一個(gè)行級元素（一般情況下不獨(dú)占一行） */
以上可以看出，雖然 Visibility 和 Display 屬性都可以隱藏一個(gè)元素，但它們之間的不同點(diǎn)在于visibility: hidden 在隱藏一個(gè)元素的同時(shí)仍然在頁面上為該元素保留所需的空間，而 display: none 則表現(xiàn)得像把元素從頁面里刪除了，在頁面上看不出該元素還存在著。
另外，display: block 和 display: inline 的區(qū)別在于 block 元素會在頁面中獨(dú)占一行，而 inline 元素不會，有的對象默認(rèn)為 block 元素，而有的對象則默認(rèn)為 inline 元素，大家在使用時(shí)需要注意防止相同屬性的重復(fù)定義。
Visibility 和 Display 屬性雖然都可以達(dá)到隱藏頁面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。
如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應(yīng)該使用 visibility: hidden 。如果你想在隱藏某元素的同時(shí)讓其它內(nèi)容填充空白的話應(yīng)該使用 display: none 。