display: none、visibility: hidden 和 opacity: 0 之间的区别
共同点
都是隐藏
不同点
1. 是否占据空间
display: none隐藏后，不占位置
visibility: hidden: 隐藏后，仍然占据位置
opacity: 0: 隐藏后，仍然占据位置
2. 子元素是否继承
display: none: 不会被子元素继承，父元素都不存在了，子元素也不会显示出来
visibility: hidden: 会被子元素继承，通过设置子元素visibility: visible来显示子元素
opacity: 0: 会被子元素继承，但不能设置子元素的opacity来显示子元素
3. 事件绑定
display: none: 隐藏后，DOM元素都不存在了，所以无法触发绑定事件
visibility: hidden: 虽然元素仍然占据位置，但是无法触发绑定事件
opacity: 0: 可以触发绑定事件
4. 过渡动画 transition
display: none: 无效
visibility: hidden: 无效
opacity: 0: 有效