CSS中隱藏頁面元素的幾種方式和區(qū)別
點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
前言、
在平常的樣式排版中，我們經(jīng)常遇到將某個(gè)模塊隱藏的場(chǎng)景，通過css隱藏的元素方法有很多種，它們看起來實(shí)現(xiàn)的效果是一致的，但實(shí)際上每一種方法都有一絲輕微的不同，這些不同決定了在一些特定場(chǎng)合下使用哪一種方法。
實(shí)現(xiàn)方法綜合、
通過css實(shí)現(xiàn)隱藏元素方法有如下：
display：none visibility：hidden opacity：0 設(shè)置height、width模型屬性為0 position：absolute clip-path
方法一：display：none
display：none是通常最實(shí)用的隱藏元素的方法
.conceal?{
?? display：none
}
復(fù)制代碼
將元素設(shè)置的display：none，可以將元素在頁面中徹底消失。
此元素原本所占據(jù)的位置，會(huì)被其他元素占據(jù)，也就是說它會(huì)導(dǎo)致瀏覽器的重排的重繪
消失后，自身綁定的事件不會(huì)觸發(fā)，也不會(huì)有過渡效果
特點(diǎn)：**元素不可見，不占據(jù)空間，無法響應(yīng)點(diǎn)擊事件**
方法二：visibility：hidden
visibility：hidden也是非常常用的一種隱藏方式，但是跟display：none大有不同
visibility：hidden從頁面上來看僅僅是隱藏該元素，DOM結(jié)果依然會(huì)存在，只是處于一個(gè)不可見的狀態(tài)。不會(huì)發(fā)生重排，但是會(huì)發(fā)生重繪。
.conceal?{
?? visibility：hidden
?}
復(fù)制代碼
給人的效果是隱藏了，所以他的自身事件不會(huì)觸發(fā)。
特點(diǎn)：**元素不可見，占據(jù)空間，無法響應(yīng)點(diǎn)擊事件**
方法三: opacity：0
opacity屬性表示元素的透明度，將元素的透明度設(shè)置為0之后，在用戶的嚴(yán)重，元素也是可以達(dá)到隱藏效果的 該方法不常用，不會(huì)引發(fā)重排，一般情況下也會(huì)引發(fā)重繪
.conceal?{
?? opacity：0
}
復(fù)制代碼
它是存在于頁面之上的，所以他自身的事件仍然是可以觸發(fā)的，但被他遮擋的元素是不能觸發(fā)其他事件的
注意：其子元素不能設(shè)置opacity來達(dá)到顯示的效果
特點(diǎn)：**改變?cè)赝该鞫龋夭豢梢?，占?jù)頁面空間，可以響應(yīng)點(diǎn)點(diǎn)擊事件。**
方法四：設(shè)置height、width模型屬性為0
要用這種方法實(shí)現(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ù)制代碼
特點(diǎn):****元素不可見，不占據(jù)空間，無法響應(yīng)點(diǎn)擊事件
方法五：position：absolute
肯定看到這里會(huì)很驚訝為什么定位也能隱藏，其實(shí)我也是翻閱了一些資料之后才知道的，是將元素移出頁面，不可見，從而就達(dá)到了"隱藏效果"雖然用處也很多，但多數(shù)不是用于“隱藏”。
.conceal?{
???position:?absolute;
???top:?-9999px;
???left:?-9999px;
}
復(fù)制代碼
特點(diǎn):****元素不可見，不影響布局
方法六：clip-path
clip-path 通過裁剪的形式
.conceal?{
??clip-path:?polygon(0px?0px,0px?0px,0px?0px,0px?0px);
}
復(fù)制代碼
特點(diǎn):****元素不可見，占據(jù)空間，無法響應(yīng)點(diǎn)擊事件
總結(jié)：
最常用的還是方法一和方法二，其他的方式只能算是一種小妙招吧，很偏，因?yàn)樗鼈兊恼嬲猛静⒉皇怯糜陔[藏元素所以本人是不推薦使用它們的。
區(qū)別：
關(guān)于display: none、visibility: hidden、opacity: 0的區(qū)別，如下表所示：
| display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 頁面中 | 不存在 | 存在 | 存在 |
| 重排 | 會(huì) | 不會(huì) | 不會(huì) |
| 重繪 | 會(huì) | 會(huì) | 不一定 |
| 自身綁定事件 | 不觸發(fā) | 不觸發(fā) | 可觸發(fā) |
| transition | 不支持 | 支持 | 支持 |
| 子元素可復(fù)原 | 不能 | 能 | 不能 |
| 被遮擋的元素可觸發(fā)事件 | 能 | 能 | 不能 |
關(guān)于本文
作者：前端磊啊
來自：https://juejin.cn/post/7097143568086597645
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
