是什么

隐藏页面元素有以下方式：

• display:none
• visibility:hidden
• opatcity: 0
• postion:absolute
• width,height设置为0
• clip-path裁剪

怎么用

<style>
    .t1{
      height: 100px;
      display: none;
    }
    .t2{
      height: 100px;
      visibility: hidden;
    }
    .t3{
      height: 100px;
      opacity: 0;
    }
    .t4{
      height: 100px;
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    .t5{
      height: 0;
      width: 0;
    }
    .t6{
      height: 100px;
      clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
    }
    .ele{
      height: 100px;
      background-color: green;
    }
  </style>
  <div style="font-size:2em">111</div>
  <div class="t1"></div>
  <div class="t2"></div>
  <div class="t3"></div>
  <div class="t4"></div>
  <div class="t5"></div>
  <div class="t6"></div>
  <div class="ele">hello</div>

区别

• 主流：display、visibility、opacity

• 关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
被遮挡的元素可触发事件	能	能	不能