在平常的樣式排版中，我們經(jīng)常遇到將某個(gè)模塊隱藏，下面我整理了一下隱藏元素的多種方法以及對(duì)比（有的占據(jù)空間，有的不占據(jù)空間。有的可以點(diǎn)擊，有的不能點(diǎn)擊。）：
( 一 ) display: none;
特點(diǎn)：元素不可見(jiàn)，不占據(jù)空間，無(wú)法響應(yīng)點(diǎn)擊事件。
.hide{
display: none;
}
( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）
特點(diǎn)：改變?cè)赝该鞫龋夭豢梢?jiàn)，占據(jù)頁(yè)面空間，可以響應(yīng)點(diǎn)擊事件。
.hide{
opacity: 0;
filter:Alpha(opacity=0);
}
( 三 ) visibility: hidden;
特點(diǎn)：元素不可見(jiàn)，占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件。
.hide{
visibility: hidden;
}
( 四 ) transform: scale(0);
( 1 ) zoom: 0.1; transform: scale(0);
特點(diǎn)：元素不可見(jiàn)，IE 6 7 9 不占據(jù)頁(yè)面空間，IE8 谷歌 火狐 歐朋 等瀏覽器占據(jù)空間，無(wú)法響應(yīng)點(diǎn)擊事件。
.hide{
zoom: 0.1;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
}
( 2 ) position: absolute; zoom: 0.1; transform: scale(0);
特點(diǎn)：元素不可見(jiàn)，不占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件。
.hide{
position: absolute;
zoom: 0.1;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
}
( 五 ) width: 0; height: 0; 配合overflow: hidden;
特點(diǎn)：元素不可見(jiàn)，不占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件。但 padding值 和 margin值 依然存在，需要將內(nèi)外邊距都調(diào)整為0。
.hide{
display: inline-block;
width: 0;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
( 六 ) position: absolute; left: -200%; 或者 top: -200%；等，父級(jí)需要相對(duì)定位，這種left top值可以根據(jù)具體的實(shí)際情況去定義
特點(diǎn)：元素不可見(jiàn)，不占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件。
. father{
position: relative;
overflow: hidden;
}
.hide{
position: absolute;
left: -200%;//或top: -200%;
}
( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
特點(diǎn)：元素不可見(jiàn)，占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件。
.hide{
float: left;
width: 150px;
margin: 20px;
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
( 八 ) margin: top | right | bottom | left ;父級(jí)添加overflow: hidden; (margin的值 一定要小于（子級(jí)的寬度加上邊距的總和的負(fù)數(shù)）)
特點(diǎn)：元素不可見(jiàn)，不占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件。
.father{
width: 400px;
height: 400px;
overflow: hidden;
}
.hide{
display: inline-block;
width: 200px;
height: 200px;
margin-left: -200px;
}
以上就是幾種隱藏元素的方法，我在以前的面試中，也碰到了面試官提出的一些關(guān)于隱藏元素css的對(duì)比，查閱了一些資料，做了以下整理：
( 一 ) display: none 和 visibility: hidden 的區(qū)別
1. 占據(jù)頁(yè)面空間( display: none 將元素隱藏后，在頁(yè)面是是不占有空間位置的，而visibility: hidden 將元素隱藏后，還保留著元素大小的空間位置 ) ；
2. display: none 影響了 reflow和repaint(回流與重繪)，而visibility: hidden并沒(méi)有影響
3. 某個(gè)模塊添加了display: none; 它下面的任何子級(jí)都會(huì)被隱藏，而添加了visibility: hidden，子級(jí)一旦有添加visibility: visible的css，該子級(jí)將不會(huì)被隱藏。
( 二 ) display: none 和 opacity: 0的區(qū)別
1. 占據(jù)頁(yè)面空間( display: none 將元素隱藏后，在頁(yè)面是是不占有空間位置的，而opacity: 0 只是改變了元素的透明度將其隱藏，還保留著元素大小的空間位置 ) ；
2. display: none 不會(huì)被子類(lèi)繼承，但是子類(lèi)一樣不會(huì)顯示。 opacity: 0 會(huì)被子類(lèi)繼承，但不能像visibility的屬性一樣，給子類(lèi)添加opacity:1，并不能將子類(lèi)顯示。
3. css3 transition 屬性對(duì)display：none 并無(wú)效果，但對(duì)opacity 則有效果。（附加一句，對(duì)visibility: hidden也無(wú)效果）
