在平时工作中,我们经常会遇到一些让模块隐藏的场景,在CSS中多让元素隐藏的方式有很多种
1.display:none
.hide {
display:none;
}
2.visibility:hidden
.hidden{
visibility:hidden
}
3.opcity:0
.transparent {
opacity:0;
}
4.将元素的margin padding weith height等影响元素盒子的属性设置为0,如果盒子内有内容的话还应该设置overflow: hidden来隐藏内容
.hiddenBox {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
5.通过position:absolute 设置top:-9999px left:-9999px,将元素定位出可视区域外
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
最常用的还是display和visibility,其他的方式本身真正的用途并不在于隐藏元素,可以说是一种奇招吧
display和visibility也是有区别的
display:none 隐藏元素 脱标 交互不会生效
visibility:hidden 隐藏元素 不脱标 不会影响交互