談?wù)凜SS隱藏元素(display,visibility)的區(qū)別
我要評論{ display: none; /* 不占據(jù)空間，無法點擊 */ }
{ visibility: hidden; /* 占據(jù)空間，無法點擊 */ }
{ position: absolute; top: -999em; /* 不占據(jù)空間，無法點擊 */ }
{ position: relative; top: -999em; /* 占據(jù)空間，無法點擊 */ }
{ position: absolute; visibility: hidden; /* 不占據(jù)空間，無法點擊 */ }
{ height: 0; overflow: hidden; /* 不占據(jù)空間，無法點擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間，可以點擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間，可以點擊 */ }
{
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ù)空間。都無法點擊 */
}
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占據(jù)空間，無法點擊 */
}
display:none和visibility:hidden的區(qū)別
不同有三點：
- 空間占據(jù)
- 回流與渲染
- 株連性
第一點，想必都知道；
第二點，display:none隱藏產(chǎn)生reflow和repaint(回流與重繪)，而visibility:hidden沒有這個影響前端性能的問題；
第三點估計是不少同行不知道的，就是“株連性”方面的差異。
所謂“株連性”，就是如果祖先元素遭遇某禍害，則其子子孫孫無一例外也要遭殃。我頓時想起了《地球反擊戰(zhàn)》或是《木乃伊之蝎子王》，一旦把母體搞跛了，小輩啊、下屬啊什么的都瞬間煙消云散。display:none就是“株連性”明顯的聲明：一旦父節(jié)點元素應(yīng)用了display:none，父節(jié)點及其子孫節(jié)點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟于事。
在實際的web應(yīng)用中，我們要經(jīng)常實現(xiàn)一些顯示隱藏的功能，由于display:none本身特性以及jQuery潛在的驅(qū)動，使得我們對display:none這種隱藏特性相當(dāng)熟知。因此，久而久之會形成比較牢固的情感化認識，并無法避免地將這種認識遷移到其他類似表現(xiàn)屬性(eg. visibility)的認識上，再加上一些常規(guī)經(jīng)驗……
舉例來說吧，通常情況下，我們給一個父元素應(yīng)用visibility:hidden，則其子孫后代也都會全部不可見。于是，我們就會有類似的認識遷移：應(yīng)用了visibility:hidden聲明下的子孫元素如何不屈地掙扎都擺脫不了不可見被抹殺的命運。而實際上卻存在隱藏“失效”的情況。
何時隱藏“失效”？很簡單，如果子孫元素應(yīng)用了visibility:visible，那么這個子孫元素又會劉謙般地顯現(xiàn)出來。
height:0和overflow:hidden的組合
overflow:hidden用中文理解就是“溢出隱藏”，也就是盒子以外的內(nèi)容都咔嚓掉不可見的。加上height:0，只要是一般的非inline水平元素，則元素內(nèi)部所有子孫都應(yīng)該是不可見的。
height:0和overflow:hidden組合隱藏“失效”的條件如下：祖先元素沒有position:relative/absolute/fixed聲明，同時內(nèi)部子元素應(yīng)用了position:absolute/fixed聲明。
相關(guān)文章
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時產(chǎn)生的空隙問題的解決作了重點講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時候，我們常常會用到display對應(yīng)值有block、none、inline這三個值。下面我們來分別來認識和學(xué)習(xí)什么時候用什么值。這里通過CSS display知識加實例講解2014-09-02
- visiblity 是設(shè)置元素的可見性，即可見 / 隱藏；display 是設(shè)置元素按什么樣的方式來顯示，是按塊顯示，不了解的朋友可以參考下2014-02-24
css中display和visibility的用法和區(qū)別介紹
css中display和visibility想必前臺美工對它并不陌生吧，如果你感覺自己對它還不是很熟悉的話，不妨了解本文對display和visibility的使用介紹2013-11-17- 到現(xiàn)在可能有人不知道display:block的作用，問了一句在div的元素里面寫display：block有用嗎？至于這個問題可以詳細參考喜下本文，希望對大家有所幫助2013-09-24
- 在IE6中設(shè)置display:block的空容器為一個較小高度時不知道大家有沒有注意到其高度不能小于某個值，接下來為您詳細介紹下IE6中容器高度的BUG，感興趣的你可以參考下本文2013-03-06
CSS display:block在Firefox下顯示布局錯亂問題
本文向大家介紹一下如何解決CSS display:block在Firefox下顯示布局錯亂問題，按照常理，對于某一單元行需要顯示時，使用CSS display:block屬性，在IE瀏覽器中顯示正常，但2012-12-30基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因為使用了2012-12-07- 網(wǎng)頁制作Webjx文章簡介：網(wǎng)頁元素應(yīng)用上那些與表格相關(guān)的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。2009-04-02
- 網(wǎng)頁制作Webjx文章簡介：這篇文章所講的也是非常使用的技術(shù)，其中牽涉到其他的技術(shù)，也需要大家有所了解。正好這兩天也在看這方面的資料，提供一些資料給大家參考。2009-04-02