display: none 是唯一真正移除渲染的方式，元素从渲染树中完全剔除、不占空间、不响应事件、JS查询尺寸为0，适合权限控制和条件渲染，但频繁切换会触发重排。
display: none 是唯一真正“移除渲染”的方式，其他方法都只是视觉欺骗——元素仍在渲染树里，只是你看不见或点不到。
display: none 会触发重排，但它是真隐藏
浏览器在计算布局时会跳过 display: none 元素，它不占空间、不响应事件、子元素也完全不可见。JS 查询 offsetHeight 或 getBoundingClientRect() 返回值全为 0。
- 适合权限控制、条件渲染、弹窗关闭等“该区域不该存在”的场景
- 频繁切换会触发重排（reflow），动画中慎用；但对屏幕阅读器默认静默，无障碍友好
- 注意：它会被内联样式覆盖，比如 HTML 写了
<div hidden style="display: block">，hidden就失效了 - Vue 的
v-if、React 的{condition && <div></div>}底层就是靠这个机制实现的
visibility: hidden 不重排，但保留占位和可聚焦性
visibility: hidden 只是让元素变透明且禁用鼠标事件，但它还在文档流里，父容器高度不会塌缩，tabindex 仍生效。
- 子元素设
visibility: visible能强行显示——这是它和display: none的关键区别 - 支持
transition，但只对visible → hidden有延迟效果；反向切换无过渡 - 常见翻车点：表单里用它隐藏
<input>，用户按 Tab 键仍会聚焦到空白处，导致体验断裂 - 搭配
opacity: 0做淡出动画更稳妥，但得手动加pointer-events: none防点击穿透
opacity: 0 看不见但“摸得着”，必须配对禁用交互
opacity: 0 只改变透明度，元素几何信息、事件监听、焦点能力全部保留。很多“隐藏失败”其实是因为漏了配套规则。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
opacity: 0; pointer-events: none; tabindex="-1"才算真正隔离 - 支持完整 CSS 动画，性能比
display切换好（只重绘 repaint，不重排 reflow） - 对屏幕阅读器仍可能暴露内容，需额外加
aria-hidden="true"或clip-path: inset(50%) - 别用它做“销毁”操作——DOM 节点还在内存里，敏感数据不能靠它保护
hidden 属性语义清晰，但 CSS 能轻易覆盖它
hidden 是 HTML5 原生布尔属性，语义上明确表达“当前不相关”，等价于 display: none，且 JS 操作轻量：el.hidden = true 不触发布局计算。
- 服务端渲染后 JS 未加载前，它比依赖 CSS 类更可靠
- 风险在于 CSS 覆盖：只要写了
[hidden] { display: block; }，整个属性就失效 - Vue/Svelte/React 中绑定
hidden={condition}是安全的，但 Svelte 需配合 class 规则才生效 - 它不解决动画需求——想淡入？还得切回
opacity+visibility
真正要隐藏，得先问清楚：是“让它彻底不存在”，还是“让它看不见但结构还在”，或是“只对人眼隐藏、对机器可见”。选错方法，轻则布局错位、焦点异常，重则无障碍失败、动画卡顿——这些细节不在控制台报错，但用户一试就崩。
