display: none 彻底移除元素并脱离文档流，visibility: hidden 仅隐藏但保留占位；前者不可交互、无尺寸，后者仍可点击且影响布局。
display: none 和 visibility: hidden 到底差在哪
区别不在“藏不藏”，而在“占不占位置”——display: none 让元素彻底退出文档流，后续元素会立刻顶上来；visibility: hidden 只是“看不见”，但原来的位置还留着，空白照常存在。
常见错误现象：visibility: hidden 下点击事件仍可触发（只是看不见），而 display: none 后元素完全不可交互、无法获取焦点、getBoundingClientRect() 返回全 0 值。
- 用
display: none控制开关式 UI（如弹窗、折叠面板），避免布局跳动 - 用
visibility: hidden做动画过渡（配合opacity），或临时隐藏但需保留 DOM 占位（比如表格中某行暂不显示） - 注意：两者都影响可访问性（
display: none会被屏幕阅读器忽略，visibility: hidden不一定）
hidden 属性和 aria-hidden="true" 不是一回事
hidden 是 HTML5 原生布尔属性，浏览器直接识别，效果等同于 display: none；而 aria-hidden="true" 只影响辅助技术，对视觉渲染毫无作用。
使用场景：你不能靠 aria-hidden="true" 来“隐藏内容”，它只告诉屏幕阅读器“别读这个”。如果同时需要视觉隐藏 + 无障碍屏蔽，得组合写：hidden 或 display: none + aria-hidden="true"（后者冗余但更保险）。
立即学习“前端免费学习笔记（深入）”；
-
hidden支持 JS 操作：el.hidden = true，且会触发toggle类事件监听 -
aria-hidden="true"不影响offsetHeight、clientWidth等尺寸 API - 服务端渲染时，
hidden属性比 CSS 更早生效，避免 FOUC（闪现）
clip-path 和 opacity: 0 的隐藏陷阱
这两个不是真正“隐藏”，而是“让人看不见”——元素依然在文档流里、可交互、会触发事件、占用内存、影响性能。
典型误用：用 opacity: 0 替代 display: none 做条件渲染，结果按钮还在那儿，用户点一下就触发了；或者用 clip-path: inset(100%) 隐藏菜单，但键盘 Tab 仍能聚焦到里面去。
-
opacity: 0适合做淡入淡出动画，但必须搭配pointer-events: none才算“真不可点” -
clip-path在旧版 Safari 中兼容性差，且对含 transform 的子元素可能失效 - 二者都不阻止
focus()调用，也不影响document.querySelectorAll结果
React/Vue 中 conditional rendering 别写错
框架里最安全的隐藏方式就是“不渲染”，而不是“渲染后藏起来”。JSX 中 {condition && <div>…</div>} 或 Vue 中 v-if 是真正移除节点；v-show 或 style={{ display: condition ? 'block' : 'none' }} 是运行时控制 CSS，节点始终存在。
容易踩的坑：在表单里用 v-show 隐藏字段，结果提交时该字段还在 DOM 里、被序列化进 FormData；或者在 React 中对未挂载组件调用 ref.current.focus()，因为 && 表达式没生成节点，ref 是 null。
- 优先用
v-if/{condition && ...}处理权限级隐藏（如管理后台菜单项） - 用
v-show/display切换频繁、需保留状态的组件（比如标签页内容） - 注意：SSR 渲染时，
v-show会先吐出所有节点再 hide，可能影响首屏速度
最麻烦的其实是“半隐藏”需求：既要视觉不可见，又要保持焦点顺序，还要让屏幕阅读器读出来——这时候得组合 position: absolute; left: -9999px;、clip: rect(0 0 0 0); 和 aria-live，而且每个浏览器对“可访问隐藏”的实现还不一致。
