使用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:
这段文字不会上移
上面的段落仍会从原位置开始显示,中间留空。
适用场景建议
- 需要保留布局结构时,用 visibility: hidden,比如动画切换或临时隐藏。
- 彻底移除元素并释放空间时,使用 display: none。
- 在表格中动态隐藏行或列,可尝试 visibility: collapse,浏览器会优化处理。









