visibility: hidden 仅隐藏元素但保留布局位置，不触发回流，子元素可显式设为 visible 覆盖；与 display: none 根本区别在于是否保留在渲染树中。
直接用 style 属性设置 visibility，只能控制「是否绘制」，不能改变布局位置——这是最常被忽略的前提。
为什么 style="visibility: hidden" 后元素还在原位？
因为 visibility 的设计目的就是「隐藏但不挪地方」。它只影响渲染树中的绘制阶段（paint），不触发回流（reflow）。所以即使设为 hidden，元素的盒模型、尺寸、margin/padding 都照常参与布局计算。
- 常见错误现象：
<div style="visibility: hidden">菜单</div>隐藏后，下方内容没上移——这不是 bug，是正确行为 - 适合场景：需要保持 DOM 结构稳定的操作，比如 hover 展开前先隐藏子菜单、动画过渡中维持占位
- 注意：子元素默认继承
hidden，但可被显式设为visibility: visible覆盖
style 里写 visibility 和写 display 的关键区别
两者在 style 属性中写法相似，但效果完全不同：
-
style="visibility: hidden"→ 元素不可见，仍响应getBoundingClientRect()、能被 JS 获取尺寸、事件监听器仍存在（只是用户点不到） -
style="display: none"→ 元素彻底从渲染树移除，getBoundingClientRect()返回全 0，事件监听器不触发，父容器可能塌缩高度 - 如果同时写了两者（如
style="visibility: hidden; display: none"），display: none优先级更高，visibility被忽略
用 JavaScript 动态切换时容易踩的坑
直接操作 element.style.visibility 看似简单，但要注意初始状态来源：
- 如果元素原本通过 CSS 类（如
.hidden { visibility: hidden; }）隐藏，仅改style.visibility = "visible"不一定生效——内联样式优先级虽高，但若类中有!important，就会覆盖 - 不要依赖
element.style.visibility判断真实状态：它只反映内联值，查不到 CSS 类或浏览器默认值，应改用getComputedStyle(element).visibility - 想做淡入动画？别把
visibility和transition搭配用：visibility不支持过渡，会立刻切换；要用opacity+visibility组合，且必须分两步：先设visibility: visible，再加opacity: 0 → 1
visibility: collapse 在 style 中慎用
这个值只对表格相关元素（<tr>、<code><td>、<code><col> 等）有特殊意义；其他元素上它等同于 hidden：
- 在 Chrome/Firefox 中，
<tr style="visibility: collapse"> 会隐藏行且不留空隙；但在 Safari 中可能仍有微小间隙 <li>对非表格元素写 <code>style="visibility: collapse"，等于白写——浏览器按hidden处理，还可能带来兼容性困惑 - IE 所有版本都不支持
collapse和inherit，若需兼容旧环境，必须降级处理
真正难的不是怎么写 visibility: hidden，而是判断此刻该不该用它——当你要隐藏一个表单字段并确保 label 位置不动，用它；当你想彻底移走一个广告位让内容上浮，就得换 display: none。
