display: none 是最直接安全的隐藏方式，让元素彻底退出渲染流程、不占空间、不可交互、不被屏幕阅读器读取；hidden 属性语义更清晰但可被 css 覆盖；visibility: hidden 仅透明化且保留布局空间，存在无障碍与交互问题。
用 display: none 是最直接、最安全的隐藏方式，它让元素彻底退出渲染流程，不占空间、不可交互、不被屏幕阅读器读取——除非你有明确理由保留占位或做动画，否则别绕弯子。
为什么不能用 visibility: hidden 替代
它只是把元素“变透明”，但依然占据原始布局空间，子元素也默认继承该状态。常见问题包括：
- 父容器高度异常，页面出现莫名空白
- 鼠标悬停或点击空白区域，实际触发了被
visibility: hidden的按钮或链接 - 屏幕阅读器仍会朗读内容，不符合无障碍要求
- 恢复显示时写
visibility: visible未必生效（比如父级是hidden）
hidden 属性比 CSS 更轻量，但要注意覆盖风险
HTML5 原生布尔属性，语义清晰，默认行为等价于 display: none，且不依赖样式解析。但它有两个硬约束：
- JS 控制推荐用
el.hidden = true或el.hidden = false，比操作style.display更安全 - 它可被 CSS 覆盖：如果项目里写了
[hidden] { display: block; }，那就完全失效——上线前务必全局搜索这类规则 - 和
aria-hidden="true"完全不同：hidden是真移除渲染，aria-hidden只影响辅助技术，元素依然可见、可点
JavaScript 动态控制时，别直接改 style.display
硬编码 element.style.display = 'none' 看似快，但恢复时若写死 'block'，会破坏原本是 inline-flex 或 grid 的布局。更稳妥的做法：
- 用 class 切换：
element.classList.toggle('is-hidden')，CSS 中定义.is-hidden { display: none; } - 必须用 JS 控制时，先缓存原始值：
const origin = getComputedStyle(element).display;，恢复时设回origin - 避免在循环、滚动事件中反复读写
style.display，会强制同步重排，性能明显下降
真正需要隐藏的，不是“看不见”，而是“不该存在”。display: none 和 hidden 都能做到，但后者更语义化；而所有依赖视觉欺骗的方案（如 opacity: 0、position: absolute; left: -9999px）都得额外处理交互、无障碍和性能问题——别为省一行 CSS 冒险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
