欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css元素隱藏原理及display:none和visibility:hidden

  發(fā)布時(shí)間：2013-02-27 09:03:02   作者：佚名   我要評(píng)論
在CSS中，讓元素隱藏指屏幕范圍內(nèi)肉眼不可見(jiàn)的方法很多，只不過(guò)有的依然保留空間，而有的卻消失的不留痕跡,接下來(lái)本文將詳細(xì)介紹下css元素隱藏原理，感興趣的你可不要錯(cuò)過(guò)了哈

一、CSS元素隱藏

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

{ display: none; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }
/********************************************************************************/
{ visibility: hidden; /* 占據(jù)空間，無(wú)法點(diǎn)擊 */ }
/********************************************************************************/
{ position: absolute; top: -999em; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }
/********************************************************************************/
{ position: relative; top: -999em; /* 占據(jù)空間，無(wú)法點(diǎn)擊 */ }
/********************************************************************************/
{ position: absolute; visibility: hidden; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }
/********************************************************************************/
{ height: 0; overflow: hidden; /* 不占據(jù)空間，無(wú)法點(diǎn)擊 */ }
/********************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間，可以點(diǎn)擊 */ }
/********************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間，可以點(diǎn)擊 */ }
/********************************************************************************/
{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占據(jù)空間，IE8/FireFox/Chrome/Opera占據(jù)空間。都無(wú)法點(diǎn)擊 */
}
/********************************************************************************/
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占據(jù)空間，無(wú)法點(diǎn)擊 */
}

二、display:none和visibility:hidden

目前，我所知道的不同有三點(diǎn)（歡迎補(bǔ)充）：

1.空間占據(jù)

2.回流與渲染

3.株連性

display:none隱藏產(chǎn)生reflow和repaint(回流與重繪)，而visibility:hidden沒(méi)有這個(gè)影響前端性能的問(wèn)題；第三點(diǎn)估計(jì)是不少同行不知道的，就是“株連性”方面的差異。

所謂“株連性”，就是如果祖先元素遭遇某禍害，則其子子孫孫無(wú)一例外也要遭殃。display:none就是“株連性”明顯的聲明：一旦父節(jié)點(diǎn)元素應(yīng)用了display:none，父節(jié)點(diǎn)及其子孫節(jié)點(diǎn)元素全部不可見(jiàn)，而且無(wú)論其子孫元素如何不屈地掙扎都無(wú)濟(jì)于事。

在實(shí)際的web應(yīng)用中，我們要經(jīng)常實(shí)現(xiàn)一些顯示隱藏的功能，由于display:none本身特性以及jQuery潛在的驅(qū)動(dòng)，使得我們對(duì)display:none這種隱藏特性相當(dāng)熟知。

因此，久而久之會(huì)形成比較牢固的情感化認(rèn)識(shí)，并無(wú)法避免地將這種認(rèn)識(shí)遷移到其他類(lèi)似表現(xiàn)屬性(eg. visibility)的認(rèn)識(shí)上，再加上一些常規(guī)經(jīng)驗(yàn)……

舉例來(lái)說(shuō)吧，通常情況下，我們給一個(gè)父元素應(yīng)用visibility:hidden，則其子孫后代也都會(huì)全部不可見(jiàn)。于是，我們就會(huì)有類(lèi)似的認(rèn)識(shí)遷移：應(yīng)用了visibility:hidden聲

明下的子孫元素如何不屈地掙扎都擺脫不了不可見(jiàn)被抹殺的命運(yùn)。而實(shí)際上卻存在隱藏“失效”的情況。

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

visibility就是這樣一個(gè)funny的屬性。

對(duì)比總結(jié)：

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

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

到此這篇關(guān)于css元素隱藏原理及display:none和visibility:hidden的文章就介紹到這了,更多相關(guān)css元素隱藏原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論