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常用和可以使用的隐藏方法，大家可以结合实际情况使用，基于测试条件有限，有可能有偏差，希望大家指正共同探讨，谢谢！

 

 

工作累了吧，可以关注公众号，看看轻松的文章，放松一下。再忙，也该有自己的生活，一定要爱惜身体！