display:none和visibility:hidden的区别

display:none和visibility:hidden的区别

display: none 和 visibility: hidden 是 CSS 中用于隐藏元素的两种常见方式，但它们在页面布局和渲染行为上有显著区别。以下是它们的详细对比：

1. 基本概念

(1) display: none

• 定义：将元素从文档流中完全移除，不占据任何空间。

• 特点：

  • 元素不可见，且不占据布局空间。

  • 子元素也会被隐藏。

  • 无法通过点击或键盘事件与元素交互。

(2) visibility: hidden

• 定义：隐藏元素，但元素仍占据布局空间。

• 特点：

  • 元素不可见，但仍占据布局空间。

  • 子元素可以通过 visibility: visible 单独显示。

  • 无法通过点击或键盘事件与元素交互。

2. 主要区别

特性	display: none	visibility: hidden
布局空间	不占据布局空间	占据布局空间
子元素	子元素也会被隐藏	子元素可以通过 visibility: visible 单独显示
交互性	无法与元素交互	无法与元素交互
渲染性能	触发重排（Reflow）和重绘（Repaint）	仅触发重绘（Repaint）
适用场景	完全移除元素	隐藏元素但保留布局空间

3. 详细对比

(1) 布局空间

• display: none：元素从文档流中移除，不占据任何空间。

<div style="display: none;">Hidden Element</div>
<div>Visible Element</div>

• 页面布局中不会为隐藏的元素留出空间。

• visibility: hidden：元素仍占据布局空间，但不可见。

<div style="visibility: hidden;">Hidden Element</div>
<div>Visible Element</div>

• 页面布局中会为隐藏的元素留出空间。

(2) 子元素

• display: none：子元素也会被隐藏，无法单独显示。

<div style="display: none;">
  <div>Child Element</div>
</div>

• visibility: hidden：子元素可以通过 visibility: visible 单独显示。

<div style="visibility: hidden;">
  <div style="visibility: visible;">Child Element</div>
</div>

(3) 交互性

• display: none 和 visibility: hidden：隐藏的元素无法通过点击或键盘事件交互。

(4) 渲染性能

• display: none：触发重排（Reflow）和重绘（Repaint），性能开销较大。

• visibility: hidden：仅触发重绘（Repaint），性能开销较小。

(5) 适用场景

• display: none：

  • 完全移除元素，不占据布局空间。

  • 适合动态加载内容或条件渲染。

• visibility: hidden：

  • 隐藏元素但保留布局空间。

  • 适合需要保持布局稳定的场景。

4. 示例

(1) display: none 示例

<div style="display: none;">
  This element is hidden and does not take up space.
</div>
<div>
  This element is visible.
</div>

• 页面布局中不会为隐藏的元素留出空间。

(2) visibility: hidden 示例

<div style="visibility: hidden;">
  This element is hidden but takes up space.
</div>
<div>
  This element is visible.
</div>

• 页面布局中会为隐藏的元素留出空间。

总结

• display: none：完全移除元素，不占据布局空间，适合动态加载内容。

• visibility: hidden：隐藏元素但保留布局空间，适合需要保持布局稳定的场景。

根据具体需求选择合适的方式，可以提升页面性能和用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github