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