display none、visibility hidden 和 opacity 0
CSS 中三种常见隐藏方式在布局占位、交互和可见性上的差异。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
display none、visibility hidden 和 opacity 0
这三种写法都可能让元素“看不见”，但它们对布局和交互的影响完全不同。
一句话定义
display: none：元素直接不参与布局visibility: hidden：元素还占位，但不可见opacity: 0：元素可见度为 0，但本质上还在页面中
核心对比
| 方式 | 是否占据布局空间 | 是否可点击 | 是否真正不可见 |
|---|---|---|---|
display: none | 否 | 否 | 是 |
visibility: hidden | 是 | 否 | 是 |
opacity: 0 | 是 | 通常是 | 只是透明 |
各自的使用边界
display: none
- 元素脱离文档流
- 不再占据页面空间
- 适合真正移除显示结果的场景
visibility: hidden
- 元素仍然保留原来的布局位置
- 通常也不会响应用户点击
- 适合需要保留占位但暂时隐藏的场景
opacity: 0
- 元素仍占位
- 元素通常仍可响应鼠标事件和焦点
- 更适合做淡入淡出动画，而不是语义上的“隐藏”
最容易误解的点
opacity: 0不是“消失”，而是“完全透明”- 如果只想视觉隐藏并保留动画空间，
opacity往往比display更合适 - 如果要彻底不占位，只有
display: none最直接
最短记忆方式
display 管布局，visibility 管可见性，opacity 管透明度。
面试要点
来自 display-none-vs-visibility-hidden-vs-opacity-zero-interview-question 的面试视角整理。
一句话回答
display: none 会让元素不参与布局，visibility: hidden 让元素占位但不可见，opacity: 0 则只是完全透明，元素通常仍然存在并可交互。
最稳的回答主线
display: none：不占位，不显示visibility: hidden：占位，不显示，通常也不响应交互opacity: 0：占位，只是透明，很多场景下仍可点击
面试里可顺手补的一句
做淡入淡出动画时，opacity 往往更自然；要彻底从布局里移除时，才更像 display: none。
最短记忆方式
display 影响布局，visibility 影响可见性，opacity 影响透明度。