CSS隱藏元素 display visibility opacity的區別

轉自：http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/

一、CSS元素隱藏

在CSS中，讓元素隱藏（指屏幕範圍內肉眼不可見）的方法很多，有的占據空間，有的不占據空間；有的可以響應點擊，有的不能響應點擊。後宮選秀——一個一個看。

{ display: none; /* 不占據空間，無法點擊 */ }

{ visibility: hidden; /* 占據空間，無法點擊 */ }

{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占據空間，無法點擊 */ }

{ 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); 
    /* 不占據空間，無法點擊 */
}

歡迎補充！

以上隱藏方法如果針對最小輩的子元素（膝下無子女），例如<img>圖片元素，則上面的註釋說明都是OK的(若有誤，請指正)。

我以前就提過，為了便於理解，我們會使用情感化思維，類比現實，在內心形成只屬於自己的具象化的想法。這是很OK的，但是，要知道，事物是具有兩面的，具象的東西容易讓我們陷入固定思維模式，尤其在現實世界中非特殊情境的驗證下，從而讓我們不經意間產生一些錯誤的認識。

上面的話有點像老油條——難嚼。要讓老少皆懂，很簡單，舉幾個簡單的示例就可以了。而這裏的示例就是上頭幾個隱藏的例子：由於具象化的固定思維，您可能並不知道下面要提到的幾種CSS元素隱藏“失效”的情況！

二、display:none和visibility:hidden

我記得校園招聘那會兒，技術面的時候有問我display:none和visibility:hidden的區別在哪兒？

“這個問題簡單？”我心裏頭暗自得意，按耐住自己得意又緊張的小心臟，自信滿滿地說，“這兩個聲明都可以讓元素隱藏，不同之處在於display:none隱藏後的元素不占據任何空間，而visibility:hidden隱藏的元素空間依舊存在。”

想在想想，自己實在是浮躁了點。這種程度的答案說明你在HTML/CSS方面的造詣只是了解這個層面，並不能讓面試官眼前一亮。放眼整個中國，寫頁面的人何其多，像這種程度回答的人一定就像河裏的沙子一樣，一抓一大把。隨便用腳趾頭想想也知道，像度娘，企鵝公司花費那麽多人力和財力來校園是肯定來挑金子的，不起眼的沙子就讓它隨波逐流，流到大海暖化石去吧。

目前，我所知道的不同有三點（歡迎補充）：

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，那麽這個子孫元素又會劉謙般地顯現出來。

您可以狠狠地點擊這裏：CSS visibility屬性的株連性測試demo

visibility就是這樣一個funny的屬性。

對比總結：
display:none是個相當慘無人道的聲明，子孫後代全部搞死（株連性），而且連塊安葬的地方都不留（不留空間），導致全體民眾嘩然（渲染與回流）。
visibility:hidden則具有人道主義關懷，雖然不得已搞死子孫，但是子孫可以通過一定手段避免（偽株連性），而且死後全屍，墓地俱全（占據空間），國內民眾比較淡然（無渲染與回流）。

附上
本節末了，您可以狠狠地點擊這裏：display:none株連性測試demo

可以看到demo頁面中張美女都跟靚仔過情人節去了。

三、visibility隱藏“失效”妙用

visibility隱藏“失效” 的應用其實在老早的時候就有了，等下，讓我找找~~

啊哈，找到了。
去年的去年5月份CSS3模擬window7炫酷界面效果demo，原文點擊這裏。

復選框勾選與否對應的部分顯示與隱藏。例如，偶們要讓父標簽的圓角啊、投影啊、背景啊什麽的都隱掉，只留裏面的文本框。該怎麽實現？如果是要display:none，則裏面的文本框框也會被一並抹殺掉的，如果是要腳本控制style，哇哦哦，這麽多樣式，想想腦袋就大了。毋庸置疑，這裏使用visibility控制是最高效也是最巧妙的方法。

四、height:0和overflow:hidden的組合

overflow:hidden用中文理解就是“溢出隱藏”，也就是盒子以外的內容都哢嚓掉不可見的。加上height:0，只要是一般的非inline水平元素，則元素內部所有子孫都應該是不可見的。這是我們具象化的認識，而且N多的經驗驗證都是如此，但是實際上是這樣子嗎？

先看一個反例demo，您可以狠狠地點擊這裏：0高度溢出隱藏“失效”demo

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

為什麽會這樣？
先看下CSS2.1規範中對overflow的一點解釋：

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

什麽意思呢？我琢磨了又琢磨，唉，只嘆理解不夠深入，也有些理不清。我想大致意思應該這樣（若有不對應該指正）：overflow可以剪裁超出塊狀元素之外的元素。除非超出元素的包含塊是整個視區或是該overflow元素的祖先元素。然後絕對定位元素的包含塊應該就是含有position:relative/absolute/fixed的祖先元素。

因此：

body
    height: 0; overflow: hidden;
        position: absolute; /* 不會被隱藏 */

position: relative;
    height: 0; overflow: hidden;
        position: absolute; /* 不會被隱藏 */

height: 0; overflow: hidden;  position: relative;
    position: absolute; /* 會被隱藏 */

height: 0; overflow: hidden;
    position: relative;
        position: absolute; /* 會被隱藏 */

記住這個：position: absolute元素溢出overflow: hidden元素的時候，如果其第一個含有position屬性(static除外)的祖先元素（一直到body）是overflow: hidden元素祖先元素的時候，則不隱藏；否則，隱藏。

或者記住這個：火星人在地球觸發了法律，如果火星人的老爸在這法律之外，則這個火星人啥事沒有；否則，坐牢！

五、height:0和overflow:hidden“失效”妙用

前不久在“absolute元素在text-align屬性下的對齊顯示”一文中介紹了一種簡單使用text-align屬性實現“返回頂部”按鈕定位的方法。

您可以狠狠地點擊這裏：text-align:right聲明下的返回頂部定位demo

後來有人反映，此方法好是好，但是有一個問題，因為標簽內打了個 空格，產生了了空白高度啊！

如何fix這裏的空格產生的高度呢？使用line-height: 0; ? 或者使用font-size: 0;? 如果不是因為line-height和font-size具有繼承性，這確實是個好方法（font-size還有Chrome默認文字無法小於12像素問題，考古版本IE下0像素文字呈現小點的問題）。

經過我多方測試，以在OOCSS開發模式下，這裏使用height:0和overflow:hidden是最好的方法。

h0 ovh tr
      abs

您可以狠狠地點擊這裏：text-align下返回頂部不占據空間demo

demo中，上面一個條條 產生高度，因此頭部背景色，而下面這個條條就沒有。因為定位元素是絕對定位的，因此，不要擔心會被overflow不小心幹掉！

六、情人節結語

據說今天 @淘寶超仁 花了10W在淘寶上買了個廣告位向 @倩小蓮 表白。

這位哥們真是大手筆啊，我輩實在望塵莫及，只能用毛主席換些德芙了。想了想，擠不出設麽話了，就這樣吧。

末了，再附上一個opacity透明度覆蓋性測試demo，您可以狠狠地點擊這裏：opacity透明度覆蓋性測試demo

結果顯示，透明度屬性會重疊，具有覆蓋性。

另：

http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden

Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):

1. Collapses the space that the element would normally occupy
2. Responds to events (e.g., click, keypress)
3. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse    *      No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

文章來源：