Display、Visibility 和 Opacity 的区别

  <style>
    .d1{
      display: none;
    }
    .d2{
      visibility: visible;
    }
    .d3{
      opacity: 0;
    }
  </style>

  <div class="d1" onclick="clickEvent('display: none;')"></div>
  <div class="d2" onclick="clickEvent('visibility: hidden;')"></div>
  <div class="d3" onclick="clickEvent('opacity: 0;')"></div>
  <script type="text/javascript">
    function clickEvent(type){
      alert(type)
    }
  </script>

display: none;

1. DOM结构：浏览器 不会渲染 display:none; 的元素，不占据空间
2. 事件监听：无法进行DOM事件监听
3. 性能：动态改变此属性时，会引起重排，性能较差
4. 继承：不会被子元素继承，因为子元素也不会被渲染
5. transition过渡：transition不支持display

visibility: hidden;

1. DOM结构：元素被隐藏，但是会被渲染不会消失，占据空间
2. 事件监听：无法进行DOM事件监听
3. 性能：动态改变此属性时，会引起重绘，性能较高
4. 继承：会被子元素继承，但是子元素可以通过设置 visibility: visible; 来取消隐藏
5. transition过渡：visible会立即显示，hidden时可以过渡

opacity: 0;

1. DOM结构：透明度为100%时，元素隐藏并占据空间
2. 事件监听：可以监听DOM事件
3. 性能：提升为合成层，不会触发重绘，性能较高
4. 继承：会被子元素继承，并且子元素 不能通过 opacity: 1; 来取消隐藏
5. transition过渡：隐藏和显示均支持过渡