CSS中常见的让元素隐藏的方式

在平时工作中,我们经常会遇到一些让模块隐藏的场景,在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 隐藏元素 不脱标  不会影响交互