display: none 彻底移除元素并触发重排，visibility: hidden 保留占位且不重排；前者子元素不可见，后者可被子元素 visible 覆盖；动画宜用 opacity+visibility，隐藏交互需加 pointer-events 和 tabindex。
display: none 和 visibility: hidden 有什么实际区别
关键不是“哪个更隐蔽”，而是浏览器是否还给它留位置、是否触发重排。用 display: none 后，元素彻底退出文档流，父容器高度会塌缩；而 visibility: hidden 只是“看不见”，但占位还在，点击事件也失效（这点常被忽略）。
常见错误现象：visibility: hidden 下子元素设 visibility: visible 能显示，但 display: none 下子元素无论如何设 display: block 都无效——父级已斩断渲染链。
- 需要动画淡出？别用
display: none，它不支持过渡，切到opacity: 0+visibility: hidden更稳妥 - 表单校验失败时临时隐藏某个
input？优先用display: none，避免visibility: hidden导致 tab 键仍可聚焦到它 - 兼容性无压力：两者在 IE8+ 都完全支持
HTML 属性 hidden 的真实行为
hidden 是原生布尔属性，等价于 display: none，但它有语义优势：对屏幕阅读器明确传达“此内容当前不相关”。不过它不是万能开关——CSS 里一条 [hidden] { display: block; } 就能把它废掉。
使用场景很窄：适合服务端渲染后、JS 尚未加载时的“默认隐藏”，或配合 Web Component 的生命周期做状态同步。
立即学习“前端免费学习笔记（深入）”；
- 别混用：
hidden和style="display: none"同时存在时，后者优先级更高 - JS 控制时，
el.hidden = true比el.style.display = "none"更轻量，不触发布局计算 - 注意：Vue/React 中直接写
hidden={condition}是安全的，但 Svelte 需用class:hidden={condition}配合 CSS 规则
opacity: 0 不等于隐藏元素
opacity: 0 只是让元素透明，它依然响应鼠标事件、占据空间、参与 tab 键导航。很多所谓“隐藏”需求其实要的是“不可见且不可交互”，这时候漏掉 pointer-events: none 和 tabindex="-1" 就会翻车。
典型错误现象：轮播图切换时用 opacity: 0 隐藏旧图，结果用户手快连点两下，触发了两次回调——因为元素还在监听 click。
- 必须配对使用：
opacity: 0; pointer-events: none; tabindex="-1" - 动画友好：和
transition: opacity 0.3s天然契合，比display切换流畅得多 - 性能影响小：不触发重排（reflow），只触发重绘（repaint）
用 JS 切换隐藏状态时最容易踩的坑
直接操作 style.display 最危险：它会覆盖所有 CSS 媒体查询规则，比如你写了 @media (max-width: 768px) { .nav { display: flex; } }，JS 一设 display: none，小屏下导航栏就永远消失了。
真正健壮的做法是切 class，把显示逻辑全交给 CSS。
- 推荐写法：
el.classList.toggle("is-hidden")，然后在 CSS 里定义.is-hidden { display: none; } - 避免用
el.style.display = ""清空内联样式——它不会恢复来自 CSS 文件的值，只会回退到浏览器默认值（比如div变成inline） - SSR 场景下，服务端已渲染的
display: none内联样式，客户端 JS 第一次 toggle 时可能闪一下，加data-loaded标记或用requestIdleCallback延迟初始化
最麻烦的其实是“部分隐藏”：比如表格里某列要隐藏，但又不能用 display: none（会破坏 colgroup 对齐），这时候得靠 visibility: collapse——但它在非表格元素上表现不一致，别乱试。
