display：none、visiblity: hidden、opacity: 0区别

display：none、visiblity: hidden、opacity: 0均是用来隐藏元素的。

1、display: none。

DOM结构：被设置了display:none的元素浏览器不会渲染该元素在页面中，也根本不会占据位置；

事件：无法进行事件监听，点击事件没有生效；

性能：通过js无法获取到该元素身上的一些属性，并且通过动态的改变的display属性，会让页面反复渲染，引起页面重排，性能较差;

继承：不会被子类继承，因为自己没被渲染;

transition: 不支持;

如图：

2、 visibility：hidden

DOM结构：被设置了 visibility：hidden的元素浏览器会渲染该元素在页面中，但是被隐藏，也就是说依旧占据位置；

事件：无法进行事件监听，点击事件没有生效；

性能：动态的改变的visibility属性，不会让页面反复渲染该元素，发生的是重绘，性能较好;

继承：会被子类继承，子类要想显示可以给子类添加visibility：visible。

transition: 快速显示，过渡慢慢消失

 

3、opacity：0

DOM结构：被设置了 opacity：0的元素浏览器会该元素渲染在页面中，但是被隐藏，因为透明度为0，也就是说依旧占据位置；

事件：可以进行事件监听；

性能：动态的改变的opacity属性，不会重排重绘，性能较好;

继承：会被子类继承，但子类并不能添加opacity：1来显示；

transition: 过渡可以生效；