html visibility属性,CSS属性参考 | visibility
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的全部內容，希望文章能夠幫你解決所遇到的問題。
