display: none 是唯一真正移除渲染的方式，它让元素彻底退出渲染树、不占空间、不响应事件，JS 查询返回全为0，适合权限控制等“该区域不该存在”的场景。
display: none 是唯一真正移除渲染的方式
它让元素彻底退出渲染树，不占空间、不响应事件、JS 查询 offsetHeight 或 getBoundingClientRect() 返回全为 0。适合权限控制、弹窗关闭、条件渲染等“该区域不该存在”的场景。
常见错误现象：v-if 和 {condition && <div>} 底层就是靠这个机制，但有人误用 <code>visibility: hidden 替代，结果 tab 键还能聚焦到空白处，布局也塌不了。
-
display: none会触发重排（reflow），动画中频繁切换影响性能 - 内联样式优先级高于
hidden属性，比如<div hidden style="display: block">，hidden就失效了 - 子元素无论设
display: block都无效——父级已斩断渲染链
visibility: hidden 保留占位且子元素可“钻出来”
它只是视觉隐藏，元素仍在文档流里，父容器高度不会塌缩，tabindex 仍生效。关键区别在于：子元素设 visibility: visible 能强行显示，而 display: none 下做不到。
典型翻车点：表单里用它隐藏 <input>，用户按 Tab 键仍会聚焦到空白位置，体验断裂。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 支持
transition，但只对visible → hidden有延迟效果；反向切换无过渡 - 搭配
opacity: 0做淡出更稳妥，但得手动加pointer-events: none防点击穿透 - IE8+ 全兼容，但对屏幕阅读器不一定静默（取决于 UA 实现）
opacity: 0 不等于隐藏，必须配对禁用交互
opacity: 0 只是透明，元素几何信息、事件监听、焦点能力全部保留。很多所谓“隐藏”需求其实要的是“不可见且不可交互”，漏掉 pointer-events: none 和 tabindex="-1" 就会出问题。
典型错误现象：轮播图切换时用 opacity: 0 隐藏旧图，用户手快连点两下，触发两次回调——因为元素还在监听 click。
- 必须三件套齐上：
opacity: 0+pointer-events: none+tabindex="-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 绑定。
- 不支持 IE9 及更早版本（现代项目基本不用考虑）
- 服务端渲染时比 CSS 更早生效，避免 FOUC（闪现）
- 别混用：
hidden和style="display: none"同时存在时，后者优先级更高
opacity: 0 就完事；想“保留 DOM 结构但暂停视觉呈现”，visibility: hidden 比 display: none 更轻量——但得记得它子元素还能钻出来。
