CSS中隱藏頁面元素的幾種方式和區(qū)別
大廠技術(shù)??高級前端??Node進階
點擊上方?程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群
前言、
在平常的樣式排版中，我們經(jīng)常遇到將某個模塊隱藏的場景，通過css隱藏的元素方法有很多種，它們看起來實現(xiàn)的效果是一致的，但實際上每一種方法都有一絲輕微的不同，這些不同決定了在一些特定場合下使用哪一種方法。
實現(xiàn)方法綜合、
通過css實現(xiàn)隱藏元素方法有如下：
display：none visibility：hidden opacity：0 設(shè)置height、width模型屬性為0 position：absolute clip-path
方法一：display：none
display：none是通常最實用的隱藏元素的方法
.conceal?{
?? display：none
}
復(fù)制代碼
將元素設(shè)置的display：none，可以將元素在頁面中徹底消失。
此元素原本所占據(jù)的位置，會被其他元素占據(jù)，也就是說它會導(dǎo)致瀏覽器的重排的重繪
消失后，自身綁定的事件不會觸發(fā)，也不會有過渡效果
特點：**元素不可見，不占據(jù)空間，無法響應(yīng)點擊事件**
方法二：visibility：hidden
visibility：hidden也是非常常用的一種隱藏方式，但是跟display：none大有不同
visibility：hidden從頁面上來看僅僅是隱藏該元素，DOM結(jié)果依然會存在，只是處于一個不可見的狀態(tài)。不會發(fā)生重排，但是會發(fā)生重繪。
.conceal?{
?? visibility：hidden
?}
復(fù)制代碼
給人的效果是隱藏了，所以他的自身事件不會觸發(fā)。
特點：**元素不可見，占據(jù)空間，無法響應(yīng)點擊事件**
方法三: opacity：0
opacity屬性表示元素的透明度，將元素的透明度設(shè)置為0之后，在用戶的嚴重，元素也是可以達到隱藏效果的 該方法不常用，不會引發(fā)重排，一般情況下也會引發(fā)重繪
.conceal?{
?? opacity：0
}
復(fù)制代碼
它是存在于頁面之上的，所以他自身的事件仍然是可以觸發(fā)的，但被他遮擋的元素是不能觸發(fā)其他事件的
注意：其子元素不能設(shè)置opacity來達到顯示的效果
特點：**改變元素透明度，元素不可見，占據(jù)頁面空間，可以響應(yīng)點點擊事件。**
方法四：設(shè)置height、width模型屬性為0
要用這種方法實現(xiàn)隱藏需將元素的margin、border、padding、height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素的內(nèi)容，還要設(shè)置其overflow：hidden 來隱藏子元素
.conceal?{
????margin:0;?????
????border:0;
????padding:0;
????height:0;
????width:0;
????overflow:hidden;
}
復(fù)制代碼
特點:****元素不可見，不占據(jù)空間，無法響應(yīng)點擊事件
方法五：position：absolute
肯定看到這里會很驚訝為什么定位也能隱藏，其實我也是翻閱了一些資料之后才知道的，是將元素移出頁面，不可見，從而就達到了"隱藏效果"雖然用處也很多，但多數(shù)不是用于“隱藏”。
.conceal?{
???position:?absolute;
???top:?-9999px;
???left:?-9999px;
}
復(fù)制代碼
特點:****元素不可見，不影響布局
方法六：clip-path
clip-path 通過裁剪的形式
.conceal?{
??clip-path:?polygon(0px?0px,0px?0px,0px?0px,0px?0px);
}
復(fù)制代碼
特點:****元素不可見，占據(jù)空間，無法響應(yīng)點擊事件
總結(jié)：
最常用的還是方法一和方法二，其他的方式只能算是一種小妙招吧，很偏，因為它們的真正用途并不是用于隱藏元素所以本人是不推薦使用它們的。
區(qū)別：
關(guān)于display: none、visibility: hidden、opacity: 0的區(qū)別，如下表所示：
| display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 頁面中 | 不存在 | 存在 | 存在 |
| 重排 | 會 | 不會 | 不會 |
| 重繪 | 會 | 會 | 不一定 |
| 自身綁定事件 | 不觸發(fā) | 不觸發(fā) | 可觸發(fā) |
| transition | 不支持 | 支持 | 支持 |
| 子元素可復(fù)原 | 不能 | 能 | 不能 |
| 被遮擋的元素可觸發(fā)事件 | 能 | 能 | 不能 |
關(guān)于本文
作者：前端磊啊
來自：https://juejin.cn/post/7097143568086597645
Node 社群
我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學習感興趣的話（后續(xù)有計劃也可以），我們可以一起進行Node.js相關(guān)的交流、學習、共建。下方加 考拉 好友回復(fù)「Node」即可。
如果你覺得這篇內(nèi)容對你有幫助，我想請你幫我2個小忙：
1. 點個「在看」，讓更多人也能看到這篇文章 2. 訂閱官方博客?www.inode.club?讓我們一起成長 點贊和在看就是最大的支持