display: none 彻底移除元素的文档流位置，不占空间、不响应事件、子元素消失且不可被屏幕阅读器访问；visibility: hidden 保留占位但视觉隐藏，支持过渡动画且子元素可穿透显示。
display: none 会彻底移除元素的文档流位置
元素设置 display: none 后，浏览器渲染时完全跳过它：不占空间、不响应事件、子元素也一并消失，且无法被屏幕阅读器访问（除非额外加 aria-hidden="false" 并手动管理）。
常见误用场景：
– 用在需要保留布局但临时隐藏的按钮上，导致旁边元素突然“挤过来”
– 和 transition 搭配时无效，因为 display 不是可过渡的 CSS 属性
- 适合真正“不需要存在”的情况，比如未登录时不显示后台入口
- JavaScript 中通过修改
element.style.display = "none"切换，注意重置时最好指定具体值（如"block"），而非""（空字符串可能继承默认或计算值） - 服务端渲染中若初始设为
display: none，该元素不会参与 SSR 的布局计算，可能影响首屏样式稳定性
visibility: hidden 保留元素占位但不可见
visibility: hidden 只让元素视觉隐藏，它仍在文档流中占据原有空间，能触发 transition（配合 visibility + opacity 可实现淡出），子元素默认继承该状态 —— 但可通过子元素显式设 visibility: visible 来“穿透”隐藏。
SEO全流程：诊断、页面优化、技术SEO、内容策略、外链建设；触发关键词包括SEO、搜索排名、网站优化、关键词、标题描述、结构化数据、Core Web Vitals、sitemap、robots.txt、SEO审计等。
典型问题：
– 看似隐藏了，但点击区域还在（虽然不可见，仍可触发 click，除非同时加 pointer-events: none）
– 表格中对 <tr> 用 <code>visibility: hidden，会导致 <tbody> 高度异常（部分浏览器下 tbody 会塌缩）<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>适合需要维持布局稳定的切换，比如菜单展开前的预渲染容器</li>
<li>动画建议组合使用：<code>visibility: hidden; opacity: 0; → 过渡 opacity → 完成后设 visibility: hidden 防止焦点进入
z-index 无关，不影响层叠上下文创建实际调试中怎么快速判断该用哪个
看 DOM 结构变化最直接：打开浏览器开发者工具，选中元素，观察右侧 Computed 标签页里 display 和 visibility 的最终值；再切到 Layout 或勾选 Show layout shifts，看隐藏前后是否引发周围元素位置变动。
- 如果隐藏后页面其他内容“跳动”，大概率该用
visibility: hidden替代 - 如果需要 SEO 或辅助技术忽略该区域，优先选
display: none（但注意：搜索引擎对 visibility:hidden 的处理已趋近于 display:none，非绝对） - 表单控件（如
<input>）隐藏后仍需提交数据？不能用display: none（会被表单忽略），改用visibility: hidden+position: absolute+left: -9999px等无障碍友好的隐藏方式
.hidden-visually {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
真正复杂的不是选哪个属性，而是隐藏之后要不要保持可访问性、要不要参与表单提交、会不会被动画打断重排 —— 这些都得结合语义和交互目标来定，不能只看“看不见”。
