隱藏頁面元素 css

• 2021 年 4 月 2 日
• 筆記
• CSS

一、前言

在平常的樣式排版中，我們經常遇到將某個模組隱藏的場景

通過css隱藏元素的方法有很多種，它們看起來實現的效果是一致的

但實際上每一種方法都有一絲輕微的不同，這些不同決定了在一些特定場合下使用哪一種方法

二、實現方式

通過css實現隱藏元素方法有如下：

• display:none
• visibility:hidden
• opacity:0
• 設置height、width模型屬性為0
• position:absolute
• clip-path

display:none

設置元素的display為none是最常用的隱藏元素的方法

.hide {
    display:none;
}

將元素設置為display:none後，元素在頁面上將徹底消失

元素本身佔有的空間就會被其他元素佔有，也就是說它會導致瀏覽器的重排和重繪

消失後，自身綁定的事件不會觸發，也不會有過渡效果

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

visibility:hidden

設置元素的visibility為hidden也是一種常用的隱藏元素的方法

從頁面上僅僅是隱藏該元素，DOM結果均會存在，只是當時在一個不可見的狀態，不會觸發重排，但是會觸發重繪

.hidden{
    visibility:hidden
}

給人的效果是隱藏了，所以他自身的事件不會觸發

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

opacity:0

opacity屬性表示元素的透明度，將元素的透明度設置為0後，在我們用戶眼中，元素也是隱藏的

不會引發重排，一般情況下也會引發重繪

❝

如果利用 animation 動畫，對 opacity 做變化（animation會默認觸發GPU加速），則只會觸發 GPU 層面的 composite，不會觸發重繪

❞

.transparent {
    opacity:0;
}

由於其仍然是存在於頁面上的，所以他自身的的事件仍然是可以觸發的，但被他遮擋的元素是不能觸發其事件的

需要注意的是：其子元素不能設置opacity來達到顯示的效果

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

設置height、width屬性為0

將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素

.hiddenBox {
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

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

position:absolute

將元素移出可視區域

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

特點：元素不可見，不影響頁面布局

clip-path

通過裁剪的形式

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

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

小結

最常用的還是display:none和visibility:hidden，其他的方式只能認為是奇招，它們的真正用途並不是用於隱藏元素，所以並不推薦使用它們

三、區別

關於display: none、visibility: hidden、opacity: 0的區別，如下表所示：

參考文獻

• //www.cnblogs.com/a-cat/p/9039962.html