CSS 可見性

Created: October-16, 2018

visibility 屬性確定元素是可見還是隱藏。

控制元素的可見性

你可以使用 visibility 屬性來控制元素是否可見。此屬性可以採用下表中列出的以下值之一：

值	描述
`visible`	預設值。框和其內容是可見的。
`hidden`	框及其內容不可見，但仍會影響頁面的佈局。
`collapse`	此值會導致整個行或列從顯示中刪除。此值用於行，行組，列和列組元素。
`inherit`	指定可見性屬性的值應從父元素繼承，即獲取與其父元素相同的可見性值。

但是樣式規則 visibility: collapse; 會刪除內部表元素，但它不會以任何其他方式影響表的佈局。通常由表格元素佔據的空間將由隨後的兄弟姐妹填充。

注意： 如果 visibility: collapse; 為其他元素而不是表元素指定了樣式規則，則會導致與 hidden 相同的行為。

CSS 的顯示和可見性屬性看起來是一樣的，但它們實際上是完全不同的，並且經常使那些新的網頁開發人員混淆。

visibility: hidden; 隱藏元素，但它仍佔用佈局中的空間。如果隱藏框的可見性設定為可見，則它們的子元素將可見。
display: none; 關閉顯示並從文件中完全刪除元素。它不佔用任何空間，即使它的 HTML 仍然在原始碼中。所有子元素的顯示都關閉，即使它們的 display 屬性設定為非 none 的值。