您可能不知道的CSS元素隱藏「失效」以其妙用

您可能不知道的CSS元素隱藏「失效」以其妙用

by zhangxinxu from http://www.zhangxinxu.com
地址：http://www.zhangxinxu.com/wordpress/?p=2191

1、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元素隱藏「失效」的狀況！