隐藏元素的方法以及区别

一、隐藏元素的方法

通过css实现隐藏元素的方法有以下几种：

• display：none;
• visibility: hidden
• opacity: 0
• 盒模型设置相关属性为0
• font-size:0
• position: absolute

1.diplay: none

将元素的样式设置为display: none;

.hide {
      display: none;
    }

可以使元素隐藏
元素不占据空间，会引起回流与重绘
不能触发元素绑定的点击事件
没有过渡效果

2.visibility: hidden

将元素的样式设置为visibility: hidden;

.hide {
      visibility: hidden;
    }

可以使元素隐藏
元素占据空间，只会引起重绘，不会引起回流
不能触发元素绑定的点击事件
没有过渡效果

3.opacity: 0

将元素的样式设置为opacity: 0;

.hide {
      opacity: 0;
    }

设置元素的透明度为0，可以使元素隐藏
元素占据空间，只会引起重绘，不会引起回流
可以触发元素绑定的点击事件
有过渡效果

4.盒模型设置相关属性为0

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

.hide {
       margin:0;     
       border:0;
       padding:0;
       height:0;
       width:0;
       overflow:hidden;
    }

可以使元素隐藏
元素不占据空间，会引起回流与重绘
不能触发元素绑定的点击事件
有过渡效果

5.font-size:0

将元素的font-size设置成0

.hide {
      font-size: 0;
    }

只能使字体隐藏

6.position: absolute

设置元素为绝对定位，再将top和left设置成一个较大的负数，将元素移动到屏幕外面，以打到隐藏的效果

.hide {
      position: absolute;
      top: -1000px;
      left: -1000px;
    }

可以使元素不可见
有过渡效果