opacity: 0、visibility: hidden、display: none 的区别及使用场景

opacity: 0、visibility: hidden、display: none 都能让元素不可见，他们有什么区别呢？
我们创建三个 div，并设置样式得到如下效果：

<div class="container">
  <div class="display">display</div
  ><div class="visibility">visibility</div
  ><div class="opacity">opacity</div>
</div>

元素表现

display: none, 不渲染元素，不占据空间，不能点击。
visibility: hidden, 渲染元素，只是元素不可见，占据空间，不能点击。
opacity: 0, 渲染元素，只是元素不可见，占据空间，可以点击。

display: none;

设置类名为 display 的 div 属性值为 none，元素不在页面显示，不占据空间，类名 visibility 和 opacity 的 div 的位置向前移动。

.display {
  display: none;
}

**visibility: hidden; **

设置类名为 visibility 的 div 属性值为 hidden，元素不在页面显示，占据位置。

.visibility {
  visibility: hidden;
}

**opacity: 0; **

设置类名为 opacity 的 div 属性值为 0，元素不在页面显示，占据位置。

元素的点击
元素的 display 属性设置为 none , 在浏览器中不渲染，也就无法点击。当属性设置为 visibility 和 opacity 元素还存在页面中，只是不显示。我们来看看其点击的情况，给每个元素添加点击事件，点击类名为 visibility 的 div 时，没有触发点击事件，当点击类名为 opacity 的 div 时，触发点击事件，控制台打印出 log 。

const display = document.querySelector('.display')
const visibility = document.querySelector('.visibility')
const opacity = document.querySelector('.opacity')

display.addEventListener('click', () => {
  console.log('display', )
})
visibility.addEventListener('click', () => {
  console.log('visibility', )
})
opacity.addEventListener('click', () => {
  console.log('opacity', )
})

继承性

display: none, 无。
visibility: hidden, 子元素继承其属性，子孙元素不显示是继承了 visibility: hidden 的属性，当给子孙元素设置 visibility: visible, 可以显示其子孙节点。
opacity: 无。

性能

display: none, 修改元素属性会造成文档的回流和重绘，性能消耗较大。
visibility: hidden, 修改元素属性只会造成文档的重绘，性能消耗较小。
opacity: 0, 修改元素属性只会造成文档的重绘，性能消耗较小。