[分享]css中 隐藏但占据空间的

CSS 中，有一种隐藏但占据空间的技术，它被称为“visibility: hidden;”。相比于“display: none;”，使用这种技术可以让元素隐藏起来，但仍然保留它原本的大小和位置。如果只...

CSS 中，有一种隐藏但占据空间的技术，它被称为“visibility: hidden;”。相比于“display: none;”，使用这种技术可以让元素隐藏起来，但仍然保留它原本的大小和位置。

如果只是想让元素消失不占据空间，可以使用“display: none;”。但是，“visibility: hidden;”可以在某些情况下有用：

/* 隐藏元素但不关闭它 */
.hidden {
  visibility: hidden;
} 

这种技术可以在需要时重新显示元素，而不必重新创建它。这可以提高页面性能。

然而，“visibility: hidden;”也有一个缺点，那就是隐藏的元素仍然可以被屏幕阅读器读取。如果需要完全隐藏元素，应该使用“display: none;”。

/* 彻底隐藏元素 */
.hidden {
  display: none;
} 

不能滥用隐藏技术。如果想隐藏元素，最好使用 CSS 和 JavaScript 等技术，而不是将元素放在不可见的区域。

最后，请注意，使用“visibility: hidden;”时，元素将占用空间，因此请谨慎使用此技术。