visibility:hidden 元素仍在文档流中且占据空间，仅视觉隐藏；display:none 则完全脱离渲染树、不占空间、触发重排。前者适合需保持布局稳定的显隐切换，后者适用于彻底移除显示的场景。
visibility:hidden 元素还在文档流里，但看不见
它只是把内容“藏起来”，不占空间这个说法是错的——visibility:hidden 的元素依然占据原有位置，周围元素不会重新排列。适合需要频繁切换显隐、又不想触发重排（reflow）的场景，比如下拉菜单收起时保留占位、动画过渡中临时隐藏某部分。
- 支持 css 动画过渡
visibility属性（虽然从 hidden → visible 不会渐变，但配合opacity可以实现淡入） - 子元素设为
visibility:visible仍可显示（继承性：hidden 会继承，但可被子元素显式覆盖） - 屏幕阅读器默认仍会读取内容，无障碍需额外处理（如加
aria-hidden="true"） - JavaScript 中
getComputedStyle(el).visibility === "hidden"可检测，但offsetHeight和clientWidth仍返回真实尺寸
display:none 元素彻底退出渲染树
display:none 是真“消失”：不渲染、不占空间、不响应事件、不参与任何布局计算。dom 节点还在，但浏览器直接跳过它的样式计算和绘制流程。
- 触发重排（reflow）和重绘（repaint），频繁切换性能开销比
visibility:hidden大 - 子元素一并失效，无法通过设置子元素
display:block恢复显示 - 屏幕阅读器完全忽略，无需额外 aria 处理
-
offsetHeight、getBoundingClientRect()等返回 0 或空对象，常用来做存在性判断（但注意：仅适用于已挂载且样式生效的元素）
用错的典型错误：想隐藏又怕影响布局，结果用了 display:none
比如轮播图切换时，把非当前页卡片设为 display:none，导致容器高度反复坍缩抖动；或者 Tooltip 隐藏后，下方按钮上移造成点击错位。这类情况本质是要“视觉隐藏 + 保持布局稳定”，visibility:hidden 才是正解。
- 常见误判：看到元素“看不见了”就以为
display:none更干净，忽略了布局稳定性需求 - 调试技巧：在 DevTools 里选中元素，看 Styles 面板中
display和visibility哪个被最终应用（注意层叠顺序和 !important） - React/Vue 中动态绑定 class 时，别写成
v-show="false"却配了display:none的 CSS —— 应该用框架内置的v-show（它内部就是切display）或手动控制visibility
兼容性和边界情况要注意什么
两者在现代浏览器中行为一致，但老版本 IE（IE8-）对 visibility:hidden 在 table-cell 上有渲染 bug；而 display:none 在 details / summary 元素上可能干扰原生展开逻辑。
立即学习“前端免费学习笔记（深入）”；
-
visibility:hidden对audio、video元素无效（仍会播放），必须用display:none或hidden属性 - 打印样式表中，
display:none的内容默认不出现在打印结果里；visibility:hidden的内容也不显示，但若父级有print媒体查询覆盖，行为可能不一致 - 动画库（如 GSAP）默认对
display:none元素跳过操作，需先设为display:block再执行动画
事情说清了就结束。真正难的是判断“要不要维持布局”，而不是记住哪个属性叫什么。