visibility: hidden 是默认首选，因它原生支持隐藏但占位，元素仍参与文档流、盒模型完整保留、父容器高度不塌缩、周围元素位置不变，且子元素可单独设 visible 恢复。
要让 HTML 元素不可见但保留占位，visibility: hidden 是最直接、语义明确、开箱即用的方案；opacity: 0 + pointer-events: none 是动画友好型替代，但需手动补全交互控制；content-visibility: hidden 不适用——它不保留“视觉占位”，而是跳过渲染、依赖 contain-intrinsic-size 才能稳住布局，且兼容性有限。
visibility: hidden 为什么是默认首选
它原生支持“隐藏但占位”：元素仍参与文档流，盒模型（offsetWidth、margin、height）全部保留，父容器高度不会塌缩，周围元素位置完全不变。
- 子元素默认继承
visibility: hidden，但可用visibility: visible单独恢复——这点和display: none有本质区别 - 它支持 CSS
transition，不过只对visible → hidden的切换生效（反向无过渡），适合做“淡出后立刻消失”的衔接 - 常见误操作：
visibility: hidden下元素仍响应click、focus（除非显式加pointer-events: none或tabindex="-1"），别以为“看不见就点不着” - JS 控制写法简单：
el.style.visibility = 'hidden'/'visible'，无需记原始display值
opacity: 0 + pointer-events: none 的真实用途
这不是“替代 visibility 的隐藏方式”，而是为动画和定位服务的组合技。单纯 opacity: 0 会让元素“隐形但活跃”，必须配 pointer-events: none 才算真正隔离交互。
- 支持完整过渡动画：
transition: opacity 0.3s ease，比visibility更顺滑 - DOM 位置、尺寸、
getBoundingClientRect()全部可用——适合 tooltip 锚点、拖拽占位、滚动计算等依赖几何信息的场景 - 漏掉
pointer-events: none是高频翻车点：用户会奇怪“为什么点空白区域触发了事件” - 对屏幕阅读器仍可见，如需无障碍，得同步加
aria-hidden="true"
content-visibility: hidden 不能当占位方案用
它名字带 “hidden”，但行为是“跳过渲染子树”，不是“视觉隐藏”。没有 contain-intrinsic-size，它会导致布局塌陷——这不是 bug，是设计使然。
立即学习“前端免费学习笔记（深入）”；
-
content-visibility: hidden本身不保留占位；必须配合contain-intrinsic-size: 200px 100px（或类似值）才能稳定预留空间 - 它跳过 layout/paint/compound，性能极好，但仅适用于长列表、离屏区域等“可延迟渲染”的大块内容，不是通用隐藏手段
- Chrome 85+ 支持，Firefox 尚未支持，Safari 需前缀，线上项目慎用
- 不要把它和
visibility: hidden混淆：前者是性能优化 API，后者是显示控制属性
真正需要“不可见但占位”时，优先写 visibility: hidden；如果后续要加淡入淡出、或依赖 DOM 位置做 JS 计算，再切到 opacity: 0 + pointer-events: none 组合。别为了“新”而用 content-visibility，也别指望 display: none 能留空——它一走，布局就重排，空档就来了。
