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

?

一、Display的屬性值

block：

/*表現(xiàn)為一個(gè)塊級(jí)元素（一般情況下獨(dú)占一行）*/

當(dāng)display被設(shè)置為block(塊)時(shí)，容器中所有的元素將會(huì)被當(dāng)作一個(gè)單獨(dú)的塊，就像<DIV>元素一樣，它會(huì)在那個(gè)點(diǎn)被放入到頁(yè)面中。(實(shí)際上你可以設(shè)置<span>的display:block，使其可以像<DIV>一樣工作。

inline:

/*表現(xiàn)為一個(gè)行級(jí)元素（一般情況下不獨(dú)占一行）*/

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

none:

/*元素不可見(jiàn)，并且不為其保留相應(yīng)的位置*/

最后是display被設(shè)置：none,這時(shí)元素實(shí)際上就從頁(yè)面中被移走，它下面所在的元素就會(huì)被自動(dòng)跟上填充。

?

二、Display的使用

?

1、display默認(rèn)屬性值為塊級(jí)的元素：

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默認(rèn)屬性值為none的元素：

br,frame,nextid,tbody,tfoot,thead

?

3、li元素的display屬性默認(rèn)值為：list-item

4、其他元素display屬性默認(rèn)值都為inline

?

三、Display的特性

?

改變?cè)氐膁isplay屬性將對(duì)周?chē)卦斐傻挠绊懹?#xff1a;

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

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

3、隱藏屬性值設(shè)為none的元素并且釋放該元素在文檔中所占的物理空間，對(duì)于其他元素來(lái)說(shuō)，相當(dāng)于該元素不存在，因此，該元素的位置被其他元素頂替

?

四、visibility的屬性值

visibility:visible
/*元素可見(jiàn)，默認(rèn)值*/

visibility:hidden
/*元素不可見(jiàn)，但仍然為其保留相應(yīng)的空間*/

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

visibility:inherit
/*繼承上級(jí)元素的visibility值。*/

?

?五、visibility特性

用來(lái)確定元素是顯示還是隱藏，這用visibility="visible|hidden"來(lái)表示，visible表示顯示，hidden表示隱藏。當(dāng)visibility被設(shè)置為"hidden"的時(shí)候，元素雖然被隱藏了，但它仍然占據(jù)它原來(lái)所在的位置。

?

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

?

display:none;

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

visibility:hidden;

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

?

七、什么時(shí)候使用Visibility或者Display屬性？

Visibility和Display屬性雖然都可以達(dá)到隱藏頁(yè)面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。

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

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

?

八、使用Visibility或者Display屬性的注意事項(xiàng)

display:none:

1、JS讀取元素屬性值

如果在樣式文件或頁(yè)面文件代碼中直接用display:none對(duì)元素進(jìn)行了隱藏，載入頁(yè)面后，在沒(méi)有通過(guò)js設(shè)置樣式使元素顯示的前提下，使用js代碼會(huì)無(wú)法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會(huì)為0，通過(guò)js設(shè)置style.display來(lái)使元素顯示后才能正確獲得這些值。

2、SEO優(yōu)化時(shí)需要注意

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

3、樣式文件

如果是通過(guò)樣式文件或<style>css</style>方式來(lái)設(shè)置元素的display:none樣式，用js設(shè)置style.display=""并不能使元素顯示，可以使用block或inline等值來(lái)代替。通過(guò)style="display:none"直接在元素上進(jìn)行的設(shè)置不會(huì)有這個(gè)問(wèn)題

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

?

visibility:hidden:

如果想讓某一段代碼在前臺(tái)不顯示，最簡(jiǎn)單的方法是用css的display:none,這樣，下邊的內(nèi)容就自動(dòng)填補(bǔ)這個(gè)空隙。但是在一些特殊的情況下，我們只需要隱藏這個(gè)元素，但它的位置不能被占用了，那么，visibility:hidden就可以實(shí)現(xiàn)這個(gè)要求。

總結(jié)

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

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