在CSS中，讓元素隱藏（指屏幕范圍內肉眼不可見）的方法很多，有的占據空間，有的不占據空間；有的可以響應點擊，有的不能響應點擊。我們一般有三種方式：display:none, opacity:0;filter：alpha(opacity=0-100;, visibility:hidden。但這三種方式有何區別？
一、三種隱藏方式的區別
1、display:none
（1）、瀏覽器不會生成屬性為display: none;的元素。
（2）、display: none;不占據空間，把元素隱藏起來，所以動態改變此屬性時會引起重排（改變頁面布局），可以理解成在頁面中把該元素刪除掉一樣。
（3）、display: none;不會被子孫繼承，但是其子孫是不會顯示的，畢竟都一起被隱藏了。
（4）、display,是個尷尬的屬性，transition對她無效。
2、visibility:hidden
（1）、元素會被隱藏，但是不會消失，依然占據空間，隱藏后不會改變html原有樣式。
（2）、visibility: hidden會被子孫繼承，子孫也可以通過顯示的設置visibility: visible;來反隱藏。
（3）、visibility: hidden;不會觸發該元素已經綁定的事件。
（4）、visibility: hidden;動態修改此屬性會引起重繪。
（5）、visibility,transition對她無效。
3、opacity:0;filter：alpha(opacity=0-100;（考慮瀏覽器兼容性的問題，最好兩個都寫上）
（1）、opacity:0;filter：alpha(opacity=0-100;只是透明度為100%,元素隱藏，依然占據空間,隱藏后不會改變html原有樣式。
（2）、opacity:0;filter：alpha(opacity=0-100;會被子元素繼承,且子元素並不能通過opacity=1，進行反隱藏。不能。
（3）、opacity:0;filter：alpha(opacity=0-100;的元素依然能觸發已經綁定的事件。
（4）、opacity:0;filter：alpha(opacity=0-100;,transition對她有效。
4.
{ display: none; /* 不占據空間，無法點擊 */ }
{ visibility: hidden; /* 占據空間，無法點擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據空間，可以點擊 */ }
{ position: absolute; top: -999em; /* 不占據空間，無法點擊 */ }
{ position: relative; top: -999em; /* 占據空間，無法點擊 */ }
{ position: absolute; visibility: hidden; /* 不占據空間，無法點擊 */ }
{ height: 0; overflow: hidden; /* 不占據空間，無法點擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間，可以點擊 */ }
二、display:none和visibility:hidden的詳細區別
不同有三點：
- 空間占據
- 回流與渲染
- 株連性
第一點，想必都知道；
第二點，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則具有人道主義關懷，雖然不得已搞死子孫，但是子孫可以通過一定手段避免（偽株連性），而且死后全屍，墓地俱全（占據空間），國內民眾比較淡然（無渲染與回流）。