line-height如何继承

• 父元素的line-height写了具体数值,比如30px,则子元素line-height继承该值
• 父元素的line-height写了比例,比如1.5或2,则子元素line-height也是继承该比例
• 父元素的line-height写了百分比,比如200%,则子元素line-height继承的是父元素font-size*200%计算出来的值

元素隐藏

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

  <div class="father">
    <div class="child"></div>
  </div>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: brown;
    }
    /* 
    是否占据空间
      display:none 隐藏之后不会占位置
      visibility:hidden和opacity:0仍占据位置
      
    子元素是否继承:
      display:none--不会被子元素继承,父元素不显示,子元素也不会显示
      visibility:hidden--会被子元素继承,可以通过设置visibility:visible来显示子元素
      opacity:0--会被子元素继承,但是不能设置opacity:0来重新显示

    事件绑定:
      display:none和visibility:hidden不会触发绑定的事件
      opacity:0会触发

    过度动画:
      transition对于display和visibility是无效的
      transition对opacity是有效
    */

    /* .father {
      display: none;
    } */

    /* .father {
      visibility: hidden;
    }
    .child {
      visibility: visible;
    } */

    /* .father {
      opacity: 0;
    }
    .child {
      opacity: 1;
    } */
  </style>
  <script>
    const div = document.getElementsByClassName('father')[0];
    div.addEventListener('click', () => {
      console.log('111');
    });
  </script>