CSS中幾種元素隐藏及應用場景

之前寫了一篇關于display和visibility隐藏的差別，其實CSS還有很多隐藏元素的方式，本篇就小總結一下，順便說說應用場景；

一、display

顯隐界的一把手，出場率最高，上一篇已經提到過了。

特性：完全隐藏元素，不存在于渲染樹中，js無法擷取元素的寬高等資訊，就是徹底的“消失”，幹淨利落。

問題：完全的消失，導緻出現時，發生重排，重繪，影響性能；頁面會抖動，尤其元素較為複雜時，抖動更明顯，echarts的加載展現最明顯，擠成一團；transition過渡屬性不支援。

場景：對于顯隐要求及頁面布局比較苛刻，必須消失，隻有display能勝任的場景使用。

二、visibility

二把手，解決很多問題

特性：視覺和圖層隐藏，實際元素存在于渲染樹，js可擷取元素寬高；隐藏不影響其他元素及事件；transition屬性支援，可延遲顯示；顯示時不會發生重排，僅重繪，頁面不會抖動；

問題：如上所述，如果沒有脫離文檔流，頁面會出現一塊空白；僅延遲出現，不能延遲出現的過程；

場景：下拉菜單，頁面加載動畫的切換，絕對定位及脫離文檔流元素的顯隐場景，另外配合opacity屬性可以實作淡入淡出效果。

三、opacity

CSS3的新秀，解決透明度問題

特性：視覺隐藏，僅元素顔色變為透明，元素圖層不會改變，js可擷取元素寬高；顯示時僅重繪；transition屬性支援，可延遲出現過程；

問題：CSS3屬性，有相容性問題，且由于圖層不隐藏，會影響其他元素及事件，發生“遮蓋問題”（脫離文檔流覆寫在其他元素上尤其明顯）；

場景：相容性要求不高時，非脫離文檔流元素，或者不會與其他元素發生重疊時可以使用，與visibility配合可解決“遮蓋問題”實作淡入淡出效果。 

四、clip

裁剪，區域内看不見

特性：rect(0 0 0 0)時，對應元素完全看不見，圖層視覺均被裁剪，不影響其他元素及事件；

問題：必須絕對定位才能生效，并且隻能通過js來實作顯隐的切換，因為需要設定和取消clip屬性或相關的類樣式，而不是切換值。transition不支援；另外測試時，發現有重排出現，不知道是不是測試的問題。

場景：元素本來就是絕對定位，且需要js操作，可以采用此方法。

五、z-index

圖層級别控制大師之一

特性：調整圖層層疊級别，可以設定-1值，将圖層設定為最底層實作隐藏（實際是被父級遮蓋了），切換時，不重排也不重繪，不影響其他元素及事件；

問題：必須定位才生效，并且父級要有無透明度設定的背景，否則無效果；

場景：目前元素有定位屬性，并且其父級也有背景色，可考慮使用，否則還是不要給自己找麻煩。

以上為CSS常用和可以使用的隐藏方法，大家可以結合實際情況使用，基于測試條件有限，有可能有偏差，希望大家指正共同探讨，謝謝！

工作累了吧，可以關注公衆号，看看輕松的文章，放松一下。再忙，也該有自己的生活，一定要愛惜身體！