<think>好的，我现在需要帮助用户理解
CSS中
display:none和visibility:hidden的
区别。首先，我得回顾一下自己之前学过的相关知识，确保信息准确。根据引用[1]
和[2]，这两个属性都是用来隐藏元素的，但效果不同。
用户的问题很明确，就是想知道这两者的
区别和用法。首先，我应该从页面布局的影响入手。
display:none会让元素完全消失，不占空间，而
visibility:hidden只是隐藏内容，但保留原来的位置。比如，如果有三个并排的span，中间的那个用
display:none的话，两边的会靠拢，而用
visibility:hidden的话，中间的位置还是空着的，两边不会移动。这点在引用[2]中的Demo应该能直观展示。
接下来，用户可能还会关心这两个属性对元素交互的影响。比如，被
display:none隐藏的元素无法触发点击事件，而
visibility:hidden的元素虽然不可见，但可能仍然占据空间，会不会响应事件呢？根据我的记忆，
visibility:hidden的元素不会响应鼠标事件，但可能需要进一步确认。不过引用[3]提到了opacity
:0的情况，虽然不在当前问题范围内，但有时候用户可能会混淆这些属性，所以暂时不提。
然后，需要说明这两个属性的继承性。
visibility属性是会被子元素继承的，也就是说，如果父元素设置了
visibility:hidden，子元素也会不可见，但可以通过设置
visibility:visible来重新显示。而
display:none则不会继承，子元素无论怎么设置都不会显示，因为父元素已经不在渲染树中了。
另外，关于性能方面，可能需要提到重排
和重绘的问题。
display:none会导致文档重排（reflow），因为元素从布局中移除，周围元素要重新排列。而
visibility:hidden只会引起重绘（repaint），因为布局没有变化，只是视觉上隐藏。这对页面性能有一定影响，特别是在频繁切换显示隐藏时需要考虑。
还有，关于可访问性，屏幕阅读器是否会读取被这两个属性隐藏的内容？通常来说，
display:none的元素不会被读取，而
visibility:hidden的可能也不会，但可能需要更多资料支持。不过用户的问题可能暂时不需要涉及这方面，可以简要带过。
然后，我应该组织这些信息，分点说明两者的
区别，每个点尽量简洁明了。同时，给出示例代码，帮助用户更直观地理解。比如，用两个div，一个设置
display:none，另一个
visibility:hidden，展示它们在页面上的表现差异。
最后，总结使用场景。当需要完全移除元素并不占空间时用
display:none，比如动态切换显示；而需要保留布局占位时用
visibility:hidden，比如保持页面结构不变的情况下隐藏某个元素。
检查是否有遗漏点，比如是否提到动画支持？
visibility属性可以配合transition使用，但可能效果有限，而
display:none无法过渡，直接切换。这点可能对用户有帮助，可以补充。
现在需要确保回答结构清晰，分点明确，并引用提供的参考资料。同时，生成相关问题，比如性能影响、动画支持、实际应用场景等，帮助用户深入理解。</think>###
CSS中
display:none和visibility:hidden的
区别及用法
#### 1. **对页面布局的影响**
- **
display: none**：
元素**完全从文档流中移除**，不占据任何空间。其他元素会立即填充其原有位置，导致页面布局重新计算（触发重排）[^2]。
示例代码：
```
css
.hide-
display {
display: none; }
```
```html
<div class="hide-
display">隐藏元素</div>
<span>相邻元素</span> <!-- 会紧贴前一个非隐藏元素 -->
```
- **
visibility: hidden**：
元素**不可见但保留原有空间**，其他元素仍按原始布局排列，仅触发重绘[^2]。
示例代码：
```
css
.hide-
visibility {
visibility: hidden; }
```
```html
<div class="hide-
visibility">隐藏元素</div>
<span>相邻元素</span> <!-- 仍
与隐藏元素保持原始间距 -->
```
#### 2. **对子元素的影响**
- **
display: none**：
子元素**无论是否设置其他属性均不可见**，因为父元素已脱离渲染树。
- **
visibility: hidden**：
子元素默认继承该属性，但可通过单独设置 `
visibility: visible` 重新显示[^1]。
#### 3. **交互
与动画支持**
- **
display: none**：
元素无法响应任何事件（如点击、悬停），且无法直接应用过渡动画（需通过JavaScript动态切换属性）。
- **
visibility: hidden**：
元素**不响应事件**（即使占据空间），但可通过 `opacity
: 0` 配合实现淡出动画（需
与 `
visibility` 同步切换以避免交互残留）[^3]。
#### 4. **性能差异**
- **
display: none**：
切换时会触发**重排（Reflow）**，频繁操作可能影响性能。
- **
visibility: hidden**：
仅触发**重绘（Repaint）**，性能开销更小[^2]。
#### 5. **适用场景**
- 使用 **
display: none**：
- 需要**完全移除元素**（如动态切换选项卡内容）。
- 优化移动端首屏加载性能时隐藏非关键资源。
- 使用 **
visibility: hidden**：
- 需要**保留布局占位**（如占位加载骨架屏）。
- 实现**无障碍隐藏**（配合 `aria-hidden="true"` 供屏幕阅读器识别）。
---
### 示例对比
| 属性 | 显示效果 | 占据空间 | 触发事件 | 动画支持 |
|----------------------|----------|----------|----------|----------|
| `
display: none` | 完全隐藏 | 否 | 否 | 否 |
| `
visibility: hidden` | 完全隐藏 | 是 | 否 | 部分支持 |
---
扫一扫
2265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
