该用时：权限控制、弹窗关闭、条件渲染等“区域本不该存在”场景；不该用时：需保留占位、维持Tab键焦点流或避免重排的场合，如表单隐藏input会导致焦点断裂，轮播图切换会引发布局抖动。
display: none 什么时候该用，什么时候不该用
它真正移除元素：不占空间、不响应事件、getBoundingClientRect()返回全0、子元素完全无效。适合权限控制、弹窗关闭、条件渲染等“这区域本不该存在”的场景。
常见错误现象：v-if和{condition && <div>}底层靠的就是它，但有人误用<code>visibility: hidden替代，结果Tab键还能聚焦到空白处，布局也不塌。
注意点：
-
display: none会触发重排（reflow），动画中频繁切换影响性能 - 内联样式优先级高于
hidden属性，比如<div hidden style="display: block">，hidden就失效了 - 子元素无论设
display: block都无效——父级已斩断渲染链
visibility: hidden 子元素能“钻出来”是设计，不是 bug
它只是视觉隐藏，元素仍在文档流里，父容器高度不会塌缩，tabindex仍生效。关键区别在于：子元素设visibility: visible能强行显示，而display: none下做不到。
立即学习“前端免费学习笔记（深入）”；
典型翻车点：表单里用它隐藏<input>，用户按Tab键仍会聚焦到空白位置，体验断裂。
其他事实：
- 支持
transition，但只对visible → hidden有延迟效果；反向切换无过渡 - 搭配
opacity: 0做淡出更稳妥，但得手动加pointer-events: none防点击穿透 - IE8+ 全兼容，但对屏幕阅读器不一定静默（取决于 UA 实现）
opacity: 0 不等于隐藏，必须配对禁用交互
opacity: 0只是透明，元素几何信息、事件监听、焦点能力全部保留。很多所谓“隐藏”需求其实要的是“不可见且不可交互”，漏掉pointer-events: none和tabindex="-1"就会出问题。
典型错误现象：轮播图切换时用opacity: 0隐藏旧图，用户手快连点两下，触发两次回调——因为元素还在监听click。
必须三件套齐上：
opacity: 0pointer-events: nonetabindex="-1"
它和transition: opacity 0.3s天然契合，比display切换流畅得多，只触发重绘（repaint），不触发重排（reflow）。
hidden 属性语义正确但容易被 CSS 覆盖
hidden是 HTML5 原生布尔属性，等价于display: none，但带语义优势：对屏幕阅读器明确传达“此内容当前不相关”。JS 操作也轻量：el.hidden = true不触发布局计算。
但它不是万能开关——CSS 里一条[hidden] { display: block; }就能让它失效。
框架适配差异：
- Vue/React 中直接写
hidden={condition}是安全的 - Svelte 需配合 class 绑定
- 永远不要单独对可交互元素（如
<button>）用aria-hidden="true"，会造成焦点与语义断裂
真正复杂的地方不在选哪个属性，而在于你是否清楚自己要隐藏的是什么：视觉？布局？焦点？可访问性树？搜索引擎索引？四者常不一致，混用就出事。
