使用CSS隱藏頁面元素的幾種方法，你知道它們的具體區別嗎？

言

一說起隱藏HTML頁面上的元素，很多人第一反應就是設置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區別。

本篇文章中的例子直接放到github地址中，感興趣的同學可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文說的一樣，最簡單也最粗暴的方法就是設置元素的display屬性為none;

display:none;

設置為display:none;的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。

方法2-visibility: hidden

另外一種方法是設置元素的visibility屬性為hidden。

visibility: hidden

這種做法雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導致瀏覽器的重匯而不會引起重排。

如果希望元素隱藏后不會引起頁面布局的變化，則推薦使用visibility:hidden;方式。

方法3-opacity:0

設置元素透明度opacity屬性為0，也可以隱藏頁面元素。

opacity:0

在呈現上與visibility:hidden;方式一樣，同樣會占據頁面空間。

差異性-頁面布局

對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應的差異如下圖所示。

頁面布局差異

差異性-事件綁定

display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發綁定的事件。
opacity:0; 的元素會觸發綁定的事件，例如點擊會觸發click函數。

我們可以通過以下的例子來看看。

首先我們定義兩個div，分別設置為visibility: hidden;和opacity:0，在兩個div上分別綁定一個click事件。

定義div元素

綁定的事件

當我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結果。

結果

從上述結果可以看出和上述結論一致。

差異性-動畫屬性

display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設置的時間內消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。

同樣我們可以通過以下這個例子來看看。

首先，我們定義兩個div，并設置其transition屬性。

div元素

定義transition效果

我們通過將鼠標移至元素上，可以看到兩者的差異，從而驗證了上述結論的正確性。

結束語

本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區別，以便大家在特定的場景中進行選擇。

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

( 一 ) 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也無效果）

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

2012年，path首先使用了漢堡菜單作為產品的導航方式來替代原本的標簽頁的導航方式。一時引起了各大廠商的跟風，Youtube、facebook等App都紛紛把自己的導航改成了抽屜式導航。但由于沒有統一的規范，各個產品的抽屜導航設計也各不相同，為了控制Android平臺日益混亂的抽屜交互方式，2013 Google I/O大會之后，Google將Navigation Drawer納入了Android Design規范當中，隨后大量應用開始采用這種交互模式【1】。

不過慢慢的，包括youtube和facebook在內的很多app都將抽屜式導航換回了原來的標簽頁導航，從此，對于抽屜式導航的爭辯就一直沒有斷過。并且慢慢的，對于抽屜式導航的批評漸漸多于肯定【2】。我摘取其中的兩則批評如下。

...上圖的 APP 將選項卡（tab row）變成抽屜式導航菜單（drawer menu），用戶在相應功能間的切換率急劇下降。...很多用戶還沒有建立起相應的心理模型（尤其是抽屜式或者漢堡包菜單）盡量將 APP 的核心功能放在用戶可以看得到地方。
——能露出來，就別藏著

觸摸操作中，手勢永遠要比點擊優先級低?，F代觸摸操作習慣畢竟只流行了幾年，然而傳統PC上的操作習慣已經實行了將近20年。所以通過滑動來切換Tab不會比點擊切換來的直觀。
——石頭們

總結一下，對于抽屜式導航的批評主要有如下幾點：

1. 可見性不好：

首先抽屜式導航的入口是三條杠，對于部分用戶來說，他們并不能準確知道這三條杠可以呼出抽屜式導航；
抽屜式導航畢竟是隱藏起來的，沒有現有標簽式導航來的明顯。

2. 操作復雜。抽屜式導航的切換可以直接點擊，如果Tab放在上方可以直接滑動切換。但是抽屜式導航的切換就要先呼出側邊欄，然后再點擊，相對比而言，操作更加繁瑣。

3. 與現有的交互方式沖突。抽屜式導航可以從屏幕左邊緣向右滑動喚出，與iOS的后退操作沖突。但是這本來就是Android的設計規范，并不一定適用于iOS，所以我覺得的這個批評不成立。

但是，正如那句老話“垃圾是放錯地方的資源”，我始終相信，沒有不好的交互設計，只有不適合產品使用場景的交互設計。所以抽屜式導航也是有它的正確使用方法的。

首先關于這個入口的問題，我覺得暫時是無解的，但是這是可以通過長期的用戶教育來實現的。正如現在的開關鍵（一個圓圈加一條杠），這個設計其實并不能一目了然地讓人知道這是開關鍵，但是經過長期的使用，現在大部分人都會知道這是開關鍵。所以，這個問題就只能交給時間來解決了。

但是除此之外，上面的批評1，2總結一下就是切換麻煩（批評3不太站得住腳）。只是，如果產品的導航不需要頻繁切換呢？如果有其他的切換入口呢？那么問題就迎刃而解了。那么有沒有產品是這樣的呢？答案是：當然有。下面我就結合一些例子來講講抽屜式導航的正確使用方式。

1. 導航模塊有主次

抽屜式導航的使用場景首先一點是：導航的模塊是有主次之分的。相對比于常用的標簽式導航而言，抽屜式導航的模塊之間主次區分更加明顯。

當啟動應用時，標簽式導航的每個模塊入口都是可見的。
標簽式導航的模塊切換非常容易，通常是點擊（底部Tab）或者滑動操作。
當進入某個模塊時，其他模塊的入口依舊清晰可見。

基于以上三點，標簽式導航模塊之間的區分不是特別大。

