CSS中visibility控制元素显示隐藏方法

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS中如何用visibility控制元素显示隐藏》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

visibility属性用于控制元素可见性但不改变布局，其值为visible时显示，hidden时隐藏但仍占空间，collapse多用于表格；与display:none不同，visibility隐藏后仍保留位置，适合频繁切换且避免布局抖动的场景。

CSS 中的 visibility 属性用于控制元素的可见性，它可以在不改变页面布局的情况下隐藏或显示元素。与 display: none 不同，visibility 隐藏元素后仍保留其占用的空间。

visibility 的常用取值

visibility 支持以下几个主要值：

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

基本使用示例

通过设置 visibility 可快速切换元素的可见状态：

<div style="visibility: hidden;">这个 div 被隐藏了，但占位还在</div>
<div style="visibility: visible;">这个 div 正常显示</div>

上面代码中，第一个 div 不可见，但页面布局中仍为其保留空间，不会发生重排。

与 display: none 的区别

关键差异在于对布局的影响：

• 使用 visibility: hidden，元素不可见但位置保留，周围元素不会重新排列。
• 使用 display: none，元素完全从渲染树中移除，不占空间，会导致页面重新布局。

因此，如果需要频繁切换显示状态且避免布局抖动，visibility 更合适。

结合 JavaScript 动态控制

可以通过 JavaScript 修改 visibility 来实现动态显示/隐藏：

<div id="box">我是一个可以被隐藏的元素</div>
<button onclick="document.getElementById('box').style.visibility = 'hidden'">隐藏</button>
<button onclick="document.getElementById('box').style.visibility = 'visible'">显示</button>

点击按钮即可控制元素的可见性，同时不影响其他元素的位置。

终于介绍完啦！小伙伴们，这篇关于《CSS中visibility控制元素显示隐藏方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！