HTML中隐藏元素的方式

常规：

1. div{
       display:none 
   }
//真正的隐藏元素 隐藏元素，就像元素完全不存在（但可以通过js中的DOM操作访问），不能直接与用户进行交互（v-show）
2. div{
      opacity:0
   }    
//设置透明度为0  只是单纯的从视觉隐藏元素，元素本身的位置仍然存在，可与用户进行交互
3. div{
      visibility:hidden
   }
//设置元素是否可见   隐藏元素，但是会保留元素的位置
4. <p hidden><p>  
//直接在元素上加上 hidden属性  不影响布局，未被渲染出来，该元素不应该被用户获取到时使用（例如：该元素链接某个href上）
//可被display属性覆盖（hidden属性是用css实现的）

巧用：

1. div{
      height:0;
      overflow:hidden;
   }
 //设置高度为0，将元素设置到父元素的外面
2. <input type="text">
   <input type="hidden">
 //单纯的隐藏input框

3. div{
      height:0;
      width:0;
   }
 //设置父元素的宽高为0，父元素直接消失，子元素仍然正常显示
4. div{
      text-indent: 100%;   //缩进100%
      white-space: nowrap; //不换行
      overflow: hidden;    //超出部分隐藏
   }
//通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示
5. div{
      top:-1000px;
      position:absolute;
   }
 //单纯利用定位隐藏元素，元素定位到视图外
6. div{
      position:absolute;
      z-index:;-999;
   }
 //z-index属性可以设置元素的层级，把他设置成为负数，然后再把自己设置为绝对定位就可以达到隐藏的效果
7. div{
      transform:rotateX/Y(90deg/270deg);
      //X轴前后/Y轴上下旋转90度  旋转元素, 使与当前页面垂直，使之隐藏元素
      transform：scale(0);
      //缩小元素尺寸到自身的0倍  使之隐藏元素
      //这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此。
   }