大多數人很容易將CSS屬性display和visibility混淆，它們看似沒有什么不同，其實它們的差別卻是很大的。visibility和display兩個屬性都有隱藏元素的功能。visibility屬性所控制的元素雖然不在瀏覽器里面顯示出來，但他在瀏覽區里是存在的，只是不顯示而已。而display屬性設置為none，這個元素就變成了一個不顯示的元素。

?

一、Display的屬性值

block：

/*表現為一個塊級元素（一般情況下獨占一行）*/

當display被設置為block(塊)時，容器中所有的元素將會被當作一個單獨的塊，就像<DIV>元素一樣，它會在那個點被放入到頁面中。(實際上你可以設置<span>的display:block，使其可以像<DIV>一樣工作。

inline:

/*表現為一個行級元素（一般情況下不獨占一行）*/

將display設置為inline，將使其行為和元素inline一樣---即使它是普通的塊元素如<DIV>，它也將會被組合成像<span>那樣的輸出流。

none:

/*元素不可見，并且不為其保留相應的位置*/

最后是display被設置：none,這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填充。

?

二、Display的使用

?

1、display默認屬性值為塊級的元素：

adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,

dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,

menu,ol,p,plaintext,pre,table,td,th,tr,ul

?

2、display默認屬性值為none的元素：

br,frame,nextid,tbody,tfoot,thead

?

3、li元素的display屬性默認值為：list-item

4、其他元素display屬性默認值都為inline

?

三、Display的特性

?

改變元素的display屬性將對周圍元素造成的影響有：

1、在屬性值設為block的元素后面添加新行

2、從屬性值設為inline的元素所在行中刪除一行

3、隱藏屬性值設為none的元素并且釋放該元素在文檔中所占的物理空間，對于其他元素來說，相當于該元素不存在，因此，該元素的位置被其他元素頂替

?

四、visibility的屬性值

visibility:visible
/*元素可見，默認值*/

visibility:hidden
/*元素不可見，但仍然為其保留相應的空間*/

visibility:collapse
/*只對table對象起作用，能移除行或列但不會影響表格的布局。如果這個值用在table以外的對象上則表現為hidden。*/

visibility:inherit
/*繼承上級元素的visibility值。*/

?

?五、visibility特性

用來確定元素是顯示還是隱藏，這用visibility="visible|hidden"來表示，visible表示顯示，hidden表示隱藏。當visibility被設置為"hidden"的時候，元素雖然被隱藏了，但它仍然占據它原來所在的位置。

?

六、由以上可以了解到 Visibility:none 和 Display:hidden 的區別

?

display:none;

使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;

visibility:hidden;

使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

?

七、什么時候使用Visibility或者Display屬性？

Visibility和Display屬性雖然都可以達到隱藏頁面元素的目的，但它們的區別在于如何回應正常文檔流。

如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用visibility：hidden。如果你想在隱藏某元素的同時讓其它內容填充空白的話應該使用display：none。

在現實中我（作者）更多的傾向于使用display屬性（相信這也是大多數人的習慣，bolo注）。當你決定用display：none來隱藏一個元素時，你必須知道其它內容將填充到該元素留下的空白位置，從而改變頁面的布局。

?

八、使用Visibility或者Display屬性的注意事項

display:none:

1、JS讀取元素屬性值

如果在樣式文件或頁面文件代碼中直接用display:none對元素進行了隱藏，載入頁面后，在沒有通過js設置樣式使元素顯示的前提下，使用js代碼會無法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會為0，通過js設置style.display來使元素顯示后才能正確獲得這些值。

2、SEO優化時需要注意

使用display:none隱藏的元素不會被百度等搜索網站檢索，會影響到網站的SEO，某些情況下可以使用left:-100000px來達到同樣效果。

3、樣式文件

如果是通過樣式文件或<style>css</style>方式來設置元素的display:none樣式，用js設置style.display=""并不能使元素顯示，可以使用block或inline等值來代替。通過style="display:none"直接在元素上進行的設置不會有這個問題

4、有些情況下可以使用style.visibility來代替style.display，但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所占的空間，而style.display隱藏元素且讓出所占頁面空間。

?

visibility:hidden:

如果想讓某一段代碼在前臺不顯示，最簡單的方法是用css的display:none,這樣，下邊的內容就自動填補這個空隙。但是在一些特殊的情況下，我們只需要隱藏這個元素，但它的位置不能被占用了，那么，visibility:hidden就可以實現這個要求。

總結

以上是生活随笔為你收集整理的display和visibility的用法和区别的全部內容，希望文章能夠幫你解決所遇到的問題。

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