display: none 彻底移除元素，不占布局空间且不可访问；visibility: hidden 保留位置但多数屏幕阅读器跳过；hidden 属性语义化隐藏更可靠但 ie 不支持；opacity: 0 需配 pointer-events: none 和 aria-hidden 才安全。
display: none 与 visibility: hidden 的行为差异必须分清
二者都让元素“看不见”，但对布局和可访问性的影响完全不同：display: none 会从渲染树中移除元素，不占空间、不被屏幕阅读器读取；visibility: hidden 保留盒模型位置，仍占据布局空间，且多数屏幕阅读器默认跳过它（但不是所有——尤其旧版 NVDA 或某些自定义配置下可能意外播报）。
实际使用中容易踩坑的点：
- 用
visibility: hidden隐藏表单控件（如<input>）后，用户仍可能通过 Tab 键聚焦到它，造成焦点陷阱 - 动画过渡时误用
display: none：它不可动画，transition对它无效，强行写只会导致突显/突隐 - 响应式设计中，用
display: none隐藏导航菜单后，若未同步移除aria-expanded或更新aria-hidden，会破坏语义一致性
hidden 属性是语义化隐藏的首选，但有兼容性边界
hidden 是 HTML5 原生布尔属性，浏览器默认对其应用 display: none，同时明确告诉辅助技术“这个内容当前无关”。它比纯 CSS 更可靠，也比手动加 class 更简洁。
不过要注意：
- IE 完全不支持
hidden，Edge 12–17 支持但存在部分 bug（如动态设置element.hidden = true后首次 focus 仍可能触发） -
hidden不可继承，父元素设了hidden，子元素不会自动隐藏；但子元素显式设hidden=false也无法覆盖父级——这点和 CSS 不同 - 服务端渲染（SSR）或静态生成场景下，若初始 HTML 中没写
hidden，仅靠 JS 后续设置，首屏仍可能短暂闪现内容
opacity: 0 + pointer-events: none 才算真正“不可交互”的视觉隐藏
只设 opacity: 0 很危险：元素完全透明，但依然响应鼠标事件、接收键盘焦点、被屏幕阅读器读取。常见于模态框遮罩层误用，导致点击穿透或焦点卡死。
安全组合是：
-
opacity: 0控制视觉消失 -
pointer-events: none禁用所有鼠标交互 -
aria-hidden="true"显式告知辅助技术忽略该元素 - 若需键盘可访问（比如淡入后要聚焦），则不能加
pointer-events: none，而应在opacity动画完成后再用 JS 设置tabindex="-1"或管理焦点流
用 JavaScript 切换显示状态时，别只改 style.display
直接操作 element.style.display = 'block' 看似简单，但会覆盖内联样式中的其他 display 值（比如 flex、grid），也可能与 CSS 类冲突，导致布局错乱。
更稳妥的做法是：
- 统一用 class 控制，例如定义
.is-hidden { display: none; }，再用element.classList.toggle('is-hidden') - 需要保留原有 display 类型（如原本是
inline-flex），可用getComputedStyle(element).display先读取，再恢复，但注意该值是计算后结果，不一定等于原始声明 - 对动态插入的元素，优先在模板中预置
hidden属性或初始 class，避免 JS 执行前的内容闪现
真正麻烦的从来不是“怎么让它消失”，而是“消失之后，焦点、语义、动画、响应式、辅助技术是否都同步跟上了”。漏掉任意一环，都可能让隐藏变成障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
