CSS可见性控制：visibilityhiddenvisiblecollapse详解
2026-01-26 09:12:58
0浏览
收藏
在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS控制元素可见性：visibility hidden visible collapse解析》，聊聊，希望可以帮助到正在努力赚钱的你。
visibility有三个值：visible使元素正常显示；hidden隐藏元素但保留空间；collapse用于表格，隐藏且不占空间。
在CSS中控制元素的可见性，主要通过 visibility 属性实现。它有三个常用取值：visible、hidden 和 collapse。虽然它们都影响元素的显示状态，但行为上有重要区别。
visibility: visible
这是 visibility 的默认值。
表示元素正常显示，完全可见，不影响页面布局。- 元素占据原本的空间
- 可以被用户看到
- 可触发事件（如点击、hover）
visibility: hidden
将元素隐藏，但仍然保留其在文档流中的空间。
与 display: none 不同，hidden 只是“看不见”，不是“不存在”。- 元素不可见，但位置仍被保留
- 页面布局不会重排
- 无法交互（如点击无效，但可通过 JS 强制触发）
适用于临时隐藏元素且不希望引起布局变化的场景，比如轮播图中的非活动项。
visibility: collapse
主要用于表格元素（如
DeepSeek官网入口及网页使用教程 
