三种隐藏方式对比

三种隐藏方式对比

属性	占据空间	在文档流	触发重排
display: none	❌	❌ 脱离	✅ 会
visibility: hidden	✅	✅ 保留	❌ 不会
opacity: 0	✅	✅ 保留	❌ 不会

---

说明

display: none

.box {
  display: none;
}

• 元素从渲染树移除
• 完全不占空间，相邻元素会顶上来
• 切换时会触发重排（reflow），性能开销较大

---

visibility: hidden

.box {
  visibility: hidden;
}

• 元素看不见但仍占位
• 不触发重排，只触发重绘

---

opacity: 0

.box {
  opacity: 0;
}

• 元素透明但仍占位
• 仍可被点击
• 性能最好（可走 GPU 合成层）

---

对子元素的影响

属性	子元素是否受影响	子元素能否单独恢复显示
display: none	✅ 全部隐藏	❌ 不能
visibility: hidden	✅ 全部隐藏	✅ 能（子元素设 visibility: visible）
opacity: 0	✅ 全部透明	❌ 不能（opacity 会叠加，子元素设 1 也无效）

visibility 子元素可以单独恢复

.parent {
  visibility: hidden;
}

.child {
  visibility: visible; /* 子元素单独显示，父元素仍隐藏 */
}

---

业务中用哪个多

• display: none：用得最多
  切换显示/隐藏、条件渲染、弹窗、下拉菜单等。

• opacity: 0：动画场景多
  淡入淡出过渡动画，配合 transition 使用。

• visibility: hidden：相对少用
  需要"占位但不显示"的场景，如骨架屏占位、防止布局抖动。

---

React/Vue 中的常见做法

{
  /* React 条件渲染，本质就是 display:none 或直接不渲染 */
}
{
  visible && <Modal />;
}

{
  /* 或用 className 切换 */
}
<div className={visible ? "" : "hidden"} />;

.hidden {
  display: none;
}

---