CSS隱藏元素 display visibility opacity的區別

{ display: none; /* 不佔據空間，沒法點擊 */ } 
{ visibility: hidden; /* 佔據空間，沒法點擊 */ } 
{ position: absolute; top: -999em; /* 不佔據空間，沒法點擊 */ } 
{ position: relative; top: -999em; /* 佔據空間，沒法點擊 */ } 
{ position: absolute; visibility: hidden; /* 不佔據空間，沒法點擊 */ } 
{ height: 0; overflow: hidden; /* 不佔據空間，沒法點擊 */ } 
{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，能夠點擊 */ } 
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不佔據空間，能夠點擊 */ } 
{ 
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佔據空間。都沒法點擊 */ 
} 
{ 
position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* 不佔據空間，沒法點擊 */ 
} 

 

display:none和visibility:hidden的區別

不一樣有三點：

1. 空間佔據
2. 迴流與渲染
3. 株連性

第一點，想必都知道；

第二點，display:none隱藏產生reflow和repaint(迴流與重繪)，而visibility:hidden沒有這個影響前端性能的問題；

第三點估計是很多同行不知道的，就是「株連性」方面的差別。

所謂「株連性」，就是若是祖先元素遭遇某禍害，則其子子孫孫無一例外也要遭殃。我頓時想起了《地球反擊戰》或是《木乃伊之蠍子王》，一旦把母體搞跛了，小 輩啊、下屬啊什麼的都瞬間煙消雲散。display:none就是「株連性」明顯的聲明：一旦父節點元素應用了display:none，父節點及其子孫 節點元素所有不可見，並且不管其子孫元素如何不屈地掙扎都無濟於事。

在實際的web應用中，咱們要常常實現一些顯示隱藏的功能，因爲display:none自己特性以及jQuery潛在的驅動，使得咱們對display:none這種隱藏特性至關熟知。所以，長此以往會造成比較牢固的情感化認識，並沒有法避免地將這種認識遷移到其餘相似表現屬性(eg. visibility)的認識上，再加上一些常規經驗……

舉例來講吧，一般狀況下，咱們給一個父元素應用visibility:hidden，則其子孫後代也都會所有不可見。因而，咱們就會有相似的認識遷移：應 用了visibility:hidden聲明下的子孫元素如何不屈地掙扎都擺脫不了不可見被抹殺的命運。而實際上卻存在隱藏「失效」的狀況。

什麼時候隱藏「失效」？很簡單，若是子孫元素應用了visibility:visible，那麼這個子孫元素又會劉謙般地顯現出來。

對比總結：

display:none是個至關慘無人道的聲明，子孫後代所有搞死（株連性），並且連塊安葬的地方都不留（不留空間），致使全體民衆譁然（渲染與迴流）。
visibility:hidden則具備人道主義關懷，雖然不得已搞死子孫，可是子孫能夠經過必定手段避免（僞株連性），並且死後全屍，墓地俱全（佔據空間），國內民衆比較淡然（無渲染與迴流）。

height:0和overflow:hidden的組合

overflow:hidden用中文理解就是「溢出隱藏」，也就是盒子之外的內容都咔嚓掉不可見的。加上height:0，只要是通常的非inline水平元素，則元素內部全部子孫都應該是不可見的。

height:0和overflow:hidden組合隱藏「失效」的條件以下：祖先元素沒有position:relative/absolute/fixed聲明，同時內部子元素應用了position:absolute/fixed聲明