display: none 彻底移出渲染流，触发重排；visibility: hidden 保留占位仅隐藏内容，触发重绘，且子元素设 visible 仍可见。
display: none 和 visibility: hidden 都能“看不见”，但浏览器处理方式完全不同
它们根本不是同一种隐藏——display: none 是彻底移出渲染流，visibility: hidden 是“透明但占位”。选错会导致布局跳动、焦点异常、屏幕阅读器行为意外等问题。
display: none 会触发重排（reflow），visibility: hidden 只触发重绘（repaint）
这意味着：display: none 会让元素从 DOM 布局计算中消失，父容器和兄弟元素会立刻重新排列；而 visibility: hidden 保留盒模型尺寸、位置、margin/padding，只是不画内容。
- 动画切换时用
visibility: hidden+opacity: 0更平滑，避免 layout thrashing - 表单校验提示层如果用
display: none切换，可能让输入框焦点偏移或键盘失焦 - SEO 和可访问性上，
display: none的内容通常被屏幕阅读器忽略；visibility: hidden的内容仍可能被读取（取决于 UA 实现，但不可依赖）
子元素无法通过 visibility: hidden 继承“隐藏效果”
visibility 是可继承属性，但有个关键例外：当父元素设为 visibility: hidden，子元素设 visibility: visible 依然可见——这是它和 display 最反直觉的差异。
- 常见误用：给弹窗容器加
visibility: hidden，再给内部按钮设visibility: visible，以为能单独显示按钮——实际按钮确实会显示，但整个弹窗区域仍留白占位 - 想实现“局部显隐”，必须确保父级没用
visibility: hidden，改用display: none或opacity: 0+pointer-events: none -
display: none下子元素无论怎么设置display都无效，完全被剪除
用 JavaScript 切换时，注意 getComputedStyle 的返回值陷阱
运行时读取样式时：getComputedStyle(el).display 返回 "none" 很明确；但 getComputedStyle(el).visibility 即使父级是 hidden，也可能返回 "visible"（如果子元素显式设了 visible）。
立即学习“前端免费学习笔记（深入）”；
- 判断元素是否真正“不可见”，别只看单个属性——要综合
offsetParent、offsetWidth/Height、getClientRects().length - 用
el.offsetParent === null可靠检测display: none（但对visibility: hidden不适用） - 动画库如 GSAP 内部会自动区分二者；自己写过渡逻辑时，务必先
getComputedStyle确认当前状态，再决定用哪种方式切回
display: none 控制 tab 面板，你又在 JS 里用 visibility: hidden 临时遮罩某块区域，结果遮罩失效或布局塌陷。这种问题往往要翻三遍 DOM 树才能定位。 
