display: none 彻底移除元素，不占空间、不响应事件、不可聚焦、不被屏幕阅读器读取；visibility: hidden 仅隐藏视觉，仍占布局空间、可聚焦、子元素可显、屏幕阅读器默认读取。
display: none 和 visibility: hidden 的根本区别
两者都能让元素“看不见”，但浏览器对它们的处理逻辑完全不同：display: none 是彻底移除渲染流程，元素不参与布局、不占空间、不响应事件；visibility: hidden 只是“盖住”元素，它仍占据原有位置、保留盒模型尺寸、能被 focus（部分场景下），甚至子元素可通过 visibility: visible 显现。
什么时候必须用 display: none
常见于需要真正“抽离”元素的场景，比如切换 Tab 面板、条件渲染弹窗、表单步骤控制。若误用 visibility: hidden，可能引发布局错位或点击穿透（背后元素被意外触发）。
- 父元素设
visibility: hidden，子元素设visibility: visible仍会显示——这在模态框遮罩层中容易导致内容“透出” -
display: none下的元素无法获取焦点，visibility: hidden下的input仍可被focus()调用，但用户看不见光标 - 动画无法直接过渡
display属性（它不是连续值），强行加transition: display 0.3s无效
visibility: hidden 的实用边界
适合需要保留布局结构、避免重排（reflow）的微调场景，比如悬停显示辅助图标、临时隐藏但需维持滚动锚点的区域。
- 元素设
visibility: hidden后，getBoundingClientRect()仍返回有效尺寸，而display: none返回全为 0 - 屏幕阅读器默认忽略
display: none元素，但会读取visibility: hidden内容（除非额外加aria-hidden="true"） - 打印样式表中，
visibility: hidden不影响打印输出，display: none才真正不打印
替代方案：clip-path 或 position + overflow
当既要隐藏又要保留可访问性、动画可行性，或需局部裁剪时，display 和 visibility 都不是最优解。
立即学习“前端免费学习笔记（深入）”；
-
clip-path: inset(100%)可完全裁掉元素且支持 CSS 过渡，DOM 仍在、语义完整、可聚焦 -
position: absolute; left: -9999px配合overflow: hidden父容器，常用于“仅对屏幕阅读器可见”的 skip-link - 注意
opacity: 0不等于隐藏——它仍占空间、响应事件、影响性能（触发合成层）
真正难的不是选哪个属性，而是想清楚：你到底要移除视觉、移除交互、移除语义，还是只移除用户看见的部分。漏掉其中一环，后面排查就容易绕远。
