visibility與display之設(shè)置元素顯隱的區(qū)別

在CSS里的visibility 屬性，通常其值被設(shè)置成visible 或hidden。

visibility：hidden 相當(dāng)于display：none，能把元素隱藏起來，但是兩者的區(qū)別在于：

display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

實(shí)例
css:

沒有設(shè)置時(shí)效果：

設(shè)置visibility：hidden后效果：

設(shè)置display：none后效果：

visibility和display兩個(gè)屬性都有隱藏元素的功能。

但使用visibility屬性并不能減少瀏覽器打開網(wǎng)頁的速度,就是說visibility屬性所控制的元素雖然不在瀏覽器里面顯示出來,但他在瀏覽區(qū)里是存在的,瀏覽器打開網(wǎng)頁的時(shí)候已經(jīng)下載了這個(gè)元素,只是不顯示而已。

并且這個(gè)元素在瀏覽器顯示的頁面中也要占他本身大小的位置,而這個(gè)位置顯示的是空白而已。
而display屬性設(shè)置為none,這個(gè)元素就變成了一個(gè)不顯示的元素,瀏覽器在載入網(wǎng)頁的時(shí)候會(huì)忽略這個(gè)元素,不會(huì)下載其內(nèi)容,瀏覽器打開速度會(huì)比沒有設(shè)置display屬性前要快。

對一個(gè)元素而言，如果 display 設(shè)置其值為 none 則該元素以及所有后代元素都隱藏。
? 在 Firefox瀏覽器下，display：none的元素的background-image圖片是不會(huì)加載的，包括父元素display：none也是如此；然而在Chrome和Safari瀏覽器則不同，若父元素display：none，圖片不會(huì)加載，若是自身背景圖所在元素隱藏，則圖片依舊會(huì)去加載；對IE瀏覽器而言，不管怎樣都會(huì)請求圖片資源。

visibility 的繼承性
如果父元素設(shè)置 visibility:hidden，子元素也會(huì)看不見，究其原因是繼承性，子元素繼承visibility:hidden，但是，如果子元素設(shè)置了 visibility:visible，則子元素又會(huì)顯示出來。這個(gè)和 display 隱藏有著質(zhì)的區(qū)別。
visibility支持的屬性值還有一個(gè)collapsecollapse；
當(dāng)設(shè)置元素visibility：collapse后，對于普通元素，其表現(xiàn)等同于 visibility：hidden ，也即其會(huì)占用空間。

? 注：visibility：collapse （作為表格用的）了解就好，對于表格相關(guān)的元素，部分現(xiàn)代瀏覽器對它的解析不準(zhǔn)確，無實(shí)用價(jià)值。

總結(jié)

以上是生活随笔為你收集整理的visibility与display的区别：的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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