display: none 彻底移除元素且不占空间，触发重排重绘，子元素一并隐藏；visibility: hidden 仅视觉隐藏但保留布局空间，不触发重排，支持 visibility 过渡但需配合 opacity 实现渐变效果。
display: none 和 visibility: hidden 的核心区别
隐藏元素却不占空间，必须用 display: none；visibility: hidden 只是“看不见”，但位置、尺寸、盒模型照常参与布局——它依然占空间。
什么时候该用 display: none
适用于需要彻底移出文档流的场景，比如切换 Tab 面板、条件渲染弹窗、响应式折叠导航栏。它的行为等价于元素被临时删掉。
-
display: none触发重排（reflow）和重绘（repaint） - 子元素一并隐藏，且无法被聚焦、无法被屏幕阅读器读取（除非额外加
aria-hidden="false"等逻辑） - 不能设置过渡动画（
transition对display无效） - JavaScript 查询
offsetHeight、getBoundingClientRect()返回0
visibility: hidden 的真实用途
它不是“隐藏占位符”的替代方案，而是为特定交互保留布局结构：比如实现 hover 展开菜单时保持下方内容不动，或做 loading 占位 + 内容淡入的组合效果。
- 不触发重排，只重绘，性能略优（但差异通常可忽略）
- 子元素默认继承该状态，但可通过
visibility: visible单独恢复（这点很关键） - 支持
transition: visibility 0.2s，但需配合opacity才有视觉渐变效果 - JavaScript 查询
offsetHeight仍返回真实值
常见错误与替代方案
想用 visibility: hidden 实现“不占空间”是典型误解；想给 display: none 加 fade 动画也会失败。
立即学习“前端免费学习笔记（深入）”；
- 要过渡隐藏/显示，用
opacity: 0+pointer-events: none+transition，再配合 JS 在动画结束后设display: none - 用
position: absolute+left: -9999px是旧式“隐藏但可读”方案，现在更推荐clip-path: inset(100%)或aria-hidden配合语义化处理 - 服务端渲染中，
display: none的元素仍会生成 DOM 节点，若需真正省流量，得靠后端逻辑跳过输出
.fade-out {
opacity: 0;
transition: opacity 0.3s ease;
}
.fade-out.hidden {
pointer-events: none;
}
/* 动画结束后手动移除元素或设 display: none */
真正难的不是选哪个属性，而是判断“要不要保留布局上下文”——这个决策一旦错，后续所有动画、JS 尺寸计算、无障碍支持都会连锁出问题。