但是對于抽屜式導航而言，以上三點都不成立。所以，相對而言，抽屜式導航的第一個模塊的重要程度要遠遠大于其他的模塊。也就是說，當不同導航模塊之間存在明顯的主次之分時，才可以考慮使用抽屜式導航。

舉個例子，豆瓣一刻的導航模塊如下：

一刻的導航

如上圖，因為豆瓣一刻的資訊都是嚴格按照每天為單位的，一刻的目的也是希望你當天閱讀完當天的內容。所以，一刻的核心使用場景是當日事當日畢，當天的內容（即“今日一刻”模塊）的優先級遠遠大于其他模塊。其他模塊是為次要場景設計的，即使滲透率不高，對于產品的影響也不大。

2、次要模塊可以有快捷入口

對于次要的模塊，我們并不需要嚴格保證模塊的滲透率。但是，假如我們可以提高次要模塊的滲透率，又何樂而不為呢？既然抽屜式導航的可見性不高，操作繁瑣，那為什么不可以另辟蹊徑？設置一個可以見高，操作便捷的入口呢？答案當然是肯定的。

對于豆瓣一刻來說，模塊之間的優先級如下：今日一刻>往期內容>熱門作者、欄目瀏覽、我的喜歡。所以，往期內容模塊的使用場景是僅次于今日一刻模塊，但是又遠遠高于其他模塊。所以，針對這個模塊，可以設置更加便捷的快捷入口。豆瓣一刻的處理方式如下圖：

次要內容快捷入口

在每日一刻內容列表的最下方設置了一個按鈕，作為往期內容模塊的快捷入口。這樣的快捷入口，一方面不會干擾最主要的內容，因為它設置在頁面最后面。另一方面，當用戶閱讀到最后的時候，假如用戶還有強烈的閱讀愿望，那么這個入口簡直就是沙漠中的甘泉。

最最巧妙的一點，為什么這里不用上拉刷新而是使用按鈕呢？因為上拉刷新的內容往往是銜接在當前頁面下的，同時上拉刷新的操作成本很低。但是，往期內容模塊與今日一刻的區分度又比較大，銜接在當前頁面下并不合適，操作太便利的話又顯示不出模塊之間的區分度。所以，這里采用按鈕而不是上拉刷新。

3、應用首次啟動進行引導

當然，為了解決可見性的問題，還需要在首次啟動應用的時候進行引導。對于抽屜式導航的引導，有兩種方式：

啟動應用自動打開導航；
指引用戶點擊漢堡菜單按鈕，然后再彈出導航。

兩種引導各有利弊，當然好處就是都可以起到引導作用。而壞處來說：

第一種方法的壞處是：即使使用動畫引導，引導的效果還是不如第二種，畢竟第二種用戶是親手打開導航的；
第二種的壞處就是：它需要強迫用戶先完成這個操作，然后才能進行其他操作。

相對而言，這種脅迫會對用戶的控制欲造成一些傷害，用戶體驗會打一點折扣。

自動打開指引

浮層指引

4、善用小紅點

最后一個方法也是為了解決可見性不高的問題，就是利用讓人又愛又恨的小紅點，英文名稱叫Badge Notification。小紅點有兩種形式：一種是帶數字的，另一種是不帶數字。帶數字的一般是跟消息有關系，比如還有兩條消息未處理，那么小紅點就會顯示一個“2”；不帶數字的一般就是引導作用，告訴用戶這里有東西需要你查看。

普通小紅點

帶數字的小紅點

由于小紅點對于用戶來說確實體驗不太好，很多人都會有強烈的強迫癥要消滅這些小紅點。所以，針對用戶的這種心理，小紅點反而成為了產品的一種非常高效、簡潔的引導方式。

不過，有句話要說的是：小紅點雖好，可不要貪杯喲。適當適量的引導可以處于一種“既觸發了用戶的強迫癥又避免讓用戶厭惡”的狀態。如果一旦超過這個度，產品就有可能會被拋棄，所以謹慎使用小紅點。

再次重復一下那句話，垃圾是放錯地方的資源。沒有錯誤的控件，只有使用不當的控件。所以與其指責抽屜式導航的種種錯誤，不如找一個恰當的場景去承載它，讓它發揮自己的閃光之處。以上就是我對于抽屜式導航使用的一些心得。

【1】交互設計新手必看！探秘抽屜導航的前生今世 http://www.woshipm.com/ucd/92222.html

【2】哪些因素阻礙國內 BAT 的移動應用采用 Material Design？-Kenny MacCormick的回答-知乎 https://www.zhihu.com/question/37376355/answer/71940532

本文由 @Autumn阿秋原創發布于人人都是產品經理，未經許可，禁止轉載。

在線咨詢

上一篇：css3實現循環執行動畫，且動畫每次都有延遲
下一篇：深入剖析一場針對法國工業領域的網絡釣魚活動

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用CSS隱藏頁面元素的幾種方法，你知道它們的具體區別嗎？

言

方法1-display:none

方法2-visibility: hidden

方法3-opacity:0

差異性-頁面布局

差異性-事件綁定

差異性-動畫屬性

結束語

1. 導航模塊有主次

2、次要模塊可以有快捷入口

3、應用首次啟動進行引導

4、善用小紅點

您的項目需求

使用CSS隱藏頁面元素的幾種方法，你知道它們的具體區別嗎？

2、次要模塊可以有快捷入口

3、應用首次啟動進行引導

4、善用小紅點