display: none 彻底移出文档流，不占布局位置且子元素不可聚焦；visibility: hidden 保留位置但隐藏内容，仍响应事件。动画需避开 display，用 opacity/visibility 或 max-height 实现。
display: none 和 visibility: hidden 有什么实际区别
关键看要不要保留布局位置。display: none 让元素彻底退出文档流，它原来占的地方直接塌陷；visibility: hidden 只是“看不见”，但位置还在，周围元素不会重排。
常见错误现象：用 visibility: hidden 做开关菜单，结果点击区域错位、按钮点不中——因为隐藏的 DOM 仍响应事件（除非加 pointer-events: none），且占着空间挤变形了。
- 需要彻底移出渲染流程（比如条件性加载模块）→ 用
display: none - 只是临时遮罩、过渡动画中间态 →
visibility: hidden更合适（避免重排） -
display: none的元素，子元素无法被聚焦、无法读取offsetHeight等尺寸属性
用 JavaScript 切换 div 显示状态的稳妥写法
别直接硬写 element.style.display = 'none'，容易覆盖内联样式或 CSS 类里的其他 display 值（比如 inline-flex 被你改成 none 后，再设回 '' 就变默认 inline，不是原来的样子）。
推荐用 class 控制：
立即学习“前端免费学习笔记（深入）”；
div.hidden { display: none; }
然后 JS 里只操作类名：
- 显示：
element.classList.remove('hidden') - 隐藏：
element.classList.add('hidden') - 切换：
element.classList.toggle('hidden')
这样不干扰其他 display 值，也方便统一维护样式逻辑。
hidden 属性和 CSS 隐藏哪个优先级更高
hidden 是 HTML 原生布尔属性，浏览器会自动映射为 display: none，而且它的优先级高于大多数 CSS 规则（包括 !important），除非你用更具体的 CSS 强制覆盖，比如：
[hidden] { display: block !important; }
但不建议这么干——语义冲突。用 hidden 就表示“真不需要它”，别一边声明隐藏一边又强行显示。
- 动态控制首选 JS 操作 class，而不是增删
hidden属性 -
hidden适合服务端渲染时初始状态确定的隐藏（比如表单步骤中未到的面板） - 注意：
hidden对屏幕阅读器也隐藏，而aria-hidden="true"只影响辅助技术
transition 动画配合 display 切换为什么失效
因为 display 是离散属性，没有中间状态，display: none → display: block 是瞬间切换，CSS 过渡拿不到渐变过程。
要实现淡入淡出、高度展开这类效果，得绕开 display：
- 透明度动画：用
opacity+visibility组合（先设visibility: hidden; opacity: 0，再过渡opacity，结束再切visibility） - 高度动画：用
max-height代替height（设一个足够大的max-height: 0→max-height: 500px），配合overflow: hidden - 绝对定位 +
transform: scale(0)适合卡片/弹窗类入场
记住：只要动了 display，就别指望有过渡。
真正麻烦的是嵌套结构里父 div 隐藏了，子元素还挂着定时器或监听器没清理——这种泄漏比显示逻辑本身更难排查。
