CSS隐藏頁面上元素的三種方法 opacity display visibility 優劣使用場景

display:none

結構 : 會讓元素完全從渲染樹中消失 渲染的時候不占據任何空間 不能點選

繼承 : 是非繼承屬性 子孫節點消失由于元素從渲染樹消失造成 改子孫節點屬性無法顯示

性能 : 修改元素會造成文檔回流 讀屏器不會讀取display:none元素内容 性能消耗較大

場景 : 顯示出原來這裡不存在的結構

transition : 不支援display

舉例 : 從這個世界消失來 不存在了

visibility:hidden

結構 : 不會讓元素從渲染樹消失 渲染元素繼續占據空間 隻是内容不可見 不能點選

繼承 : 是繼承屬性 子孫節點消失由于繼承了 hidden 通過設定 visible可以讓子孫節點顯示

性能 : 修改元素隻會造成成本元素的重繪 性能消耗較少 讀屏器讀取visibility:hidden 元素内容

場景 : 顯示不會導緻頁面結構發生變動 不會撐開

transition : 支援visibility 會立即顯示 隐藏時會延時

舉例 : 視覺和實體上都隐身了 看不見 摸不到 但是存在

opacity:0

結構 : 不會讓元素從渲染樹消失 渲染元素繼續占據空間 隻是内容不可見 可以點選

繼承 : 會被子元素繼承 且子元素并不能通過 opacity 來取消隐藏

性能 : 提升為合成層 不會觸發重繪 性能消耗較少

場景 : 可以跟transition搭配 自定義圖檔上傳按鈕

transition : 支援opacity 可以延時顯示和隐藏

舉例 : 視覺上隐身了 看不見 但可以觸摸到