通過(guò)css實(shí)現(xiàn)隱藏元素方法有如下：

• display:none

• visibility:hidden

• opacity:0

• 設(shè)置height、width模型屬性為0

• position:absolute

• clip-path

display:none

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

將元素設(shè)置為display:none后，元素在頁(yè)面上將徹底消失

元素本身占有的空間就會(huì)被其他元素占有，也就是說(shuō)它會(huì)導(dǎo)致瀏覽器的重排和重繪

消失后，自身綁定的事件不會(huì)觸發(fā)，也不會(huì)有過(guò)渡效果

特點(diǎn)：元素不可見(jiàn)，不占據(jù)空間，無(wú)法響應(yīng)點(diǎn)擊事件

visibility:hidden

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

從頁(yè)面上僅僅是隱藏該元素，DOM結(jié)果均會(huì)存在，只是當(dāng)時(shí)在一個(gè)不可見(jiàn)的狀態(tài)，不會(huì)觸發(fā)重排，但是會(huì)觸發(fā)重繪

給人的效果是隱藏了，所以他自身的事件不會(huì)觸發(fā)

特點(diǎn)：元素不可見(jiàn)，占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件

opacity:0

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

不會(huì)引發(fā)重排，一般情況下也會(huì)引發(fā)重繪

如果利用 animation 動(dòng)畫(huà)，對(duì) opacity 做變化（animation會(huì)默認(rèn)觸發(fā)GPU加速），則只會(huì)觸發(fā) GPU 層面的 composite，不會(huì)觸發(fā)重繪

由于其仍然是存在于頁(yè)面上的，所以他自身的的事件仍然是可以觸發(fā)的，但被他遮擋的元素是不能觸發(fā)其事件的

需要注意的是：其子元素不能設(shè)置opacity來(lái)達(dá)到顯示的效果

特點(diǎn)：改變?cè)赝该鞫龋夭豢梢?jiàn)，占據(jù)頁(yè)面空間，可以響應(yīng)點(diǎn)擊事件

設(shè)置height、width屬性為0

將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來(lái)隱藏其子元素

特點(diǎn)：元素不可見(jiàn)，不占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件

position:absolute

將元素移出可視區(qū)域

特點(diǎn)：元素不可見(jiàn)，不影響頁(yè)面布局

clip-path

通過(guò)裁剪的形式

特點(diǎn)：元素不可見(jiàn)，占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件

小結(jié)

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

區(qū)別

關(guān)于display: none、visibility: hidden、opacity: 0的區(qū)別，如下表所示：