display: none;与visibility: hidden;的区别

display: none;、visibility: hidden; 和 opacity: 0; 都是用于隐藏元素的不同 CSS 属性，它们之间有一些关键的区别。以下是它们的比较：

1. display: none;：
   • 元素渲染： 元素不会在页面上占据空间，即它不会影响布局。
   • 子元素： 子元素会被完全移除，不会在页面上显示
   • 交互： 元素及其子元素都不可见，不可交互。
   • 效果： 元素及其子元素在页面上完全消失。

.hidden-element {
  display: none;
}

2. visibility: hidden;：
   • 元素渲染： 元素在页面上占据空间，即它会影响布局。
   • 子元素： 仍存在于文档流中，但其内容不可见。
   • 交互： 元素在页面上仍然占据位置，但不可见，因此它的子元素仍然是可交互的。
   • 效果： 元素在页面上占据空间，但不可见。

.hidden-element {
  visibility: hidden;
}

3. opacity: 0;：
   • 元素渲染： 元素在页面上占据空间，即它会影响布局。
   • 子元素： 子元素保留在文档流中，不可见，但保留了元素的布局和渲染。
   • 交互： 元素在页面上仍然占据位置，不可见，但仍然可交互。
   • 效果： 元素在页面上占据空间，但呈现为完全透明。

.hidden-element {
  opacity: 0;
}

示例： 考虑以下 HTML 结构：

<div class="box">
  <p>This is some content.</p>
</div>

.hide-display {
  display: none;
}

.hide-visibility {
  visibility: hidden;
}

.hide-opacity {
  opacity: 0;
}

在这个例子中，应用 .hide-display 类的元素及其子元素将完全消失，不占据页面空间。应用 .hide-visibility 类的元素虽然不可见，但仍占据页面空间，其子元素也可见。应用 .hide-opacity 类的元素及其子元素在页面上占据空间，但呈现为完全透明，是不可见的。

<!-- 使用 display: none; -->
<div class="box hide-display">
  <p>This is some content.</p>
</div>

<!-- 使用 visibility: hidden; -->
<div class="box hide-visibility">
  <p>This is some content.</p>
</div>

<!-- 使用 opacity: 0; -->
<div class="box hide-opacity">
  <p>This is some content.</p>
</div>

选择使用哪个属性取决于设计和交互的需求。如果希望元素在页面上占据空间，但不可见，可以使用 visibility: hidden; 或 opacity: 0;；如果你希望元素完全消失，不占据空间，可以使用 display: none;。