总结11中隐藏元素的办法

1. CSS display的值是none。(该元素是不会在页面上显示)

div{
    display: none;
}
复制代码

2. type="hidden"的表单元素。(该元素是不会在页面上显示)

<input type="hidden" value="我是隐藏的input" />
复制代码

3. 宽度和高度都显式设置为0。

div{
    width: 0;
    height: 0;
    overflow: hidden;
}
复制代码

4. 一个祖先元素是隐藏的，(该祖先以及祖先以下的元素是不会在页面上显示)

5. CSS visibility的值是hidden (该元素是会在页面上显示，还占原来的位置)

div{
    visibility: hidden;
}
复制代码

6. CSS opacity的值是0，也就是透明度为0 (该元素是会在页面上显示，还占原来的位置)

div{
    opacity: 0;
}
复制代码

7. 将position设为absolute然后将位置设到不可见区域

div{
   position: absolute;
   top: -9999px;
   left: -9999px;
}
复制代码

8. z-index 负值

.hide{
    position:absolute;
    z-index:-1000; /* 不占据空间，无法点击 */
}
复制代码

9. transform

.hide{
    transform: scale(0, 0);    /* 缩小到0 占据空间，无法点击 */
    transform: rotateX(90deg); /* x轴旋转90度 占据空间，无法点击 */
    transform: rotateY(90deg); /* x轴旋转90度 占据空间，无法点击 */
}
复制代码

10. clip / clip-path

通过剪裁它们来实现隐藏元素。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了(现在浏览器依然支持)，换成一个更好的属性叫做 clip-path, 不过clip-path的兼容性很差，大家了解即可

.hide{
    clip: rect(top, right, bottom, left); /* 占据空间，无法点击 */
}
.hide_2 {
  clip-path: polygon(0px 0px, 0px 0px ,0px 0px ,0px 0px); /* 占据空间，无法点击 */
}
复制代码

11.把字体颜色color设置和背景颜色一样，也可以达到隐藏文字效果

.hide-text{
    color: #ccc;
    background-color: #ccc;
}
复制代码

上面介绍了很多把元素隐藏的方法，主要和大家分享这种总结研究的精神，我们学习的时候，可以都看看css都哪些属性，能达到什么效果，然后发挥自己的想法，或者参考别人的想法，把css属性综合使用，可以达到各种各样的效果。思路扩散了，我们能做到的效果也就越来越多。

大家如有其他方法，欢迎留言讨论交流，一起学习，互相分享。