CSS中visibility属性使用详解

**CSS visibility 属性：控制元素可见性的利器** 想灵活控制网页元素的显示与隐藏，又不想改变页面布局？CSS 的 `visibility` 属性就能帮到你！本文详细解读 `visibility` 属性的用法，包括 `visible` (默认可见)、`hidden` (隐藏但占位) 和 `collapse` (表格元素专用) 三种取值。通过示例代码，让你快速掌握如何使用 `visibility` 属性隐藏或显示元素。同时，深入分析 `visibility: hidden` 与 `display: none` 的区别：前者隐藏元素但保留空间，后者彻底移除元素并释放空间。了解这些差异，能让你在开发中根据实际需求选择最合适的隐藏元素方法，优化用户体验。

使用visibility属性控制元素可见性，其值为visible、hidden或collapse；visibility: hidden隐藏元素但保留占位，而display: none则彻底移除元素并释放空间。

要控制元素的可见性，可以使用CSS的 visibility 属性。这个属性决定了元素是否显示，但不会影响页面布局。

visibility 的常用取值

以下是 visibility 支持的主要值：

• visible：元素正常显示（默认值）。
• hidden：元素不可见，但仍占据文档中的空间。
• collapse：主要用于表格行、列等，可隐藏且不占空间；在非表格元素上通常表现为 hidden。

示例：

.element-show {
  visibility: visible;
}

.element-hide {
  visibility: hidden;
}

与 display: none 的区别

visibility: hidden 和 display: none 都能让元素不可见，但行为不同：

• 设置 visibility: hidden 后，元素看不见，但依然占据原本的空间，周围的元素不会重新排列。
• 使用 display: none，元素完全从渲染树中移除，不占空间，页面会重新布局。

举例来说，如果有一个隐藏的 div：

<div style="visibility: hidden;">我不可见，但占位置</div>
<p>这段文字不会上移</p>

上面的段落仍会从原位置开始显示，中间留空。

适用场景建议

• 需要保留布局结构时，用 visibility: hidden，比如动画切换或临时隐藏。
• 彻底移除元素并释放空间时，使用 display: none。
• 在表格中动态隐藏行或列，可尝试 visibility: collapse，浏览器会优化处理。

今天关于《CSS中visibility属性使用详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！