CSS 高级✍️ 隐藏元素的方式 [ ricepudding ]

首先什么叫隐藏元素，大家第一反应就是 display: none 元素就被隐藏了；

没错，这确实是隐藏元素的一种，但是太过于片面；隐藏元素实际上可以分为 3 大类：

完全隐藏：元素从渲染树中消失，不占据空间；

视觉上的隐藏：屏幕中不可见，占据空间；

语义上的隐藏：读屏软件不可读，但正常占据空间；

隐藏元素的方式

display: none

效果：元素完全从文档流中移除，不占据任何空间，其子元素也会被隐藏，且无法通过 DOM 操作触发事件 （如点击）；
示例：
```
.hidden {
  display: none;
}
```

visibility: hidden

效果：元素不可见，但仍占据文档流中的空间，子元素可通过 visibility: visible 单独显示，元素本身无法触发事件；

示例：

.invisible {
  visibility: hidden;
}
.invisible .child {
  visibility: visible; /* 子元素可见 */
}

opacity: 0

效果：元素透明度设为 0，视觉上不可见，但仍占据空间，且可触发事件 （如点击），子元素会继承透明度；
示例：
```
.transparent {
  opacity: 0;
}
```

position + 偏移

效果：通过绝对定位将元素移出可视区域，仍占据空间 （若未脱离文档流），可触发事件；

示例：

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

height: 0; width: 0; overflow: hidden

效果：元素尺寸设为 0，溢出内容隐藏，不占据空间，但若有边框 / 内边距需额外清除；

示例：

.collapsed {
  height: 0;
  width: 0;
  overflow: hidden;
  border: none;
  padding: 0;
}

clip-path: polygon(0 0, 0 0, 0 0, 0 0)

效果：通过裁剪路径隐藏元素，视觉上不可见，仍占据空间，可触发事件；

示例：

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

visibility: collapse;（仅表格元素）

效果：表格行 / 列隐藏且不占空间，其他元素等效于 visibility: hidden；

示例：

tr.collapsed {
  visibility: collapse;
}

案例

打赏作者

您的打赏是我前进的动力

微信

支付宝

CSS 高级📦 水平居中、垂直居中、两列、三列、等分、等高布局实战套路

CSS 高级✍️ position 定位、层叠上下文

你好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 隐藏元素的方式
2. 案例