使用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 都能让元素不可见，但行为不同：
可爱护士形象矢量图矢量素材
可爱护士形象矢量图矢量素材适用于医疗保健品牌宣传（医疗保健机构的品牌宣传材料，如海报、传单、广告等）、教育性儿童图书（向儿童介绍健康和医疗知识的图书中作为插图）、医院或诊所内部标识（医院或诊所的内部导航标识、科室指示牌等）、卫生教育课程（卫生教育课程的教材、活动手册或幻灯片中的视觉元素）、儿童医疗设施（儿童医院或儿科诊室的装饰和环境布置）、公共医疗卫生宣传、社交媒体健康宣传（社交媒体上分享的健康小
0 查看详情
立即学习“前端免费学习笔记（深入）”；
设置 visibility: hidden 后，元素看不见，但依然占据原本的空间，周围的元素不会重新排列。 使用 display: none，元素完全从渲染树中移除，不占空间，页面会重新布局。
举例来说，如果有一个隐藏的 div：
我不可见，但占位置这段文字不会上移
上面的段落仍会从原位置开始显示，中间留空。
适用场景建议
需要保留布局结构时，用 visibility: hidden，比如动画切换或临时隐藏。 彻底移除元素并释放空间时，使用 display: none。 在表格中动态隐藏行或列，可尝试 visibility: collapse，浏览器会优化处理。基本上就这些，根据实际需求选择合适的方式即可。
以上就是如何用css设置元素的可见性visibility的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1011674.html
微信扫一扫 
支付宝扫一扫 
