以下是隐藏元素的 8 种常用方法及对比，用场景化分类帮助记忆：
一、完全隐藏（不占位）
1. display: none
.hidden { display: none; }
- 特点：元素从渲染树中移除，不占据空间，不可触发点击事件
- 场景：需要彻底移除元素时使用
2. HTML hidden 属性
<div hidden>内容</div>
- 效果：等同于
display: none，属于 HTML 原生隐藏方式 - 注意：需用 CSS 重置样式
[hidden] { display: none }确保兼容性
二、视觉隐藏（保留占位）
3. visibility: hidden
.invisible { visibility: hidden; }
- 特点：元素不可见但保留占位空间，不可触发点击事件
- 场景：隐藏后需要保持布局稳定
4. opacity: 0
.transparent { opacity: 0; }
- 特点：元素完全透明，保留占位且可触发点击事件
- 场景：需要实现淡出动画或隐藏后仍需交互
三、移出视口
5. 绝对定位偏移
.off-screen {
position: absolute;
left: -9999px;
top: -9999px;
}
- 特点：元素保留尺寸，屏幕外不可见，可触发事件
- 场景：SEO 优化隐藏内容（如关键词）
6. clip-path 裁剪
.clipped {
clip-path: inset(100% 100%);
}
- 特点：裁剪元素至不可见，保留占位且可触发事件
- 场景：需要兼容现代浏览器的视觉隐藏
四、尺寸归零
7. 尺寸设为 0
.zero-size {
width: 0;
height: 0;
overflow: hidden;
}
- 特点：元素不占空间，子元素不可见
- 场景：隐藏图标容器等小型元素
五、辅助技术隐藏
8. ARIA aria-hidden="true"
<div aria-hidden="true">仅对屏幕阅读器隐藏</div>
- 特点：仅对辅助设备隐藏，视觉上仍可见
- 场景：提升可访问性时配合其他隐藏方式使用
六、方法对比表
| 方法 | 占据空间 | 可交互 | 可动画 | 渲染树存在 | 适用场景 |
|---|---|---|---|---|---|
display: none | ❌ | ❌ | ❌ | ❌ | 彻底移除元素 |
visibility: hidden | ✅ | ❌ | ❌ | ✅ | 保持布局稳定 |
opacity: 0 | ✅ | ✅ | ✅ | ✅ | 淡出动画/隐藏交互 |
| 绝对定位偏移 | ❌ | ✅ | ✅ | ✅ | SEO 隐藏/保留功能 |
clip-path | ✅ | ✅ | ✅ | ✅ | 现代浏览器视觉隐藏 |
七、高频面试问题
Q1：display: none 和 visibility: hidden 的区别？
- 答：前者不占空间且脱离渲染树，后者保留空间仅视觉隐藏
Q2：如何隐藏元素但保留其占位？
- 答：使用
visibility: hidden或opacity: 0
Q3：如何让隐藏元素仍可触发点击事件？
- 答：使用
opacity: 0或绝对定位偏移到屏幕外
八、记忆口诀
"三不占位五保留，交互动画看需求"
- 三不占位：
display: none、hidden属性、尺寸归零 - 五保留：
visibility、opacity、定位偏移、clip-path、aria-hidden
