在平常的樣式排版中，我們經常遇到將某個模塊隱藏，下面我整理了一下隱藏元素的多種方法以及對比（有的占據空間，有的不占據空間。有的可以點擊，有的不能點擊。）：

( 一 ) display: none;

　　特點：元素不可見，不占據空間，無法響應點擊事件。

.hide{
    display: none;  
}

( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）

　　特點：改變元素透明度，元素不可見，占據頁面空間，可以響應點擊事件。

.hide{
    opacity: 0;
    filter:Alpha(opacity=0);    
}

( 三 ) visibility: hidden;

　　特點：元素不可見，占據頁面空間，無法響應點擊事件。

.hide{
    visibility: hidden;
}

( 四 ) transform: scale(0);

　　( 1 ) zoom: 0.1; transform: scale(0);

　　　　特點：元素不可見，IE 6 7 9 不占據頁面空間，IE8 谷歌 火狐 歐朋 等瀏覽器占據空間，無法響應點擊事件。

.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);

　　　　特點：元素不可見，不占據頁面空間，無法響應點擊事件。

.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;

　　特點：元素不可見，不占據頁面空間，無法響應點擊事件。但 padding值 和 margin值 依然存在，需要將內外邊距都調整為0。

.hide{
   display: inline-block;
   width: 0;
   height: 0;
   padding: 0;
   margin: 0;
   overflow: hidden;  
}

( 六 ) position: absolute; left: -200%; 或者 top: -200%；等，父級需要相對定位，這種left top值可以根據具體的實際情況去定義

　　特點：元素不可見，不占據頁面空間，無法響應點擊事件。

. father{
    position: relative;
    overflow: hidden;
}
.hide{
    position: absolute;
    left: -200%;//或top: -200%;  
}

( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)

　　特點：元素不可見，占據頁面空間，無法響應點擊事件。

.hide{
    float: left;
    width: 150px;
    margin: 20px;
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);  
}

( 八 ) margin: top | right | bottom | left ;父級添加overflow: hidden; (margin的值 一定要小於（子級的寬度加上邊距的總和的負數）)

　　特點：元素不可見，不占據頁面空間，無法響應點擊事件。

.father{
    width: 400px;
    height: 400px;
    overflow: hidden;

}
.hide{
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-left: -200px;
}

以上就是幾種隱藏元素的方法，我在以前的面試中，也碰到了面試官提出的一些關於隱藏元素css的對比，查閱了一些資料，做了以下整理：

　　( 一 ) display: none 和 visibility: hidden 的區別

　　　　1. 占據頁面空間( display: none 將元素隱藏後，在頁面是是不占有空間位置的，而visibility: hidden 將元素隱藏後，還保留著元素大小的空間位置 ) ；

　　　　2. display: none 影響了 reflow和repaint(回流與重繪)，而visibility: hidden並沒有影響

　　　　3. 某個模塊添加了display: none; 它下面的任何子級都會被隱藏，而添加了visibility: hidden，子級一旦有添加visibility: visible的css，該子級將不會被隱藏。

　　( 二 ) display: none 和 opacity: 0的區別

　　　　1. 占據頁面空間( display: none 將元素隱藏後，在頁面是是不占有空間位置的，而opacity: 0 只是改變了元素的透明度將其隱藏，還保留著元素大小的空間位置 ) ；

　　　　2. display: none 不會被子類繼承，但是子類一樣不會顯示。 opacity: 0 會被子類繼承，但不能像visibility的屬性一樣，給子類添加opacity:1，並不能將子類顯示。

　　　　3. css3 transition 屬性對display：none 並無效果，但對opacity 則有效果。（附加一句，對visibility: hidden也無效果）

css隱藏頁面元素的多種方法