CSS visibility:hidden和display:none的区别

在前端开发中，我们经常会使用CSS属性来隐藏一个元素，其中两个常见的属性是visibility：hidden和display：none。虽然它们都可以达到隐藏一个元素的目的，但它们之间有很大的区别。

属性含义

首先，让我们看看这两个属性的具体含义。visibility：hidden是指隐藏一个元素，使其在页面上不可见，但仍然占用页面布局空间，也就是说如果有两个元素紧挨着，那么隐藏其中一个元素，另一个元素的位置不会发生变化。

visibility: hidden;

display：none是指完全删除一个元素，不仅在页面上不可见，而且不占用页面布局空间，也就是说如果有两个元素紧挨着，那么隐藏其中一个元素，另一个元素会沿着原本被隐藏元素的位置移动。

display: none;

小结

下面我们列出了visibility：hidden和display：none两个属性的主要区别：

特征	visibility：hidden	display：none
是否占用空间	占用	不占用
是否可选中	可选中，可以和其他元素重叠	不可选中，不和其他元素重叠
是否触发事件	触发	不触发

结论

visibility：hidden和display：none虽然都可以达到隐藏元素的目的，但它们之间有重要的区别。理解它们的区别是前端开发中非常重要的一部分，它们将影响你的页面布局和交互。