hidden是语义声明而非视觉开关，浏览器通过[hidden]{display:none!important}实现隐藏；混用display:none会导致js切换失效，ssr需css兜底防闪现。
hidden 是语义开关，display: none 是渲染剔除指令，二者根本不在同一层——混用时容易“以为隐藏了，其实没生效”或“JS 切了 hidden 却还是看不见”。
hidden 属性为什么有时不隐藏元素
浏览器默认靠 [hidden] { display: none; } 实现视觉隐藏，但它不是硬编码逻辑，而是 UA 样式表规则。一旦被覆盖，hidden 就只剩语义，没了视觉效果：
- 项目用了 Tailwind 的
flex类或 Ant Design 的按钮样式，它们直接设了display: flex或inline-flex，权重高于默认[hidden]选择器 - 自定义 reset.css 里写了
div { display: block; }，且没加[hidden]特殊处理 - 媒体查询中写了
@media (min-width: 768px) { [hidden] { display: block; } }，但漏了!important，结果 PC 端元素意外显示
解决办法只有一条：[hidden] { display: none !important; } 必须手动加在基础 CSS 里，尤其 SSR 场景下，否则首屏可能闪现。
JS 控制 hidden 时最常卡住的点
el.hidden = false 不等于“让元素变可见”——它只移除 hidden 属性，完全不管之前手写的 el.style.display = 'none'。
- 错误写法：
el.setAttribute('hidden', 'false')→ 新增一个值为"false"的属性，hidden仍为 true（布尔属性有值即生效） - 正确恢复可见：先清内联样式
el.style.display = ''，再设el.hidden = false或el.removeAttribute('hidden') - SSR hydration 同步前，服务端已渲染
<div hidden>，客户端 JS 还没执行，用户可能看到闪动；需配合 <code>opacity: 0+ transition 缓解display: none 和 hidden 对表单与可访问性的实际影响
两者都让元素退出渲染树，但语义和行为差异直接影响功能逻辑：
-
<input name="token" hidden>→ 提交时彻底消失，FormData里没有，form.elements.token也取不到 -
<input name="token" style="display: none">→ 同样不提交，但这是副作用，不是语义保证；若想“视觉隐藏但参与提交”，得用position: absolute; left: -9999px -
hidden默认映射aria-hidden="true"，整棵子树对屏幕阅读器不可见；而display: none是否被读屏器忽略，取决于实现，非规范强制 -
getBoundingClientRect()对hidden元素返回有效尺寸（Chromium 路径接近visibility: hidden），但对display: none一定返回全零
性能与动画限制必须提前知道
别指望
hidden能过渡或做动效——它背后是display: none，而display不是可动画属性，transition: display完全无效。- 高频切换显隐（如折叠面板、搜索建议）：用
visibility: hidden+opacity组合更轻量，避免 reflow - 表格行（
<tr>）批量控制：<code>visibility: hidden比display: none更稳，不会触发整表重排抖动 - 内存开销差异不在 DOM 节点本身，而在渲染中间状态：
display: none节点不生成 RenderObject，hidden在 Chromium 中仍走部分 layout，WebKit 下则可能跳过更多计算
真正难搞的是三者共存场景：比如 SSR 输出
<div hidden style="display: none">，又加了 <code>[hidden] { display: block !important; }—— 此时hidden优先级高于 CSS，但开发者往往误以为样式赢了。 -
