display: none 彻底移除 div 渲染，不占空间、不可交互、不被屏幕阅读器读取；hidden 属性语义化等效但更轻量；opacity: 0 + pointer-events: none 保留占位适合动画或定位场景。
用 display: none 彻底移除 div 的渲染
这是最常用也最彻底的隐藏方式：元素不占布局空间、不可交互、不被屏幕阅读器读取。适合「永久性隐藏」或「切换显示状态」的场景。
常见错误是误用 visibility: hidden —— 它只是让元素变透明，仍占据位置，可能导致父容器高度异常或点击穿透。
- 在 CSS 中写：
.hidden-box { display: none; } - 用 JavaScript 动态控制：
document.getElementById('myDiv').style.display = 'none'; - 恢复显示时必须设回具体值（如
'block'或'inline'），不能只写''（空字符串不会重置为原生 display）
用 hidden 属性做语义化隐藏
HTML5 原生属性，语义清晰且默认行为等价于 display: none，但更轻量、无需额外 CSS。
注意它和 ARIA 的 aria-hidden="true" 不同：hidden 是真隐藏（不渲染），aria-hidden 只影响辅助技术，元素依然可见可点。
立即学习“前端免费学习笔记（深入）”；
- 直接加在标签上：
<div hidden id="tip">…</div> - JS 控制：
el.hidden = true或el.hidden = false - 该属性可被 CSS 覆盖（比如写了
[hidden] { display: block; }就失效），线上项目建议检查是否有全局样式干扰
用 opacity: 0 和 pointer-events: none 实现「视觉隐藏但保留占位」
适用于需要过渡动画、或依赖 DOM 位置做计算（如 tooltip 定位、拖拽锚点）的场景。单纯 opacity: 0 仍可点击，必须配 pointer-events: none 才安全。
别漏掉 pointer-events —— 否则用户会奇怪「为什么看不见的元素还能触发 click」。
- CSS 示例：
.fade-out { opacity: 0; pointer-events: none; transition: opacity 0.2s; } - 不推荐用它替代
display: none做常规隐藏，因为元素仍在渲染树中，可能影响性能（尤其大量隐藏节点时） - 对屏幕阅读器仍可见，如需兼顾无障碍，得额外加
aria-hidden="true"
JavaScript 切换时避免反复操作 DOM 样式
频繁设置 style.display 容易触发重排（reflow），尤其在循环或滚动事件里。更稳妥的方式是切换 class。
直接改 style 属性会让内联样式优先级过高，后续用 CSS 类想覆盖就得加 !important，维护成本陡增。
- 推荐写法：
el.classList.toggle('is-hidden');，配合 CSS.is-hidden { display: none; } - 如果必须用 JS 控制，记得缓存原始
display值（比如从getComputedStyle读），否则恢复时容易错成'block'而破坏原有布局（inline 元素变 block 很常见） - Vue/React 等框架里，优先用条件渲染（如
v-if或{show && <div>}），而不是靠 CSS 隐藏——语义更准，也省去 DOM 节点 实际项目里最容易忽略的是「隐藏后是否还要参与无障碍访问」和「是否要保留其在布局中的位置」，这两个需求直接决定该选 <code>display: none、hidden还是opacity + pointer-events。
