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

前言

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

实现方法

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

display：none
visibility：hidden
opacity：0
设置盒模型为 0
position：absolute
clip-path 或 transform

方法一：display：none

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

css

.conceal {
  display: none;
}

效果：完全从文档流中移除元素，不会有过渡效果。
不占据空间：其他元素会像它不存在一样重新布局。
不可访问：屏幕阅读器不会读取该元素内容。
性能：触发重排（reflow）和重绘（repaint）。
无法响应点击事件

适用于彻底不需要显示且不影响布局的场景。

方法二：visibility：hidden

css

.conceal {
  visibility: hidden;
}

效果：隐藏元素，但保留其在文档流中的位置。
占据空间：其他元素不会移动。
不可见但存在：仍可响应事件（如点击）？❌ 实际上默认不响应鼠标事件（除非子元素设为 visibility: visible）。
可被屏幕阅读器读取（取决于浏览器/辅助技术实现，通常不会读取）。
性能：不会发生重排，但是会发生重绘。

适用于需要保留布局但暂时隐藏的场景（如动画前准备）。

方法三: opacity：0

css

.conceal {
  opacity: 0;
}

视觉上透明，但元素仍在文档流中。
占据空间，且可交互（如点击、聚焦等），但被它遮挡的元素是不能触发其他事件的。
屏幕阅读器通常会读取（因为元素仍然“存在”）。
性能：不会引发重排，一般情况下也会引发重绘。

适用于需要做淡入淡出动画或保持交互性的透明效果。

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

方法四：设置盒模型为 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;
}

元素仍在 DOM 中，但被移到可视区域之外。
屏幕阅读器通常能读取（常用于无障碍访问，如“跳转到主内容”链接）。
不干扰正常布局。

常用于无障碍（a11y）设计，既对视觉用户隐藏，又对辅助技术可见。

方法六：clip-path 或 transform

css

.element {
  clip-path: inset(100%);
}
/* 或 */
.element {
  transform: translateX(-9999px);
}

clip-path: inset(100%)：裁剪元素使其不可见，但仍占据空间（类似 visibility: hidden）。
transform：视觉上移出，但仍在文档流中（与 position: absolute + left: -9999px 类似，但不会脱离文档流）。

注意：使用 transform 隐藏的元素仍可聚焦和交互，需谨慎。

区别：

关于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 ​

方法四：设置盒模型为 0 ​

方法五：position：absolute ​

方法六：clip-path 或 transform ​

区别： ​