用 display: none 可使元素隐藏且不占空间，因其彻底移出文档流；visibility: hidden 则保留布局位置但禁用交互，适用于需维持布局稳定的场景。
想让元素隐藏后不占空间，直接用 display: none 就行；visibility: hidden 本来就是设计成“隐藏但留位”的，拿它来解决“占位问题”是方向反了。
为什么 visibility: hidden 会占位？
因为它的作用机制就是「视觉隐藏 + 文档流保留」：元素仍在盒模型计算中，父容器高度、兄弟元素位置、浮动影响都照常发生。这不是 bug，是 spec 定义的行为。
常见错误现象：
- 给导航菜单项加
visibility: hidden后，菜单栏高度没变，但点击空白区没反应——误以为“失效”，其实是它真在那儿，只是不可见也不响应事件 - 表单里隐藏某个
input却发现 label 对齐错乱——visibility: hidden不改变布局流，label 仍按原位置排版
display: none 真正移出文档流的实操表现
它会让浏览器彻底跳过该元素的布局（layout）和绘制（paint），后续渲染完全无视它存在。
使用场景：
- 权限控制：用户无权限时，直接移除按钮或操作区，避免 DOM 残留导致意外交互
- 条件渲染：如表单步骤切换，当前步之外的
fieldset设为display: none，父容器高度自动收缩 - SEO 敏感内容：不想被爬虫索引又不能删 DOM 的，
display: none比visibility: hidden更稳妥（尽管仍非推荐做法）
注意点：
- 切换瞬间会触发重排（reflow），频繁切换可能卡顿；若只是临时隐藏（比如 hover 展开前），
visibility: hidden反而更轻量 - 子元素一并消失，无法像
visibility那样用visibility: visible单独恢复某个子节点 - JavaScript 查询
offsetHeight或getBoundingClientRect()会返回0，可用于判断是否已真正隐藏
别混淆 opacity: 0 和 visibility: hidden
两者都“占位”，但行为关键不同：
-
opacity: 0元素默认仍响应鼠标事件（hover、click），需额外加pointer-events: none才禁用 -
visibility: hidden天然禁用所有事件，且不支持 transition 动画（值只有 visible/hidden/collapse，非连续） - 动画需求明确时：要渐隐渐显 → 选
opacity；只要瞬时隐藏+留位 → 选visibility
示例对比：
.fade-out { opacity: 0; transition: opacity 0.2s; }
.hide-now { visibility: hidden; } /* 加 transition 没效果 */
浮动元素隐藏后还“撑开”父容器？检查 BFC
如果对浮动子元素设了 display: none，但父容器高度没塌缩，大概率是父容器本身没形成 BFC，导致浮动脱离上下文——此时你删的是“视觉上的浮动”，但布局上它早就不属于父容器了。
验证方法：
- 开发者工具里选中该元素，看 computed 样式中
display是否真为none - 再看父容器的
height是固定值还是 auto；如果是 auto 却没塌，说明清除机制失效
修复建议：
- 给父容器加
overflow: hidden、display: flow-root或float: left（任一即可触发 BFC） - 避免混用
float和现代布局（flex/grid），浮动本身已是过时方案，隐藏逻辑更易出错
真正容易被忽略的点：不是所有“隐藏”都要追求不占位；visibility: hidden 在保持布局稳定、减少重排、支持子元素局部显隐等方面有不可替代性。选哪个，取决于你到底想“移除”还是“藏起来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
