display: none使元素彻底退出文档流、不占空间，visibility: hidden则保留在文档流中、维持尺寸位置；可通过布局跳动、Computed尺寸、子元素显隐、交互可访问性四方面区分。
要区分元素是否占位，关键看它在文档流中是否存在——display: none让元素彻底退出文档流，不占空间；visibility: hidden则保留在文档流中，维持原有尺寸和位置。
看页面布局是否“跳动”
隐藏元素后，如果周围内容立刻上移或左右收缩，说明用了 display: none；如果空白区域仍在、其他元素位置纹丝不动，就是 visibility: hidden。
- 例如：两个并排按钮，隐藏左边一个。若右边按钮自动左移贴边 →
display: none - 若右边按钮原地不动，中间留出空隙 →
visibility: hidden
用开发者工具验证尺寸数据
在浏览器中选中目标元素，打开“Computed”面板：
-
offsetHeight、getBoundingClientRect()返回全为0→display: none - 这些值仍显示真实宽高（如
24px × 40px）→visibility: hidden
检查子元素是否还能显示
给父元素设置隐藏样式后，再给某个子元素加 visibility: visible：
- 子元素成功显现 → 父元素用的是
visibility: hidden（该属性可被子级覆盖） - 子元素完全不可见 → 父元素用的是
display: none（子元素一并被移除）
留意交互与可访问性表现
隐藏后尝试 tab 键聚焦或屏幕阅读器朗读：
- 无法聚焦、读屏器跳过 → 很可能是
display: none - 能聚焦但看不见光标，或读屏器仍读出文字 → 多为
visibility: hidden
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
