display: none、visibility: hidden与opacity: 0的区别

文章目录
1. display: none、visibility: hidden与opacity: 0的区别
2. 补充：其他隐藏元素的方法
1. display: none、visibility: hidden与opacity: 0的区别
display: none、visibility: hidden与opacity: 0都可以让元素隐藏，它们之间的区别见下表：

表格的解读：

display:none其实很好理解，只要记住设置该属性的元素并不会出现在渲染树中这一点就行了，那么其他的一些特性（行为）想想也知道了：肯定不占据页面空间、不可点击、子节点也不可修改、transition无效，这些其实都是废话，皮之不存，毛将焉附？
display:none属性的添加或去除，相当于在渲染树中增加或删除节点，这对整体页面的结构造成了巨大的影响，结构变了，那肯定得重新计算尺寸、然后再绘制，性能消耗当然大咯~
visibility: hidden只是将元素隐藏了而已，设置该属性的元素还是会出现在渲染树中，其子元素可以通过设置 visibility: visible显示出来。
visibility属性并不会改变页面元素的结构和尺寸，所以只需重新绘制一下即可，性能消耗较小。
opacity: 0只是让元素的透明度变0，它还是存在于渲染树中，并且占据中间、可点击触发事件。
opacity也不对元素的结构和尺寸造成影响，所以只需重新绘制一下即可，性能消耗也较小。
2. 补充：其他隐藏元素的方法
设置position属性值为fixed(absolute、relative)并设置足够大负距离left、top使其“隐藏”；
用层叠关系z-index将元素置于最底层；
设置hight: 0，同时overflow: hidden；
text-indent: -9999px使文字隐藏。
本文参考整理自：
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景