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

共同点

都是隐藏

display: none 隐藏后，不占位置

visibility: hidden: 隐藏后，仍然占据位置

opacity: 0: 隐藏后，仍然占据位置

display: none: 不会被子元素继承，父元素都不存在了，子元素也不会显示出来

visibility: hidden: 会被子元素继承，通过设置子元素visibility: visible来显示子元素

opacity: 0: 会被子元素继承，但不能设置子元素的opacity来显示子元素

display: none: 隐藏后，DOM元素都不存在了，所以无法触发绑定事件

visibility: hidden: 虽然元素仍然占据位置，但是无法触发绑定事件

opacity: 0: 可以触发绑定事件

display: none: 无效

visibility: hidden: 无效

opacity: 0: 有效