visibility: hidden 保留布局空间且元素仍可交互，display: none 彻底移除元素并触发重排——核心区别在于是否占位及是否脱离文档流。
用 visibility: hidden 隐藏文字，元素仍占布局空间；用 display: none 隐藏，则完全脱离文档流，不占空间——这是最核心区别，选错会导致页面错位或交互异常。
什么时候该用 visibility: hidden
适合需要保留占位、但临时不可见的场景，比如悬停显示菜单前的预加载、动画过渡帧、或配合 JS 控制可见性但不想触发布局重排（reflow）。
- 元素依然响应
getBoundingClientRect()，offsetTop等属性有效 - 子元素可通过设置
visibility: visible单独显示（继承特性） - 不会触发浏览器重排，只触发重绘（repaint），性能略优
- 屏幕阅读器默认仍会读取内容（可加
aria-hidden="true"控制）
什么时候必须用 display: none
当需要彻底移除元素对布局的影响，或隐藏后不希望它参与任何渲染计算时使用，比如选项卡切换、条件渲染区块、模态框关闭状态。
- 元素从渲染树中移除，
offsetTop、getBoundingClientRect()返回 0 或 null - 子元素一并消失，无继承例外
- 会触发重排，可能影响性能（尤其频繁切换时）
- 屏幕阅读器默认跳过该元素（语义上真正“不存在”）
visibility 和 display 混用的坑
二者行为不正交，混用容易产生意外效果。例如：
立即学习“前端免费学习笔记（深入）”；
- 父元素设了
display: none，子元素再设visibility: visible—— 无效，子元素仍不可见 - 父元素设了
visibility: hidden，子元素设display: none—— 子元素消失，但父元素仍占位，可能造成空白区域 - 用 CSS 动画控制
visibility时，它不支持过渡（transition对 visibility 无效），需配合opacity或clip-path
/* 错误：visibility 无法 transition */
.element {
visibility: hidden;
transition: visibility 0.3s; /* 不生效 */
}
/ 正确替代方案之一 /
.element {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
}
.element.show {
opacity: 1;
visibility: visible;
}
实际开发中，别只看“是否看不见”，得盯住 DOM 占位、JS 属性读取、无障碍支持和性能反馈这四点。一个 display: none 修好了布局错乱，却让某个 querySelector 找不到节点——这种问题，往往就卡在没想清楚“隐藏”的真实含义。
