display: none 彻底移除元素、不占空间、不响应事件、子元素失效，触发重排，SEO不索引；visibility: hidden 保留占位、仅重绘、屏幕阅读器可读；opacity: 0 仍占位可交互，需 pointer-events: none 禁用点击。
display: none 会彻底移除元素，但触发重排
它让元素从渲染树中消失，不占空间、不响应事件、子元素全失效。适合需要完全隐藏且后续可能永久不用的场景。
- 切换时浏览器要重新计算布局（reflow），频繁操作性能差
-
display是继承属性，但值不会被子元素继承——子元素设成display: block也无效，因为父级已不在渲染树里 - 用 JS 读取
offsetHeight或getBoundingClientRect()会返回0，不是null - SEO 友好：搜索引擎通常不索引
display: none内容，但别用来藏关键词，可能被判定为作弊
visibility: hidden 保留占位，不触发重排但影响可访问性
元素还在文档流里，尺寸位置不变，只是“看不见”，子元素默认也隐藏（除非显式设 visibility: visible）。
- 切换只触发重绘（repaint），比
display: none轻量，适合高频切换（比如下拉菜单收起时） - 屏幕阅读器仍能读取内容，若不想被读，得加
aria-hidden="true" - 注意：
visibility: collapse在表格中表现特殊——在<tr> 上等效于 <code>display: none，但在非表格元素上和hidden行为一致 - 动画无法对
visibility做过渡（CSS transition 不支持），设transition: visibility 0.3s没效果 - 常用于淡入淡出动画，配合
transition: opacity 0.3s效果自然 - 问题来了：如果忘了关指针事件，用户会误点到“看不见的按钮”——必须加
pointer-events: none才真正禁用交互 - 即使
opacity: 0，GPU 仍会绘制该层（尤其在 Chrome 中），大量叠加可能拖慢滚动性能 - 和
visibility一样，屏幕阅读器默认照读，需手动处理aria-hidden - 要彻底隔离（不占位、不交互、不读屏）→ 选
display: none - 要保持布局稳定、快速切回、又不希望被点 →
visibility: hidden+aria-hidden="true" - 要做渐变动画、且确定交互已关闭 →
opacity: 0+pointer-events: none - 最易漏的一点：
opacity和visibility都不影响 focus 状态，tab键仍能聚焦到opacity: 0的输入框——得配合tabindex="-1"或临时移除tabindex
opacity: 0 看不见但依然交互、仍占渲染资源
透明度为 0，视觉上消失，但元素还在、占空间、能响应点击/焦点、参与事件冒泡。
选哪个？看三个关键动作：是否要占位、是否要交互、是否要动画
没有银弹。比如模态框遮罩层用 opacity: 0 + pointer-events: none 就容易错——遮罩本该拦截点击，设了 none 反而穿透了；这时该用 visibility: hidden 或直接 display: none。
立即学习“前端免费学习笔记（深入）”；
