display: none、visibility: hidden 与 opacity: 0 是我们常用来隐藏元素的几种方法，那么它们之间有什么区别呢？

区别

  1. 设置了 display: none 的元素不会被渲染在页面中，不影响页面其他元素的布局；而设置了visibility: hidden 和 opacity: 0 的元素虽然在页面中不可见，但是它们仍然会被渲染，在页面中占据着相应的位置。
  2. 由于 display: none 会影响布局，所以它会引起 重排 和 重绘 ；而visibility: hidden 和 opacity: 0 不会影响页面布局，所以它只会引起 重绘 。
  3. visibility: hidden 具有继承性，但其子元素如果设置了 visibility: visible，那么子元素仍然会展示； opacity: 0 也具有继承性，即使子元素设置了 opacity: 1，子元素仍不可见。
  4. visibility: hidden 隐藏元素后元素不可点击，但是如果其子元素如果设置了 visibility: visible，那么其子元素仍可被点击；设置了 opacity: 0 的元素，元素本身及其子元素都可以被点击。