应根据是否保留布局空间选择：display: none 完全移除元素，visibility: hidden 保留占位。前者适用于表单提交控制、无障碍跳过；后者适用于避免布局抖动、canvas 上下文保持及尺寸读取。
该用 display: none 还是 visibility: hidden，取决于你是否想让元素“还在布局里”。选错会导致页面跳动、事件失效、屏幕阅读器行为异常，甚至 Canvas 重绘失败。
什么时候必须用 visibility: hidden 来避免布局抖动
当隐藏操作不能引起周围元素位置变化时，visibility: hidden 是唯一稳妥选择。它不触发重排（reflow），只做重绘（repaint），DOM 位置和尺寸完全保留。
- 表单校验提示框临时隐藏时，若用
display: none，下方按钮会突然上移 - 轮播图容器内图片切换间隙，用
display: none会让容器高度塌缩，造成视觉抖动 -
Canvas元素父容器设display: none后再显示，可能返回空白——因为 canvas 的渲染上下文被丢弃了；而visibility: hidden不影响上下文 - JavaScript 调用
getBoundingClientRect()或读取offsetHeight时，仍需拿到真实值，只能依赖visibility: hidden
为什么 display: none 在表单和无障碍场景更可靠
display: none 彻底移除元素的渲染参与，也切断了它与交互、语义、提交流程的关联。这不是“更狠”，而是“更干净”的退出机制。
-
<input name="phone">设display: none后，不会随表单提交；但设visibility: hidden仍会提交——除非额外加disabled或删掉name - 屏幕阅读器默认跳过
display: none元素，无需额外处理；而visibility: hidden默认仍会被朗读，得手动加aria-hidden="true" - 导航菜单子项用
display: none控制显隐，能防止鼠标移入空白区触发:hover失败（因为元素已不在渲染树中） - 响应式侧边栏在移动端隐藏时，用
display: none可释放滚动区域空间，避免留下不可见但占位的空白
visibility: hidden 的穿透特性怎么安全使用
visibility 具有继承性，且子元素可通过显式设置 visibility: visible “穿透”父级隐藏——这是 display: none 完全不支持的。
- 适用场景：tooltip 预渲染容器、带图标按钮的禁用态（图标仍可见）、状态徽章叠加
- 风险点：父级
visibility: hidden下，子元素设visibility: visible虽然显示，但依然无法响应鼠标事件（默认pointer-events: auto也不起作用），需额外加pointer-events: auto - 注意：表格行
<tr> 设 <code>visibility: hidden，部分浏览器下<tbody> 高度计算异常，建议改用 <code>display: none或包裹<div> <li>别混淆 <code>opacity: 0：它不改变布局、仍响应事件、z-index 层叠照常，和两者有本质区别 - 在
@media中设.sidebar { visibility: hidden; }，但之前有高权重规则.layout .sidebar { display: block; }→ 实际生效的是display: block，visibility被忽略（因为display: none会让visibility失效） - JS 中执行
el.style.display = 'none'后立即读取el.offsetHeight，会强制同步重排；而visibility切换后读尺寸无此风险 -
transition: visibility 0.3s无效——visibility 是离散值，浏览器不支持过渡；想做淡出效果，得组合visibility: hidden+opacity: 0+transition: opacity - 重置显示时，
el.style.display = ''（空字符串）可能继承计算值而非期望的block，应明确设为'block'或其他目标值
媒体查询和 JS 切换时最容易踩的坑
混用 display 和 visibility 是最隐蔽的错误来源，尤其在 CSS 优先级或 JS 动态写入 style 时。
真正难的不是记住哪个属性“隐藏”或“占位”，而是在 DOM 结构、交互链路、无障碍路径、动画时机多个维度同时成立的前提下，选那个不破坏任一环节的方案。多数时候，先打开开发者工具看 Layout Shifts，再决定用哪一个。
