可见性属性
最后更新：2026-09-13
visibility 可见性属性
visibility 属性控制元素是否可见，与 display:none 的关键区别在于：hidden 仍占据布局空间，只是视觉上不可见。默认值 visible 正常显示。该属性是可继承的，常用于实现隐藏但保留占位的交互效果。
| 分类 | |
|---|---|
| 初始值 | visible |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
visibility: visible | hidden | collapse;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
visible | hidden | collapse | 关键字 | 控制元素是否可见（hidden 仍占空间） |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| visibility | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： visibility:hidden 元素仍占据空间，display:none 则完全移除布局。
❓ 常见问题
Qvisibility:hidden 和 display:none 有什么区别？
Avisibility:hidden 让元素不可见但仍占原布局空间，仍在文档流中，屏幕阅读器也会读到；display:none 把元素从文档流完全移除，不占空间、读不到内容。需隐藏但保留占位用 visibility:hidden，需彻底移除（且不渲染）用 display:none。
Qvisibility:hidden 和 opacity:0 有什么区别？
A两者视觉上都隐藏元素且保留空间，但：opacity:0 元素仍可被点击、仍响应事件，且可以平滑过渡动画；visibility:hidden 不再响应鼠标事件（可穿透），过渡支持有限。opacity 会创建新的层叠上下文；visibility 在隐藏时不影响子元素布局，子元素还能单独设为 visible 恢复显示。
Qvisibility 是继承的吗？
A是。visibility 是少数可继承的 CSS 属性，父元素设为 hidden 后子元素默认也隐藏，但子元素可以单独设置 visibility:visible 强制显示。利用这一点可以做子菜单、展开面板等交互：父容器 hidden，悬浮时让子元素 visible，无需改动父元素本身。
Qvisibility 支持过渡动画吗？
Avisibility 是离散型属性，transition 通常表现为切换而非渐变。常见技巧是与 opacity 一起过渡：opacity 从 0 渐变到 1，visibility 延迟到动画末尾再切换，实现淡入淡出，常用于弹窗、提示框的显隐动画。
🏷️ 相关属性
💡 相关案例
📚 相关教程
