display: none 彻底移除元素不占空间且不触发重排，visibility: hidden 仅隐藏但保留占位和重绘；前者禁用交互与SEO/无障碍，后者可继承且支持opacity过渡。
display: none 会彻底移除元素，触发重排
当你给一个 div 设置 display: none，浏览器直接跳过它在渲染树中的构建——它不占空间、不响应鼠标事件、子元素也一并消失。DOM 节点还在，但布局引擎当它不存在。
常见错误现象：querySelector 能拿到该元素，但 getBoundingClientRect() 返回全零值；用 JS 动态显示时，页面其他部分会“抖动”，因为父容器要重新计算尺寸和流式位置。
使用场景适合：永久性隐藏（如权限控制下的按钮）、表单字段条件显隐、SEO 不需要的内容。
注意点：
-
display不可继承，子元素设display: block也无效 -
transition对display完全无效，不能做渐变隐藏 - 服务端渲染后首屏可能出现“闪现”，因为 CSS 生效前元素已渲染
visibility: hidden 只是“看不见”，仍占位且可继承
visibility: hidden 不影响文档流，元素物理位置保留，下方内容不动。它只是让绘制阶段跳过该节点，所以只触发重绘（repaint），不触发重排（reflow）。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：以为设置了 visibility: hidden 就能阻止点击，其实默认仍拦截所有鼠标事件；又或者发现子元素也被隐藏了，却忘了它支持反向覆盖。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景适合：临时切换（如 hover 展开菜单的收起态）、动画过渡配合 opacity、需要保持计数器或无障碍阅读器读取的隐藏内容。
注意点：
- 可继承，子元素可通过
visibility: visible单独显示 - 某些旧版 Safari 对
visibility+pointer-events组合支持不稳定 - 不能用
transition直接过渡visibility，但可以配合opacity实现淡出效果
别混用 display 和 visibility 做动画
CSS 动画和 transition 都无法对 display 做插值，浏览器不定义中间状态；visibility 虽然能设 transition，但实际只有 visible/hidden 两个离散值，过渡无效。
真正可用的组合是：
-
visibility: hidden+opacity: 0→ 过渡opacity，再用visibility控制最终是否参与交互 - 用
max-height或transform: scaleY(0)替代display做折叠动画
性能上，visibility + opacity 比纯 display 切换更轻量，尤其在频繁显隐的列表项中。
屏幕阅读器和 SEO 行为差异很关键
display: none 的内容默认不被屏幕阅读器解析，搜索引擎也不索引；而 visibility: hidden 的内容仍可能被读出（取决于 UA 实现），HTML 结构也完整保留在源码中。
这意味着：
- 用
display: none隐藏辅助文本，可能破坏无障碍体验 - 用
visibility: hidden隐藏营销弹窗，可能被搜索引擎当作隐藏关键词处罚 - 若需兼顾 SEO 与视觉隐藏，应优先考虑语义化替代方案（如
aria-hidden="true"+visibility: hidden）
最易被忽略的是：两种方式都**不阻止 focus() 方法聚焦元素**，但 display: none 元素调用 focus() 无效果，而 visibility: hidden 元素仍可获得焦点——这会影响键盘导航逻辑。
