CSS属性中Display与Visibility区别分析

以下是关于“CSS属性中Display与Visibility区别分析”的详细攻略：

Display 与 Visibility 的区别

Display 与 Visibility 都是 CSS 属性用于控制元素的显示和隐藏，但它们的实现方式有所不同，主要体现在以下两方面：

1. 元素的完全不展示

Display 属性可以完全隐藏元素，不占据文档流，且不保留元素的空间，而 Visibility 属性则可以隐藏元素，但是元素还是占据原有的空间，并没有真正的完全隐藏。

Display 属性常用的属性值有：

• none：将元素完全隐藏，不占据文档流，且不保留元素的空间。如果元素之前已设置了宽度、高度，则在 Display 为 none 时这些属性都将失效。
• inline：将元素作为内联元素展示，和相邻的元素在同一行展示，但是不能设置宽度和高度等块级属性。
• block：将元素展示为块级元素，始终占据一行，可以设置宽度、高度等块级属性。

2. 元素的显示与隐藏

另外，Display 和 Visibility 的实现方式也决定了它们在显示与隐藏过程中的表现有所不同。

Display 属性常用的属性值有：

• block：元素默认为显示，设为 Display: none 后元素将不会显示出来。
• inline：元素默认为显示，设为 Display: none 后元素将不会显示出来。
• inline-block：元素默认为显示，设为 Display: none 后元素将不会显示出来。

相比之下 Visibility 属性只有两个属性值：

• visible：元素默认为显示，设为 Visibility: hidden 后元素将被隐藏。
• hidden：元素被隐藏后仍然占据原来的空间。

示例说明

Display 属性示例

<!-- HTML 代码 -->
<div class="demo" style="width: 100px; height: 100px; background-color: yellow;"></div>

/* CSS 代码 */
.demo{
  display:none;
}

在上述示例中，通过 Display: none 将 div 元素完全隐藏，不占据文档流，且不保留元素的空间。

Visibility 属性示例

<!-- HTML 代码 -->
<div class="demo" style="width: 100px; height: 100px; background-color: yellow;"></div>

/* CSS 代码 */
.demo{
  visibility:hidden;
}

在上述示例中，通过 Visibility: hidden 隐藏 div 元素，但是元素仍然占据原来的空间，不会改变文档流。