visibility属性用于控制元素可见性但不改变布局，其值为visible时显示，hidden时隐藏但仍占空间，collapse多用于表格；与display:none不同，visibility隐藏后仍保留位置，适合频繁切换且避免布局抖动的场景。
CSS 中的 visibility 属性用于控制元素的可见性，它可以在不改变页面布局的情况下隐藏或显示元素。与 display: none 不同，visibility 隐藏元素后仍保留其占用的空间。
visibility 的常用取值
visibility 支持以下几个主要值：
visible：元素正常显示（默认值）。 hidden：元素不可见，但仍占据文档流中的空间。 collapse：主要用于表格元素，表示折叠行或列；在非表格元素中通常表现为 hidden。
基本使用示例
通过设置 visibility 可快速切换元素的可见状态：
这个 div 被隐藏了，但占位还在这个 div 正常显示
上面代码中，第一个 div 不可见，但页面布局中仍为其保留空间，不会发生重排。
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
与 display: none 的区别
关键差异在于对布局的影响：
使用 visibility: hidden，元素不可见但位置保留，周围元素不会重新排列。 使用 display: none，元素完全从渲染树中移除，不占空间，会导致页面重新布局。
因此，如果需要频繁切换显示状态且避免布局抖动，visibility 更合适。
结合 JavaScript 动态控制
可以通过 JavaScript 修改 visibility 来实现动态显示/隐藏：
我是一个可以被隐藏的元素
点击按钮即可控制元素的可见性，同时不影响其他元素的位置。
基本上就这些。visibility 适合在保持布局稳定的同时控制显隐，理解它和 display 的区别能帮助你更精准地控制页面表现。
以上就是如何通过css visibility控制元素可见性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1057413.html
微信扫一扫 
支付宝扫一扫 
