选 display:none 还是 visibility:hidden，关键看是否保留布局空间：display:none 彻底移除元素不占位，visibility:hidden 仅隐藏但保留位置；前者影响表单提交和触发回流，后者支持动画和保持 DOM 可交互。
选 display:none 还是 visibility:hidden，关键看你要“删掉这个盒子”还是“盖住它但留着位置”——前者彻底不参与布局，后者只是看不见，还在原地占位。
元素是否还占据文档流空间
这是最直观的区别，直接影响周围元素排版：
-
display:none：元素从渲染树中被移除，不占任何空间。它下面的兄弟元素会上移填补空缺，父容器高度也会收缩 -
visibility:hidden：元素仍在渲染树里，宽高、margin、padding 全部保留。页面布局完全不变，只是内容不可见 - 验证方式：打开浏览器开发者工具 → 选中元素 → 切到 Layout 面板，勾选 Show layout shifts，切换两种状态看有没有“跳动”
对表单提交和 DOM 操作的影响
很多隐藏逻辑失败，是因为没意识到它们对数据和交互的处理差异：
-
display:none的<input>、<select>等表单控件，会被浏览器忽略——不会参与表单序列化，form.submit()或FormData都拿不到它的值 -
visibility:hidden的表单控件仍可正常获取焦点（需配合tabindex）、响应事件、被提交。但注意：它仍会触发focus、blur，可能干扰无障碍体验 - JavaScript 中两者都能用
element.style.display或element.style.visibility控制，但getComputedStyle(el).display返回"none"时，offsetHeight和clientWidth都是0；而visibility:hidden下这些值仍有效
CSS 动画与性能表现
想做淡入淡出或延迟显示？别直接用 display：
立即学习“前端免费学习笔记（深入）”；
-
display不支持 CSS transition，因为它是离散值（block/none等），无法插值。强行写transition: display 0.3s无效 -
visibility支持 transition，常配合opacity实现平滑显隐：visibility: hidden; opacity: 0;→visibility: visible; opacity: 1; - 频繁切换
display:none会触发回流（reflow），开销大；visibility:hidden只触发重绘（repaint），更轻量 - 如果元素有子元素且需要单独控制显隐，注意
visibility具有继承性：父设hidden，子默认也隐藏，除非显式设visible
SEO 和辅助技术的实际处理
别再依赖过时说法——搜索引擎和读屏器近年已大幅收敛两者差异：
- 主流搜索引擎（Google、Bing）对
visibility:hidden的内容基本视同不可见，不会计入关键词权重，也不作索引主体。它和display:none在 SEO 上已无实质区别 - 读屏器（如 NVDA、VoiceOver）默认跳过
display:none和visibility:hidden的内容，但若加了aria-hidden="false"或显式role，行为可能不同，需实测 - 真正需要“视觉隐藏但语义保留”的场景（比如仅给读屏器用的提示文字），应优先用专用模式：
position: absolute; left: -9999px; width: 1px; height: 1px;，而非依赖visibility
最易被忽略的一点：当同时设置 display: none 和 visibility: visible，display 优先级更高，元素依然不渲染、不占位——CSS 层叠规则里它赢了，但这种写法本身就是在自欺欺人。
