display: none 彻底移除元素，不占空间、不响应事件；visibility: hidden 仅视觉隐藏，仍占位且子元素可单独显示，二者不可混用。
visibility: hidden 和 display: none 的行为差异必须分清
两者根本不是“换着用就行”的替代方案，选错会导致布局跳动、交互异常或读屏障碍。display: none 把元素从渲染树中彻底剔除，不占空间、不响应事件、子元素也一并消失；visibility: hidden 只是视觉隐藏，元素仍在文档流里占位，子元素还能通过 visibility: visible 单独显示。
常见错误现象：用 visibility: hidden 隐藏表单按钮后，用户仍能 Tab 到它并触发提交；用 display: none 切换导航菜单时，页面内容突然上移，造成视觉抖动。
- 需要保留布局结构（比如做 hover 动画过渡）→ 用
visibility - 要释放空间、防止误操作、确保无障碍可访问性 → 用
display: none - 元素内含
input或button，且需完全禁用聚焦 →display: none更可靠
在响应式断点中切换显隐的写法陷阱
直接在 @media 规则里写 display: none 或 visibility: hidden 是最轻量的做法，但容易被选择器权重覆盖或顺序干扰。
示例中这段代码看似合理：
@media (max-width: 768px) {
.sidebar { visibility: hidden; }
}
但如果之前有更高权重的选择器（比如 .layout .sidebar）设了 display: block，那 visibility: hidden 就不会生效——因为 display 和 visibility 不冲突，但浏览器最终会应用两个属性，而 display: none 优先级更高（它让元素根本不在渲染树里，visibility 失效）。
- 避免在同一元素上混用
display和visibility控制显隐，尤其在媒体查询中 - 如果父元素用了
display: none，子元素设display: block无效；但父元素用visibility: hidden，子元素设visibility: visible是有效的 - 移动端隐藏侧边栏时，优先用
display: none，避免visibility: hidden留下空白占位影响滚动体验
JavaScript 操作时的重排与重绘风险
用 JS 改 element.style.display = 'none' 或 element.style.visibility = 'hidden' 很快，但紧接着读取 offsetHeight 或 getBoundingClientRect() 就可能触发强制同步重排（layout thrashing）。
display 切换会触发回流（reflow）+ 重绘（repaint），visibility 切换只触发重绘。频繁切换（比如滚动监听中）时，后者性能明显更好。
- 动画过渡场景别用
visibility：它只有visible/hidden两个离散值，不支持transition - 想实现淡入淡出？必须用
opacity+pointer-events: none+aria-hidden组合，不能靠visibility - 用
getComputedStyle(element).display判断状态时，注意返回的是计算值（如block），不是原始声明值
表格中 visibility: collapse 的兼容性坑
visibility: collapse 是为表格设计的，但在非表格元素上等同于 hidden；而在 <tr> 上，Chrome/Firefox 会真正收缩行高不留空隙，Safari 却可能残留 1px 空白——这是最容易被忽略的实际兼容问题。
<p>使用场景仅限动态隐藏表格某行/列又不想破坏整体结构，比如后台数据筛选。别把它当通用隐藏方案。</p>
<ul><li>对 <code><td> 或普通 <code>div 设 collapse，行为和 hidden 一致，没额外价值
collapse 在所有浏览器中表现统一，生产环境建议 fallback 到 display: none 或 JS 控制行渲染collapse 可能被服务端忽略，导致首屏闪烁display: none；不要，且确定不需要交互和读屏支持，才考虑 visibility: hidden。其余情况，往往该用 opacity 或直接删 DOM 节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
