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属性综合使用,可以达到各种各样的效果。思路扩散了,我们能做到的效果也就越来越多。
大家如有其他方法,欢迎留言讨论交流,一起学习,互相分享。