CSS 中，有哪些方式可以隐藏页面元素？区别？

问题解析

隐藏元素是常见需求，但不同的隐藏方式有不同的效果：有的完全从文档流移除，有的仅不可见但仍占位，有的还能响应交互。面试中考察这个问题，是想要了解候选人是否能根据场景选择合适的技术方案。

隐藏方式对比

方式	占据空间	响应交互	触发重排	使用场景
`display: none`	❌	❌	✅	完全移除元素
`visibility: hidden`	✅	❌	❌	保留布局占位
`opacity: 0`	✅	✅	❌	需要渐显/渐隐
`position: absolute; left: -9999px`	❌	❌	✅	屏幕外隐藏（如 SEO 文本）
`clip-path: polygon(0 0, 0 0, 0 0, 0 0)`	✅	❌	❌	视觉隐藏（无障碍）
`transform: scale(0)`	✅	❌	❌	动画缩放隐藏
`height: 0; overflow: hidden`	❌	❌	✅	折叠动画

各方式详解

1. display: none

.hidden {
  display: none;
}

特点：

元素从文档流完全移除
不占据空间
不响应事件
触发重排（Reflow），性能开销大

适用场景：

切换 Tab 内容
条件渲染
完全不用的元素

2. visibility: hidden

.invisible {
  visibility: hidden;
}

特点：

元素不可见，但仍占据空间
不响应事件
仅触发重绘（Repaint）
子元素可设置 visibility: visible 单独显示

适用场景：

需要保持布局稳定
占位加载状态

/* 父隐藏，子显示 */
.parent {
  visibility: hidden;
}
.child {
  visibility: visible; /* 子元素可见 */
}

3. opacity: 0

.transparent {
  opacity: 0;
}

特点：

完全透明，但仍占据空间
可以响应事件（点击、hover 等）
触发 GPU 加速，性能较好
子元素无法单独显示

适用场景：

需要过渡动画（fade in/out）
需要保持交互能力

.fade {
  opacity: 0;
  transition: opacity 0.3s;
}
.fade:hover {
  opacity: 1;
}

4. 绝对定位移出视口

.offscreen {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

特点：

元素仍在 DOM 中
不占据文档流空间
屏幕阅读器仍可访问

适用场景：

SEO 优化（隐藏但可爬取的文字）
无障碍辅助文本

5. clip-path 裁剪

.clipped {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  /* 或 */
  clip-path: inset(50%);
}

特点：

视觉上隐藏，但仍占据空间
不响应事件
现代浏览器支持

6. transform: scale(0)

.scaled {
  transform: scale(0);
}

特点：

缩放到 0
占据空间（变换原点位置）
GPU 加速，动画流畅

7. height: 0 + overflow: hidden

.collapsed {
  height: 0;
  overflow: hidden;
}

适用场景：

手风琴（Accordion）展开/收起动画
需要保留 padding 时需额外处理

/* 带过渡动画的手风琴 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 500px; /* 需要设置足够大的值 */
}

深入理解

重排 vs 重绘

属性	影响
display	重排（Reflow）- 影响布局
visibility	重绘（Repaint）- 仅外观
opacity	合成（Composite）- GPU 加速

性能排序：opacity > visibility > display

无障碍访问 (Accessibility)

/* 视觉隐藏但屏幕阅读器可读 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

SEO 考虑

display: none：搜索引擎可能认为内容不重要
屏幕外隐藏：搜索引擎正常抓取
visibility: hidden：搜索引擎可能仍会索引

最佳实践

根据场景选择

/* 场景1：Tab 切换 - 用 display */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* 场景2：加载占位 - 用 visibility */
.skeleton {
  visibility: hidden;
}

/* 场景3：渐显动画 - 用 opacity */
.modal {
  opacity: 0;
  transition: opacity 0.3s;
}
.modal.show {
  opacity: 1;
}

/* 场景4：无障碍文本 - 用屏幕外定位 */
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Vue/React 中的条件渲染

<!-- 条件渲染：添加/移除 DOM -->
<div v-if="show">内容</div>

<!-- 仅切换 display -->
<div v-show="show">内容</div>

// React 条件渲染
{show && <div>内容</div>}

// 或 CSS 切换
<div style={{ display: show ? 'block' : 'none' }}>内容</div>

面试要点

能够说出至少 4 种隐藏方式及其区别
理解重排和重绘对性能的影响
了解各方式对无障碍访问的影响
能够根据具体场景推荐合适的方案
知道 opacity: 0 和 visibility: hidden 在事件响应上的区别