visibility有三个值:visible使元素正常显示;hidden隐藏元素但保留空间;collapse用于表格,隐藏且不占空间。

在CSS中控制元素的可见性,主要通过 visibility 属性实现。它有三个常用取值:visible、hidden 和 collapse。虽然它们都影响元素的显示状态,但行为上有重要区别。
visibility: visible
这是 visibility 的默认值。
表示元素正常显示,完全可见,不影响页面布局。- 元素占据原本的空间
- 可以被用户看到
- 可触发事件(如点击、hover)
visibility: hidden
将元素隐藏,但仍然保留其在文档流中的空间。
与 display: none 不同,hidden 只是“看不见”,不是“不存在”。- 元素不可见,但位置仍被保留
- 页面布局不会重排
- 无法交互(如点击无效,但可通过 JS 强制触发)
适用于临时隐藏元素且不希望引起布局变化的场景,比如轮播图中的非活动项。
立即学习“前端免费学习笔记(深入)”;
visibility: collapse
主要用于表格元素(如










