CSS 中隐藏页面元素的几种方式和区别

前言

在平常的样式排版中，我们经常遇到将某个模块隐藏的场景，通过 css 隐藏的元素方法有很多种，它们看起来实现的效果是一致的，但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法。

实现方法综合

通过 css 实现隐藏元素方法有如下：

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

方法一：display：none

display：none 是通常最实用的隐藏元素的方法

css

.conceal {
  display: none;
}

将元素设置的 display：none，可以将元素在页面中彻底消失。

此元素原本所占据的位置，会被其他元素占据，也就是说它会导致浏览器的重排的重绘

消失后，自身绑定的事件不会触发，也不会有过渡效果

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

方法二：visibility：hidden

visibility：hidden 也是非常常用的一种隐藏方式，但是跟 display：none 大有不同

visibility：hidden 从页面上来看仅仅是隐藏该元素，DOM 结果依然会存在，只是处于一个不可见的状态。不会发生重排，但是会发生重绘。

css

.conceal {
  visibility: hidden;
}

给人的效果是隐藏了，所以他的自身事件不会触发。

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

方法三: opacity：0

opacity 属性表示元素的透明度，将元素的透明度设置为 0 之后，在用户的严重，元素也是可以达到隐藏效果的该方法不常用，不会引发重排，一般情况下也会引发重绘

css

.conceal {
  opacity: 0;
}

它是存在于页面之上的，所以他自身的事件仍然是可以触发的，但被他遮挡的元素是不能触发其他事件的

注意：其子元素不能设置 opacity 来达到显示的效果

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

方法四：设置 height、width 模型属性为 0

要用这种方法实现隐藏需将元素的 margin、border、padding、height 和 width 等影响元素盒模型的属性设置成 0，如果元素内有子元素的内容，还要设置其 overflow：hidden 来隐藏子元素

css

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

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

方法五：position：absolute

肯定看到这里会很惊讶为什么定位也能隐藏，其实我也是翻阅了一些资料之后才知道的，是将元素移出页面，不可见，从而就达到了"隐藏效果"虽然用处也很多，但多数不是用于“隐藏”。

css

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

特点:元素不可见，不影响布局

方法六：clip-path

clip-path 通过裁剪的形式

css

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

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

总结：

最常用的还是方法一和方法二，其他的方式只能算是一种小妙招吧，很偏，因为它们的真正用途并不是用于隐藏元素所以本人是不推荐使用它们的。

区别：

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

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

继承

diplay:none 和 opacity:0 ：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。

visibility:hidden：是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility:visible; 可以让子孙节点显示。

性能

display:none：修改元素会造成文档回流，读屏器读取 display:none 元素内容，性能消耗较大

visibility:hidden：修改元素只会造成本元素的重绘，性能消耗较少，读屏器读取 visibitlity:hidden 元素内容

opacity:0：修改元素会造成重绘，性能消耗较少

CSS 中隐藏页面元素的几种方式和区别 ​

前言 ​

实现方法综合 ​

方法一：display：none ​

方法二：visibility：hidden ​

方法三: opacity：0 ​

方法四：设置 height、width 模型属性为 0 ​

方法五：position：absolute ​

方法六：clip-path ​

总结： ​

区别： ​