CSS visibility:hidden和display:none之间的区别是什么

在本文中，我们将介绍CSS中visibility:hidden和display:none之间的区别。这两个属性在CSS中用于隐藏元素，但它们的实现方式和效果却有所不同。

阅读更多：CSS 教程

visibility:hidden

visibility:hidden用于隐藏元素，但保留其在文档中的空间。也就是说，元素在页面上不可见，但仍然占据着相同的位置和空间。

例如，假设我们有一个元素如下所示：

<div class="box"></div>

我们可以使用CSS将其隐藏，并保持元素所占据的位置：

.box {
  visibility: hidden;
}

这样，元素将不可见，但它仍然会占据文档中的空间。这意味着其他元素仍然会相对于该元素进行布局，并且可以将鼠标事件应用于该元素。

display:none

display:none也用于隐藏元素，但与visibility:hidden不同，它不仅使元素不可见，而且还会从文档中完全删除该元素的空间。也就是说，隐藏的元素不再存在于文档流中。

使用display:none隐藏元素的示例：

.box {
  display: none;
}

在这种情况下，元素不仅看不见，而且不占据任何空间。它对文档中的布局没有任何影响，并且不对鼠标事件做出任何响应。

区别总结

对于visibility:hidden和display:none，区别主要体现在以下几个方面：
1. 显示和布局：visibility:hidden隐藏的元素仍然在文档流中占据空间，而display:none隐藏的元素则不占据任何空间。
2. 鼠标事件：visibility:hidden隐藏的元素仍然可以响应鼠标事件，而display:none隐藏的元素不可见且不响应鼠标事件。
3. 动画效果：visibility:hidden在隐藏和显示时具有过渡效果，而display:none在切换时没有过渡效果。

需要根据实际需求来选择使用哪种隐藏方式。如果希望隐藏元素但保留其布局位置和鼠标事件响应，可以使用visibility:hidden。如果希望彻底删除元素及其空间，以及不响应鼠标事件，可以使用display:none。

以下是一个示例，展示了在visibility:hidden和display:none之间切换时的效果：

<div class="box"></div>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<button onclick="toggleDisplay()">Toggle Display</button>

<script>
function toggleVisibility() {
  var box = document.querySelector('.box');
  if (box.style.visibility === 'hidden') {
    box.style.visibility = 'visible';
  } else {
     box.style.visibility = 'hidden';
  }
}

function toggleDisplay() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = 'block';
  } else {
     box.style.display = 'none';
  }
}
</script>

上述示例中的两个按钮分别用于切换visibility:hidden和display:none之间的状态。点击按钮时，元素的显示状态将相应地改变。