css隐藏元素的几种方式

1. display:none

   .box{
       display:none
   }

    

2. visibility:hidden; 与display:none的区别是 , 元素隐藏了但是还会占据其原本的位置 , 不会因为隐藏导致浏览器进行重排格式

   .box{
       visibility:hidden
   }

    

3. opacity:0 设置元素的透明度为0 , 和visibility相似 , 看不见元素 , 但其都一直在占据着本身的位置

   .box{
       opacity:0
   }

    

4. overflow:hidden 适用于子元素超出隐藏 , 子元素超出父元素的部分会自动隐藏掉

   <div class="box">
       <div class="child"></div>
   </div>
   .box{
       height:50px;
       overflow:hidden
   }