display、visibility、opacity、position隐藏元素的区别

[TieMuZhen]

一、display: none

.box {
    display: none;
}

• 元素将从页面中消失，元素在页面上将彻底消失，元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
• 元素上所有的事件将无法被正常触发
• 子孙元素同时被隐藏
• 该状态下为元素添加其他过渡效果都是无效的

二、visibility: hidden

.box {
    visibility: hidden;
}

• 元素不会显示，但是依然占据原本该有的空间位置，元素上的点击事件不能被触发，不会触发重排，但是会触发重绘
• visibility属性可继承，子元素可以通过设置visibility:visible来实现可见
• 如果子元素为visible，那么子元素的点击事件可被触发，此时visibility为hidden的父级元素的事件会在事件冒泡阶段被触发

三、opacity: 0

.box {
    opacity: 0;
}

• 元素依旧存在页面上，并且会占用页面空间位置，不会引发重排，一般情况下也会引发重绘，因为如果利用animation动画，对opacity做变化（animation会默认触发GPU加速），则只会触发GPU层面的composite，不会触发重绘
• 元素上绑定的事件可以被正常触发
• opacity可被继承，子元素可以通过设置opacity: 1来实现可见

四、position: relative

.box {
    position: relative;
    left: -10000px;
    top: -10000px;
}

• 元素依然存在页面上，会影响页面的布局
• 绑定事件可被正常触发
• position属性可被继承（position: inherit），子元素可以通过设置relative、position、fixed、inherit配合top、bottom、right、left值重新进行定位。

五、position: absolute

.box {
    position: absolute;
    top: -9000px;
    left: -9000px;
}

• 元素依然存在页面上，不会影响页面的布局
• 绑定事件可被正常触发
• position属性可被继承（position: inherit），子元素可以通过设置relative、position、fixed、inherit配合top、bottom、right、left值重新进行定位。

六、设置height、width属性为0

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

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

参考文献

• 隐藏一个元素有哪些方法以及区别