006-CSS 有哪些方式可以隐藏页面元素及它们的区别?

前言

前端日常开发中，经常要使用隐藏元素的 CSS 样式属性。虽然效果看起来一样，但是它们还是存在着细微的区别。今天我们就来说说，在 CSS 中的隐藏元素有哪些以及它们的区别。

实现方式

• display: none
• visibility: hidden
• opacity: 0
• position: absolute
• 设置 width、height 模型属性为 0
• clip-path

display: none

设置元素的 display 为 none 是最常用的隐藏元素的方法

.hide {
    display: none;
}

结果是被设置的元素消失，触发浏览器的重排和重绘，自身绑定的事件不会触发，也不会有过渡效果。

特点：元素不可见，不占据空间，无法响应点击事件。

visibility: hidden

设置元素的 visibility 为 hidden 也是一种常用的隐藏元素的方法。

从页面上仅仅是隐藏该元素，DOM 结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘。

.hide {
    visibility: hidden;
}

特点：元素不可见，占据页面空间，无法响应点击事件。

opacity: 0

opacity 属性表示元素的透明度，将元素的透明度设置为 0 后，元素也是可以隐藏的，但不会引发重排，一般情况下也会引发重绘。

提示

如果利用 animation 动画，对 opacity 做变化（animation 会默认触发 GPU 加速），则只会触发 GPU 层面的 composite，不会触发重绘。

.transparent {
    opacity: 0;
}

由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件，且其子元素不能设置 opacity 来达到显示的效果。

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。

设置 width、height 模型属性为 0

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

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

特点：元素不可见，不占据页面空间，无法响应点击事件。

position: absolute

将元素移出可视区域

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

特点：元素不可见，不影响页面布局。

clip-path

通过裁剪的形式

.hide {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

特点：元素不可见，占据页面空间，无法响应点击事件。

区别

关于 display: none、visibility: hidden、opacity: 0 的区别，如下：

	display:none	visibility:hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	触发
transition	不支持	支持	支持
子元素可复原	不支持	支持	不支持
被遮挡的元素可触发事件	支持	支持	不支持

总结

最常用的还是 display: none 和 visibility: hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们。

部分答案整理自网络资源