visibility: hidden 是保留布局空间最直接的标准方案，它不改变盒模型、不影响周围元素、支持 transition（仅 visible→hidden）、只触发 repaint，且子元素可显式设为 visible；而 opacity: 0 需配合 pointer-events: none 才能避免交互问题，display: none 则彻底清除尺寸信息并触发 reflow。

用 visibility: hidden 保留布局空间最直接

想让元素“看不见但还在原位”，visibility: hidden 是唯一符合语义且无需额外 hack 的标准方案。它不改变盒模型，margin、padding、height、width 全部照常生效，周围元素完全不受影响。

常见错误现象：visibility: hidden 下的元素默认仍响应 click 或 focus（尤其当有 tabindex 时），容易误判为“已禁用”。

• 子元素可通过显式设置 visibility: visible 强行显示——这点和 display: none 完全不同
• 支持 transition，但只对 visible → hidden 有延迟效果；反向切换不触发过渡
• 不会触发重排（reflow），只重绘（repaint），性能比频繁切 display 更轻量

为什么不用 opacity: 0 替代？

opacity: 0 看起来也“隐形”，但它本质是透明而非隐藏：元素几何信息、事件绑定、焦点能力全在，点击会穿透或意外触发。

若硬要用它模拟“保留占位的隐藏”，必须同步加 pointer-events: none，否则交互行为不可控。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• opacity 支持完整过渡动画，适合渐隐/渐显；visibility 不适合做平滑淡出
• 两者对屏幕阅读器都不自动屏蔽内容，需额外加 aria-hidden="true" 才能真正语义隐藏
• opacity: 0 的子元素会继承透明度，除非重设 opacity: 1；而 visibility: hidden 的子元素可单独 visible

避免用 display: none 假装保留占位

有人试图用 display: block + height: 0 + overflow: hidden 模拟保留空间，但这本质仍是破坏盒模型：元素实际高度为 0，offsetHeight 返回 0，getBoundingClientRect() 高度也为 0，和真实占位不等价。

更危险的是，这种写法会让依赖尺寸的 JS 逻辑（比如 resize observer、动画起始位置计算）出错。

• display: none 会清空所有尺寸信息，无法用于需要 layout 测量的场景
• 它触发重排，高频切换（如滚动中）可能卡顿
• 视频、iframe、第三方脚本在 display: none 下通常继续运行，音频可能照播

用属性选择器配合 visibility 更易维护

比起硬写内联样式或反复操作 element.style.visibility，推荐用 class 或自定义属性控制，结构清晰、CSS 可复用。

例如定义：

[data-hidden="true"] { visibility: hidden; }

，然后 JS 中只需：element.setAttribute('data-hidden', 'true')。

• 避免直接操作 style 属性，防止 CSS 优先级冲突或被覆盖
• 类名方式更利于 BEM 命名和组件化，比如 .card--hidden 对应 visibility: hidden
• 注意：不要混用 visibility 和 display 在同一元素上，后者会覆盖前者

真正要保留占位，就老老实实用 visibility: hidden；想动效就配 opacity + pointer-events；别指望 display: none 能“假装占位”——DOM 尺寸信息一旦清零，JS 就认不出它原来在哪了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！