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 。

總結

以上是生活随笔為你收集整理的html隐藏visibility,CSS Visibility(可见性)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。