編碼的世界 / 優質文選 / 生涯

面試官：CSS中，有哪些方式可以隱藏頁面元素？區別?

2022年4月21日
-

一、前言

在平常的樣式排版中，我們經常遇到將某個模塊隱藏的場景
通過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的區別，如下表所示：

	display: none	visibility: hidden	opacity: 0
頁面中	不存在	存在	存在
重排	會	不會	不會
重繪	會	會	不一定
自身綁定事件	不觸發	不觸發	可觸發
transition	不支持	支持	支持
子元素可複原	不能	能	不能
被遮擋的元素可觸發事件	能	能	不能

參考文獻

https://www.cnblogs.com/a-cat/p/9039962.html

The End
系列正在更新：5/20
點擊下方卡片解鎖更多