17370845950

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 找不到节点——这种问题，往往就卡在没想清楚“隐藏”的真实含义。