visibility:hidden 使元素不可见但仍占布局空间、可继承且子元素能覆盖，display:none 则彻底移出渲染树、不占空间、不响应事件、不可继承。
visibility:hidden 和 display:none 的核心区别在哪
关键判断：用 visibility:hidden 就是为了让元素“看不见但还在布局里”，而 display:none 是彻底移出渲染树，不占空间也不响应事件。
常见错误现象是误以为两者只是显示/隐藏的开关——其实它们触发的是完全不同的渲染流程。比如给一个按钮加 visibility:hidden，它依然能接收 focus()、仍会响应 click（如果父级没阻止），但用户点不到；而 display:none 下，DOM 节点连事件监听器都收不到触发。
-
visibility:hidden会保留 margin/padding/border/width/height，所有盒模型属性照常计算 - 子元素可以通过设置
visibility:visible强行“翻出来”，这是display:none做不到的 - 动画兼容性好：
visibility是可过渡的（transition: visibility 0.3s），但浏览器只支持离散切换（不能淡入，只能在 visible ↔ hidden 之间卡顿式切换）
什么时候必须用 visibility:hidden 而不是 opacity:0
虽然 opacity:0 也“看不见”，但它仍参与事件捕获、仍会触发 hover/focus 等伪类，且对性能有隐性影响（尤其是大量重绘时）。
使用场景很具体：需要保持布局稳定、又不想让内容被交互或读屏软件访问时，visibility:hidden 是更干净的选择。
立即学习“前端免费学习笔记（深入）”；
- 表单中临时禁用某组字段但要维持对齐（比如切换 tab 时隐藏部分
input） - 响应式设计中为小屏幕隐藏某些装饰性元素，但又不想让其他元素位置跳动
- 配合 JS 控制可访问性：
visibility:hidden会被读屏器忽略，而opacity:0不会 - 注意：
visibility:hidden不会阻止子元素的overflow:scroll滚动条出现，这点和display:none不同
visibility:hidden 的继承行为和常见陷阱
visibility 是可继承属性，这意味着父元素设了 visibility:hidden，所有后代默认也隐藏——但你可以显式覆盖。
容易踩的坑在于：以为设置了 visibility:visible 就一定能“显示出来”，其实它只对直系父元素有效。如果中间某层父级用了 visibility:hidden，子元素再怎么设 visible 也没用。
- 检查 DOM 树中是否有任意祖先节点设置了
visibility:hidden（Chrome DevTools 的 Computed 面板里搜visibility最快） -
visibility:collapse在表格中表现特殊（类似display:none），但在非表格元素上等价于hidden，别混用 - 不要依赖
visibility做权限控制——它纯属样式层，服务端仍需校验 - SSR 渲染时，
visibility:hidden不影响 HTML 输出，所以首屏可能闪一下再隐藏，必要时结合data-*属性做服务端条件渲染
用 JavaScript 切换 visibility 的正确写法
直接操作 style.visibility 最稳妥，避免 class 切换带来的 CSS 优先级干扰。
示例：一个下拉菜单关闭时隐藏但保留占位，防止页面抖动：
const dropdown = document.getElementById('menu');
dropdown.style.visibility = 'hidden'; // 不要用 'none'，会报错
// 恢复时：
dropdown.style.visibility = 'visible';
- 别写成
dropdown.style.visibility = 'false'或'0'—— 只接受visible/hidden/collapse - 用
getComputedStyle(el).visibility获取当前值，注意返回的是字符串，要严格比对=== 'hidden' - 如果元素原本通过 class 设置 visibility，JS 写内联样式会覆盖它；想恢复 class 控制，得删掉
style.visibility：dropdown.style.removeProperty('visibility')
display）或假藏起（visibility）。选错的关键往往不是语法，而是没想清楚“这个空位要不要留给别人”。 
