CSS visibility 屬性用于隱藏一個元素。

CSS visibility屬性用于隱藏一個元素。當取值為hidden時用于隱藏非表格元素，當取值為collapse時用于隱藏表格行或列。

使用visibility屬性隱藏的元素只是在視覺上不可見，元素并不會被從頁面中移除，元素仍然會影響頁面的布局。這是和使用display屬性來隱藏元素不同的地方。使用display屬性來隱藏的元素會被從頁面中移除，元素原來占據的位置會被其它元素替代。

使用visibility屬性并設置值為hidden的元素，在效果上就好像該元素是完全透明的，但是它仍然會占據原來所在的位置。

當一個父元素使用了visibility: hidden之后，它的子元素可以通過設置visibility: visible來使它們可見。這是和display屬性有區別的第二個地方。

使用visibility屬性隱藏后的元素不會接收鼠標事件pointer-events，但是如果它的子元素是可見的，那么事件仍然會在子元素上被觸發。

有些現代瀏覽器對visibility: collapse不支持或是不完全支持。很多時候用在不是表格行與列的元素上時不會正確的將它顯示成visibility: hidden的效果。建議不要使用該屬性值。

visibility:collapse會改變表格的布局，嵌套在其被折疊的單元格中的表格也會同樣被折疊，除非專門為此嵌套表格指定visibility: visible。

官方語法

visibility: visible | hidden | collapse | inherit

參數：

visible：默認值，使元素可見。

hidden：使元素隱藏(變為透明)，但是不會將元素從頁面中移除，元素仍然占據原來的位置。其子元素可以通過設置值visible使子元素可見。

collapse：用于表格行、列、列組和行組，隱藏表格的行或列，并且不占用任何空間(與將 display: none用于表格的行/列上的效果相當)。但是其他行與列的寬和高不會重新計算，行與列的寬高計算依然會將被設為collapse的行和列考慮進去。這是用于快速從表格中刪除一行或一列，而無需重新計算表格其他元素的寬和高。(用于其他元素時，collapse效果與hidden相同。)

inherit：繼承父元素的visibility屬性。

visibility屬性的初始值為visible。

應用范圍

visibility屬性可以應用所有元素上。

示例代碼

/* 隱藏段落 */

p{ visibility: hidden; }

/* 只有 class 設為 showme 的才會顯示*/

p.showme { visibility: visible; }

/* 折疊 class 設為 col 的行 */

tr.col { visibility: collapse; }

在線演示

下面的例子演示隱藏父元素，但是其子元素可見的效果。

visibility是一個可以動畫的屬性，使用鼠標滑過這里來使父元素變得可見。

瀏覽器支持

所有現代瀏覽器都支持CSS visibility屬性，包括：Chrome, Firefox, Safari, Opera, Internet Explorer, 以及 Android 和 iOS。

某些現代瀏覽器對visibility: collapse不支持或是不完全支持。下面列出了一些瀏覽器解析visibility: collapse時的問題：

webkit內核的瀏覽器會折疊一行，但是它占據的位置仍然會存在。

Chrome和Safari瀏覽器不會折疊列或列組。

Firefox瀏覽器在設置了border-collapse: collapse之后，隱藏

或元素時不會隱藏邊框。

在任何瀏覽器中，如果一個列被折疊，列中單元格的文本不會被顯示。

Opera瀏覽器中(帶WebKit前綴)會折疊除了表格單元格之外的任何東西。

相關閱讀

總結

以上是生活随笔為你收集整理的html visibility属性,CSS属性参考 | visibility的全部內容，希望文章能夠幫你解決所遇到的問題。

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