多数情况下优先用 display，除非需保留布局占位；display: none 彻底移除元素并触发回流，visibility: hidden 仅隐藏但占位且只重绘，opacity: 0 透明但可交互。
响应式场景下该用 display 还是 visibility？
多数情况下优先选 display，除非你明确需要保留布局占位。比如导航栏在小屏收起时，如果用 visibility: hidden，下方内容不会上移，会留下一块空白——这不是 bug，是它本来的设计行为。
-
display: none触发回流+重绘，但彻底移除元素，适合“不想要这块空间”的场景 -
visibility: hidden只触发重绘，适合频繁切换且不能容忍布局抖动的动画（如 hover 展开菜单前的预隐藏） - 表格行/列隐藏优先试
visibility: collapse，但注意 Safari 对它的支持不稳定，非表格元素上它等同于hidden
媒体查询中写 visibility 要小心继承问题
如果你在 @media 里只设父容器 visibility: hidden，子元素默认也会被隐藏——哪怕它们自己写了 visibility: visible，也得显式声明才生效。这和 display 的“完全移除”逻辑不同。
- 错误写法：
.menu { visibility: hidden; } @media (min-width: 768px) { .menu { visibility: visible; } }—— 子项仍可能意外不可见 - 稳妥写法：对关键子元素单独加
visibility: visible，或改用display避免继承干扰 - 调试时用浏览器开发者工具检查 computed 样式，确认最终生效的是哪个
visibility值
opacity: 0 不等于 visibility: hidden
三者常被混用，但 opacity: 0 是透明而非隐藏：元素仍占位、可交互、能接收事件。它和 visibility: hidden 的根本区别在于是否响应用户操作。
-
visibility: hidden下，click事件无法触发（除非 JS 强制 dispatch） -
opacity: 0下，鼠标悬停、点击依然有效，只是看不见——适合做“视觉隐藏但功能保留”的过渡 - 动画中用
opacity+transition更顺滑；用visibility切换更轻量，但无渐变效果
display: none 在 flex/grid 容器里会破坏布局结构
当目标元素是 flex 或 grid 的直接子项时，display: none 会让它彻底退出布局计算，导致其他子项自动重排——这有时是优点，有时是陷阱。
- 想让某个 grid item 暂时“隐身”但保持网格轨道不变，只能用
visibility: hidden或opacity: 0 - flex 容器中隐藏中间项后，前后项会紧贴，若需维持间距，得额外加
margin或用伪元素占位 - 没有万能方案：先明确你要的是“移走”还是“藏起来”，再决定用哪个属性
visibility: collapse 在表格中的跨浏览器差异——Chrome 和 Firefox 里它真能收缩行高，Safari 却可能留缝。别依赖它做精确对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
