css元素隱藏原理及display:none和visibility:hidden

一、CSS元素隱藏
在CSS中,讓元素隱藏(指屏幕范圍內(nèi)肉眼不可見(jiàn))的方法很多,有的占據(jù)空間,有的不占據(jù)空間;有的可以響應(yīng)點(diǎn)擊,有的不能響應(yīng)點(diǎn)擊。一個(gè)一個(gè)看。
{ 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)擊 */ }
二、display:none和visibility:hidden
目前,我所知道的不同有三點(diǎn)(歡迎補(bǔ)充):
1.空間占據(jù)
2.回流與渲染
3.株連性
display:none隱藏產(chǎn)生reflow和repaint(回流與重繪),而visibility:hidden沒(méi)有這個(gè)影響前端性能的問(wèn)題;第三點(diǎn)估計(jì)是不少同行不知道的,就是“株連性”方面的差異。
所謂“株連性”,就是如果祖先元素遭遇某禍害,則其子子孫孫無(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í)遷移到其他類(lèi)似表現(xiàn)屬性(eg. visibility)的認(rèn)識(shí)上,再加上一些常規(guī)經(jīng)驗(yàn)……
舉例來(lái)說(shuō)吧,通常情況下,我們給一個(gè)父元素應(yīng)用visibility:hidden,則其子孫后代也都會(huì)全部不可見(jiàn)。于是,我們就會(huì)有類(lèi)似的認(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)。
visibility就是這樣一個(gè)funny的屬性。
對(duì)比總結(jié):
display:none是個(gè)相當(dāng)慘無(wú)人道的聲明,子孫后代全部搞死(株連性),而且連塊安葬的地方都不留(不留空間),導(dǎo)致全體民眾嘩然(渲染與回流)。
visibility:hidden則具有人道主義關(guān)懷,雖然不得已搞死子孫,但是子孫可以通過(guò)一定手段避免(偽株連性),而且死后全尸,墓地俱全(占據(jù)空間),國(guó)內(nèi)民眾比較淡然(無(wú)渲染與回流)。
到此這篇關(guān)于css元素隱藏原理及display:none和visibility:hidden的文章就介紹到這了,更多相關(guān)css元素隱藏原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
IE/火狐/Chrome操作display:none對(duì)象所遇問(wèn)題解答
display:none在IE、火狐、Chrome等主流瀏覽器中的一些問(wèn)題想必大家也有碰到過(guò)吧,接下來(lái)為大家詳細(xì)圖文介紹下,感興趣的朋友可以參考下哈希望可以幫助到你2013-03-28ie9崩潰現(xiàn)象當(dāng)js設(shè)置tr元素樣式為display:none
在css測(cè)試中遇到一個(gè)ie9的bug:用js設(shè)置tr元素的樣式為display:none 會(huì)引起ie崩潰,很是郁悶,于是網(wǎng)上搜羅一下終于找到了解決方法,曬出來(lái)與大家分享,感興趣的你可不要錯(cuò)2013-02-20IE7下父元素及子元素的隱藏順序不當(dāng)帶來(lái)的display:none出現(xiàn)BUG
IE7下,先隱藏父元素,后隱藏子元素,再顯示父元素,被隱藏的子元素重疊區(qū)域下面, 存在另一個(gè)可見(jiàn)的元素,則該display:none的子元素出現(xiàn)BUG;接下來(lái)介紹一下發(fā)生經(jīng)過(guò),感興2013-01-19display:none和visibility:hidden的差別比較與演示代碼
display:none和visibility:hidden的差別:visibility:hidden隱藏,但在瀏覽時(shí)保留位置;而CSS display:none視為不存在,且不加載,感興趣的朋友可以研究下2012-12-30如何通過(guò) display:olck/none 完成一個(gè)菜單欄
這篇文章主要介紹了如何通過(guò) display:olck/none 完成一個(gè)菜單欄,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-18