CSS 可见性

对比 visibility、opacity 与 display 控制元素显示差异，直观呈现元素是否可见、是否占位、是否可交互，支持关键词过滤与一键复制示例代码，全部在浏览器本地完成。

可见性对照表共 6 种声明

快速过滤

直接定位声明

声明	可见	占位	可交互

点击表格行可查看详细说明、效果预览与示例代码。

效果预览

前一个元素目标元素后一个元素

当前声明visibility: visible

是否可见可见

是否占位占位

是否可交互可交互

目标元素被隐藏时观察左右两侧元素的位置是否变化，即可判断是否占位。

示例代码

选择建议

需要保留布局占位时使用 visibility: hidden；完全移除布局时使用 display: none。
需要淡入淡出动画时使用 opacity，其可以参与过渡与动画。
visibility: hidden 与 opacity: 0 的子元素都可通过覆盖恢复显示（opacity 需同时覆盖）。
visibility: collapse 对表格行/列生效时会折叠并让出空间。
仅隐藏视觉效果但仍需可点击时，优先使用 opacity: 0。