CSS隱藏元素的幾個(gè)方法（display，visibility）的區別發(fā)布者：本站     時(shí)間：2020-05-16 09:05:26

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

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

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

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

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

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

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

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

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

{

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

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

}

{

position: absolute;

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

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

}

display:none和visibility:hidden的區別

不同有三點(diǎn)：

空間占據

回流與渲染

株連性

第一點(diǎn)，想必都知道；

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

第三點(diǎn)估計是不少同行不知道的，就是“株連性”方面的差異。

所謂“株連性”，就是如果祖先元素遭遇某禍害，則其子子孫孫無(wú)一例外也要遭殃。我頓時(shí)想起了《地球反擊戰》或是《木乃伊之蝎子王》，一旦把母體搞跛了，小輩啊、下屬啊什么的都瞬間煙消云散。display:none就是“株連性”明顯的聲明：一旦父節點(diǎn)元素應用了display:none，父節點(diǎn)及其子孫節點(diǎn)元素全部不可見(jiàn)，而且無(wú)論其子孫元素如何不屈地掙扎都無(wú)濟于事。

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

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

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

對比總結：

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

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

height:0和overflow:hidden的組合

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

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