应使用 visibility: hidden 而非 display: none，因其隐藏元素但保留布局占位、不触发重排、维持 dom 结构与尺寸可读性，且子元素可通过 visibility: visible 单独显示。
用 visibility: hidden 而不是 display: none
想让元素“还在 DOM 里、占位置、但看不见”，必须用 visibility: hidden。它不会触发重排（reflow），只影响绘制（paint），所以周围元素不会跳动，空白区域稳稳保留。
常见错误是直接写 display: none —— 这会让元素彻底退出文档流，占位消失，后续内容立刻上移，破坏原有布局节奏。
-
visibility: hidden下，offsetHeight和offsetWidth仍返回真实尺寸，JS 可安全读取 - 子元素若设
visibility: visible，会穿透显示（注意这点！） - 对屏幕阅读器默认仍可访问，如需兼顾无障碍，得额外加
aria-hidden="true"
需要隐藏但保留语义结构时，慎用 opacity: 0
opacity: 0 看似也能“隐形”，但它和 visibility: hidden 有本质区别：前者仍响应鼠标事件（click、hover 默认不拦截），且会参与焦点管理（Tab 键可能停在上面）。
如果你只是想藏文字或按钮，又怕用户误点或键盘聚焦，必须叠加 pointer-events: none 和 tabindex="-1"。
-
opacity: 0触发重绘（repaint），不触发重排；visibility: hidden性能略优 - 动画场景中，
opacity更适合做淡入淡出；纯占位隐藏选visibility - IE10+ 兼容没问题，但旧版 Android WebView 对
visibility的继承行为偶有偏差
HTML 层级里用 或空 <span></span> 补位很危险
别为了“留空白”手动塞 或空标签再硬加 CSS 宽高——这等于把结构逻辑和样式耦合死，后期改字体、行高、缩放时极易错位。
真正可控的做法是：让原始元素还在，仅视觉隐藏。哪怕内容是密码字段、API key 文本块，也应保留在 DOM 中，靠 CSS 控制显隐。
- 动态插入的敏感内容（如 JS 渲染的 token），优先用 class 切换
visually-hidden类，而非删 DOM - 若用伪元素生成占位（如
::after { content: " "; display: block; height: 24px;" }），务必确认父容器高度不受影响 - 打印样式表（
@media print）里，visibility: hidden默认仍生效，需显式覆盖
复杂场景下，clip-path 是更精细的隐藏方案
当既要隐藏又要防止意外交互（比如 iframe 里嵌了第三方 widget，但不想它响应滚动或点击），clip-path: inset(100%) 比 visibility: hidden 更彻底：它裁剪掉整个区域，连事件穿透都阻断。
不过这个属性在 Safari 旧版本（≤15.6）需要 -webkit-clip-path 前缀，且不能动画 inset 值。
-
clip-path不影响盒模型尺寸，空白区域照常保留 - 搭配
overflow: hidden使用时要小心，后者可能截断子元素溢出部分 - 调试时用浏览器开发者工具的“渲染”面板打开
clip-path可视化，比猜更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
