使用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也無效果）

言

2021 年最后一天，疫情還沒有完全結束，武漢市政府也取消了跨年活動。今晚，就連地鐵都提前到 9 點關閉，大家都在家里跨年。這不，我也在家里跨年。不過我并沒有看晚會，而是整理了一篇前端小技巧，算是給自己 2021年一個小小的總結。

正文

用 CSS 隱藏元素有很多種方法，這里介紹 3 種常見的。

opacity: 0

特點是【看不見，占空間，摸得著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

visibility: hidden

特點是【看不見，占空間，摸不著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

display: none

特點是【看不見，不占空間，摸不著】

元素隱藏
改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

接下來，我們來編寫代碼驗證一下。首先寫入三個方塊，對中間的橙色方塊添加點擊事件。代碼及頁面效果如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

opacity: 0

對中間橙色方塊添加 opacity: 0 樣式，代碼及效果如下：

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .opacity {opacity: 0}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange opacity' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

visibility: hidden

對中間橙色方塊添加 visibility: hidden 樣式，代碼及效果如下：

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .visibility {visibility: hidden}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange visibility' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

display: none

對中間橙色方塊添加 display: none 樣式，代碼及效果如下：

元素隱藏
改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .display {display: none}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange display' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

結尾

本人 2021 年度成就總結：

學術方面，憑借個人努力，在核酸檢測領域產出多份數據真實詳盡的報告。
健康方面，保證膳食纖維攝入，具體表現為每日堅持吃瓜，吃好瓜，吃大瓜。
商業方面，與各大平臺合作，全面參與投資 618、雙 11、雙 12 等千億級重大項目。
環保方面，股票基金一片綠，綠水青山就是金山銀山。在廢物利用領域更是成績斐然：自己作為廢物，常常被別人利用。
運動方面，專注于水上項目，在摸魚、劃水等小項上有突出表現。

最后，祝大家元旦快樂～

在線咨詢

上一篇：學習HTML5的五個原因
下一篇：HTML 布局

您的項目需求

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

整合營銷服務商

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

言

方法1-display:none

方法2-visibility: hidden

方法3-opacity:0

差異性-頁面布局

差異性-事件綁定

差異性-動畫屬性

結束語

言

正文

opacity: 0

visibility: hidden

display: none

opacity: 0

visibility: hidden

display: none

結尾

您的項目需求