display:none、visibility:hidden 和 opacity:0 之间的区别？

三者共同点都是隐藏。不同点：
一，是否占据空间
display:none,隐藏之后不占位置；
二，子元素是否继承
display:none — 不会被子元素继承，父元素都不存在了，子元素也不会显示出。
visibility:hidden—会被子元素继承，通过设置子元素visibility:visible来显示子元素。
opacity:0—会被子元素继承，但是不能设置子元素opacity:0来重新显示。
三，事件绑定
display:none的元素都已经不再页面存在了，因此无法触发它绑定的事件。
visibility:hidden 不会触发它上面绑定的事件。
opacity:0元素上面绑定的时间是可以触发的。
四，过渡动画
transition对于display是无效的。
transition对于visibility是无效的。
transition对于opacity是有效的。