极客笔记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虽然都可以达到隐藏元素的目的，但它们之间有重要的区别。理解它们的区别是前端开发中非常重要的一部分，它们将影响你的页面布局和交互。