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

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

display: none、visibility: hidden与opacity: 0都可以让元素隐藏，它们之间的区别见下表：

特性（行为）	display: none	visibility: hidden	opacity: 0
在渲染树中	否	是	是
占据空间	否	是	是
可点击	否	否	是
子节点可修改	否	是	否
transition	无效	无效	有效
性能	导致回流，性能消耗大	导致重绘，性能消耗较小	导致重绘，性能消耗较小

表格的解读：

1. display:none其实很好理解，只要记住设置该属性的元素并不会出现在渲染树中这一点就行了，那么其他的一些特性（行为）想想也知道了：肯定不占据页面空间、不可点击、子节点也不可修改、transition无效，这些其实都是废话，皮之不存，毛将焉附？
   display:none属性的添加或去除，相当于在渲染树中增加或删除节点，这对整体页面的结构造成了巨大的影响，结构变了，那肯定得重新计算尺寸、然后再绘制，性能消耗当然大咯~
2. visibility: hidden只是将元素隐藏了而已，设置该属性的元素还是会出现在渲染树中，其子元素可以通过设置 visibility: visible显示出来。
   visibility属性并不会改变页面元素的结构和尺寸，所以只需重新绘制一下即可，性能消耗较小。
3. opacity: 0只是让元素的透明度变0，它还是存在于渲染树中，并且占据中间、可点击触发事件。
   opacity也不对元素的结构和尺寸造成影响，所以只需重新绘制一下即可，性能消耗也较小。

2. 补充：其他隐藏元素的方法

1. 设置position属性值为fixed(absolute、relative)并设置足够大负距离left、top使其“隐藏”；
2. 用层叠关系z-index将元素置于最底层；
3. 设置hight: 0，同时overflow: hidden；
4. text-indent: -9999px使文字隐藏。

本文参考整理自：
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景