visibility: hidden 保留布局空间，仅触发重绘；display: none 彻底移出渲染树，触发回流+重绘；前者适合需维持结构的动画，后者适合彻底隐藏。
visibility: hidden 和 display: none 有什么本质区别
关键在「是否保留布局空间」：visibility: hidden 让元素不可见但仍在文档流中占位；display: none 则彻底移出渲染树，不占任何空间。
常见错误现象：用 visibility: hidden 隐藏导航栏后，下方内容没上移——不是 bug，是预期行为。反过来，如果想做「隐藏但保持页面结构稳定」的过渡动画（比如 hover 展开子菜单前先隐藏），visibility 就比 display 更合适。
-
visibility支持inherit、collapse（表格行/列专用），display不支持继承值 - 设置
visibility: hidden后，子元素默认也隐藏，但可通过显式设visibility: visible覆盖 - 性能上，
visibility切换只触发重绘（repaint），display切换会触发回流（reflow）+ 重绘，频繁切换时更耗资源
visibility: collapse 在 table 中的实际表现
visibility: collapse 是为表格设计的特殊值，但它在不同浏览器里行为不一致——这是最容易踩的坑。
使用场景：隐藏某一行或一列，又不想破坏表格结构（比如动态筛选数据行）。但注意：collapse 对非表格元素等同于 hidden，对 <tr> 在 Chrome/Firefox 中会隐藏且不占空行，但在 Safari 里可能仍留缝隙。
立即学习“前端免费学习笔记（深入）”；
- 对
<td>或<th>设collapse，整列会被压缩（类似删列） - 对
<tr>设collapse，该行消失，后续行自动上移，但border-collapse: collapse下边框可能残留 - 别指望它在 flex 或 grid 布局中起作用——它只对表格相关 display 值（
table-row、table-cell等）有效
JavaScript 检测和切换 visibility 状态的可靠写法
不能只看 element.style.visibility，因为这个只读内联样式；得用 getComputedStyle 才能拿到最终生效值。
常见错误现象：JS 设置了 el.style.visibility = 'hidden'，但之后读 el.style.visibility 却是空字符串——因为没走内联样式路径，或者被 CSS 类覆盖了。
- 检测当前状态：
getComputedStyle(el).visibility === 'hidden'（注意返回的是字符串，不是布尔） - 批量控制时，优先改 class：定义
.is-hidden { visibility: hidden; }，再用el.classList.add('is-hidden') - 动画兼容性：CSS transition 对
visibility本身无效（它没有中间态），但可以配合opacity和transition-delay实现淡出+隐藏组合效果
visibility 影响可访问性和 SEO 的隐性风险
屏幕阅读器通常会忽略 visibility: hidden 元素，但不会忽略 display: none —— 等等，反了？不，实际是：两者都会被大多数读屏器跳过，但 visibility: hidden 的元素仍可能被键盘焦点捕获（如果它有 tabindex），造成「看不见却能 tab 进去」的体验断层。
SEO 方面，搜索引擎普遍认为 visibility: hidden 内容仍是页面一部分，若滥用（比如堆关键词并隐藏），可能被判定为作弊；而 display: none 的内容权重更低，但同样不推荐藏敏感信息。
- 要真正隐藏语义内容（如辅助文本），用
aria-hidden="true"+visibility: hidden组合更稳妥 - 含表单控件的容器设
visibility: hidden后，用户无法聚焦输入框，但tabindex仍存在，可能干扰 tab 顺序 - 服务端渲染时，别依赖
visibility来“隐藏”本不该下发的数据——它不阻止 JS 访问 DOM，也不加密内容
