display: none 彻底移除元素，不占空间、不响应事件；visibility: hidden 仅隐藏但保留占位，子元素可覆盖显示。前者适合开关式显隐，后者适用于需保持布局或过渡动画的场景。
display: none 和 visibility: hidden 的行为差异必须分清
二者都常被当作“隐藏工具类”使用，但触发的渲染行为完全不同：display: none 会彻底移除元素的文档流位置，不占空间、不响应事件、子元素也无法继承显示；而 visibility: hidden 仅让元素不可见，仍占据布局空间，且子元素可通过 visibility: visible 覆盖恢复显示。
这意味着：做「开关式显隐」（比如侧边栏收起）优先用 display: none；做「视觉暂隐但保留占位」（比如 hover 悬停前的预加载占位）才考虑 visibility: hidden。
Tailwind 或自定义工具类中 display-none 的典型写法
主流 CSS 工具库（如 Tailwind）默认提供 hidden 类，其底层就是 display: none。如果你在用 PostCSS 或手写工具类，需确保该类没有被其他规则意外覆盖（比如被 !important 或更高优先级选择器干扰）。
-
hidden是最简写法，语义清晰，兼容性好（所有现代浏览器及 IE9+） - 避免写成
display-none这类自定义类名——容易和 BEM 命名冲突，也违背工具类命名惯例 - 若需响应式隐藏，Tailwind 中用
sm:hidden md:block等组合；自定义时建议用媒体查询包裹@media (max-width: 640px) { .hidden-sm { display: none; } }
visibility: hidden 不适合做“切换开关”，但有特定用途
它不会触发重排（reflow），只触发重绘（repaint），性能略优于 display: none ——但这点差异在绝大多数场景下可忽略。真正关键的是它的继承性和占位特性。
立即学习“前端免费学习笔记（深入）”；
常见误用：给父容器加 visibility: hidden 后发现子元素按钮还能点。这是因为 visibility 可被子元素显式设为 visible 绕过，而 display: none 下子元素完全不参与渲染。
适合场景：
- 配合
transition做淡出动画（visibility可过渡，display不可） - 实现“视觉隐藏但屏幕阅读器可读”的辅助功能（需额外加
aria-hidden="false"控制） - 临时屏蔽某区域交互，但保持布局稳定（如加载中占位）
React/Vue 中用工具类控制显隐时的 DOM 更新陷阱
直接切类名没问题，但要注意：如果用 display: none 隐藏后又通过 JS 操作其子元素（比如 querySelector 获取 input 并 focus），会失败——因为元素已脱离渲染树，querySelector 找不到它，focus 也会静默忽略。
此时要么改用 visibility: hidden + opacity: 0 组合模拟隐藏，要么在显示前先确保类名已移除并等待一次 reflow（例如用 setTimeout(() => el.focus(), 0)）。
更稳妥的做法是：显隐逻辑交给组件状态驱动，配合 key 强制重挂载，或用 aria-hidden + inert 属性辅助可访问性控制。
.hidden {
display: none;
}
<p>.invisible {
visibility: hidden;
}</p><p>/<em> 若需过渡效果 </em>/
.fade-out {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease;
}工具类不是万能胶，display: none 和 visibility: hidden 的边界一旦模糊，后续调试 layout shift、focus 失败、SSR 与 CSR 渲染不一致等问题就会集中爆发。
