CSS visibility 屬性用于隱藏一個(gè)元素。

CSS visibility屬性用于隱藏一個(gè)元素。當(dāng)取值為hidden時(shí)用于隱藏非表格元素，當(dāng)取值為collapse時(shí)用于隱藏表格行或列。

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

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

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

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

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

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

官方語(yǔ)法

visibility: visible | hidden | collapse | inherit

參數(shù)：

visible：默認(rèn)值，使元素可見。

hidden：使元素隱藏(變?yōu)橥该?，但是不會(huì)將元素從頁(yè)面中移除，元素仍然占據(jù)原來的位置。其子元素可以通過設(shè)置值visible使子元素可見。

collapse：用于表格行、列、列組和行組，隱藏表格的行或列，并且不占用任何空間(與將 display: none用于表格的行/列上的效果相當(dāng))。但是其他行與列的寬和高不會(huì)重新計(jì)算，行與列的寬高計(jì)算依然會(huì)將被設(shè)為collapse的行和列考慮進(jìn)去。這是用于快速?gòu)谋砀裰袆h除一行或一列，而無需重新計(jì)算表格其他元素的寬和高。(用于其他元素時(shí)，collapse效果與hidden相同。)

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

visibility屬性的初始值為visible。

應(yīng)用范圍

visibility屬性可以應(yīng)用所有元素上。

示例代碼

/* 隱藏段落 */

p{ visibility: hidden; }

/* 只有 class 設(shè)為 showme 的才會(huì)顯示*/

p.showme { visibility: visible; }

/* 折疊 class 設(shè)為 col 的行 */

tr.col { visibility: collapse; }

在線演示

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

visibility是一個(gè)可以動(dòng)畫的屬性，使用鼠標(biāo)滑過這里來使父元素變得可見。

瀏覽器支持

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

某些現(xiàn)代瀏覽器對(duì)visibility: collapse不支持或是不完全支持。下面列出了一些瀏覽器解析visibility: collapse時(shí)的問題：

webkit內(nèi)核的瀏覽器會(huì)折疊一行，但是它占據(jù)的位置仍然會(huì)存在。

Chrome和Safari瀏覽器不會(huì)折疊列或列組。

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

或元素時(shí)不會(huì)隱藏邊框。

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

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

相關(guān)閱讀

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。