在前端开发中，`visibility` 和 `display` 是两个经常被混淆的概念。它们都用于控制元素的显示状态，但背后的机制却大相径庭。

首先，`visibility` 属性只控制元素是否可见，但它并不会改变元素在页面中的占据空间。例如，设置 `visibility: hidden;` 后，元素虽然不可见，但仍然占据页面的空间，就像一个隐形的盒子。而当使用 `visibility: visible;` 时，元素重新显现，空间依旧保留。

相比之下，`display` 属性则完全不同。当设置 `display: none;` 时，元素不仅不可见，还会从页面布局中完全移除，不再占用任何空间。这种情况下，其他元素会自动填补空出的位置。而当改为 `display: block;` 或其他值时，元素才会重新出现在页面上。

两者的区别可以用一个简单的比喻来理解：`visibility` 像是拉上窗帘，房间还在但看不见；而 `display` 则像是清空房间，它彻底消失了。因此，在编写 JavaScript 代码时，根据需求选择合适的属性至关重要！💪

标 签：