Css隱藏元素(display,visibility)的區(qū)別

display

display屬性值

display 屬性規(guī)定元素應(yīng)該生成的框的類型。

屬性值：

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ì)周圍元素造成的影響有：

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

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

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

visibility

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和display的區(qū)別

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

display:none;

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

visibility:hidden;

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

visibility和display的其他區(qū)別

其實(shí)visibility和display的區(qū)別主要有三點(diǎn)：

空間占據(jù)

回流與渲染

株連性

回流與渲染：

display:none隱藏產(chǎn)生reflow和repaint(回流與重繪)，而visibility:hidden沒(méi)有這個(gè)影響前端性能的問(wèn)題；

株連性：

所謂“株連性”，就是如果祖先元素遭遇某禍害，則其子子孫孫無(wú)一例外也要遭殃。

display:none就是“株連性”明顯的聲明：一旦父節(jié)點(diǎn)元素應(yīng)用了display:none，父節(jié)點(diǎn)及其子孫節(jié)點(diǎn)元素全部不可見(jiàn)，而且無(wú)論其子孫元素如何不屈地掙扎都無(wú)濟(jì)于事。

在實(shí)際的web應(yīng)用中，我們要經(jīng)常實(shí)現(xiàn)一些顯示隱藏的功能，由于display:none本身特性以及jQuery潛在的驅(qū)動(dòng)，使得我們對(duì)display:none這種隱藏特性相當(dāng)熟知。因此，久而久之會(huì)形成比較牢固的情感化認(rèn)識(shí)，并無(wú)法避免地將這種認(rèn)識(shí)遷移到其他類似表現(xiàn)屬性(eg.?visibility)的認(rèn)識(shí)上，再加上一些常規(guī)經(jīng)驗(yàn)……

舉例來(lái)說(shuō)吧，通常情況下，我們給一個(gè)父元素應(yīng)用visibility:hidden，則其子孫后代也都會(huì)全部不可見(jiàn)。于是，我們就會(huì)有類似的認(rèn)識(shí)遷移：應(yīng)用了visibility:hidden聲明下的子孫元素如何不屈地掙扎都擺脫不了不可見(jiàn)被抹殺的命運(yùn)。而實(shí)際上卻存在隱藏“失效”的情況。

何時(shí)隱藏“失效”？很簡(jiǎn)單，如果子孫元素應(yīng)用了visibility:visible，那么這個(gè)子孫元素又會(huì)劉謙般地顯現(xiàn)出來(lái)。

對(duì)比總結(jié)：

display:none是個(gè)相當(dāng)慘無(wú)人道的聲明，子孫后代全部搞死(株連性)，而且連塊安葬的地方都不留(不留空間)，導(dǎo)致全體民眾嘩然(渲染與回流)。

visibility:hidden則具有人道主義關(guān)懷，雖然不得已搞死子孫，但是子孫可以通過(guò)一定手段避免(偽株連性)，而且死后全尸，墓地俱全(占據(jù)空間)，國(guó)內(nèi)民眾比較淡然(無(wú)渲染與回流)。

其他隱藏元素

在CSS中，讓元素隱藏(指屏幕范圍內(nèi)肉眼不可見(jiàn))的方法很多，有的占據(jù)空間，有的不占據(jù)空間；有的可以響應(yīng)點(diǎn)擊，有的不能響應(yīng)點(diǎn)擊

{ display: none; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }

{ visibility: hidden; /* 占據(jù)空間，無(wú)法點(diǎn)擊 */ }

{ position: absolute; top: -999em; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }

{ position: relative; top: -999em; /* 占據(jù)空間，無(wú)法點(diǎn)擊 */ }

{ position: absolute; visibility: hidden; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }

{ height: 0; overflow: hidden; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間，可以點(diǎn)擊 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間，可以點(diǎn)擊 */ }

{

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* IE6/IE7/IE9不占據(jù)空間，IE8/FireFox/Chrome/Opera占據(jù)空間。都無(wú)法點(diǎn)擊 */

}

{

position: absolute;

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* 不占據(jù)空間，無(wú)法點(diǎn)擊 */

}

height:0和overflow:hidden的組合

overflow:hidden用中文理解就是“溢出隱藏”，也就是盒子以外的內(nèi)容都咔嚓掉不可見(jiàn)的。加上height:0，只要是一般的非inline水平元素，則元素內(nèi)部所有子孫都應(yīng)該是不可見(jiàn)的。

height:0和overflow:hidden組合隱藏“失效”的條件如下：祖先元素沒(méi)有position:relative/absolute/fixed聲明，同時(shí)內(nèi)部子元素應(yīng)用了position:absolute/fixed聲明。

什么時(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ò)樣式文件或方式來(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è)要求。

例子

display屬性值的使用

.test{

height:100px;

background-color:#ccc;

}

.displayWrap{

display: none;

height:100px;

background-color:#E60C0F;

}

.displayChild{

display: block;

height:100px;

width: 50%;

background-color:#000;

}

.visibilityWrap{

visibility: hidden;

height:100px;

background-color:#f5f00e;

}

.visibilityChild{

visibility: visible;

height:100px;

width: 50%;

background-color:#000;

}

displayChildvisibilityChild

總結(jié)

以上是生活随笔為你收集整理的css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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