hidden属性强制覆盖所有display设置，无论display值为何（包括block、flex或带!important的CSS规则），浏览器将其视为隐式display:none!important，彻底退出渲染流程。
hidden属性会强制覆盖所有display设置
当 hidden 属性和任何 display 值（包括 display: block、display: flex 甚至带 !important 的 CSS 规则）同时存在时，hidden 总是赢。浏览器内部把它当作隐式 display: none !important 处理，不是“联动”，而是硬性覆盖。
常见错误现象：<div hidden style="display: block">内容</div> 依然不可见、不占空间、无法获取焦点；用 JS 执行 element.style.display = 'block' 也无效，必须先 element.hidden = false 或 element.removeAttribute('hidden')。
- 即使写
div[hidden] { display: flex !important; }，样式也不会生效 -
hidden影响发生在渲染树构建阶段，早于 layout 和 paint，所以它比任何 CSS 渲染控制都底层 - 服务端渲染时若混用
hidden和内联style，建议统一用<div hidden style="display: none">，避免某些 WebView 因 UA 样式表注入延迟导致首帧闪现
screen reader 对 hidden 和 display: none 的处理差异
hidden 是语义化声明：“此内容当前不相关”，主流屏幕阅读器默认跳过整个子树，且该行为由规范保证；而 display: none 是纯视觉指令，辅助技术是否忽略它，取决于实现——虽然目前基本都跳过，但不是强制要求。
容易踩的坑：给一个 display: none 元素手动加 aria-hidden="false"，它仍可能被读屏器忽略；但若对 hidden 元素设 aria-hidden="false"，则会被覆盖失效——hidden 的语义优先级更高。
立即学习“前端免费学习笔记（深入）”；
- SEO 场景下，
hidden更明确传达“暂不展示”，爬虫更倾向信任；display: none配合大量关键词可能被判定为隐藏文本作弊 - 表单中
<input hidden>不会进入FormData，也不在form.elements中，和style="display: none"效果一致 - 如果需要隐藏但保留提交能力（比如埋点字段），不能用
hidden或display: none，得改用visibility: hidden; position: absolute; left: -9999px
JS 动态控制时 el.hidden = true 的实际生效时机
el.hidden = true 是 JS 执行后才触发的 DOM 属性变更，它不会影响 SSR 初始状态；也就是说，服务端吐出的 HTML 若没带 hidden 属性，JS 加载后再设 el.hidden = true，用户会看到元素先渲染再消失——这不是 bug，是执行时序决定的。
真正“解析即隐藏”的唯一方式是服务端直接输出 <div hidden> 或内联 style="display: none"。前者兼顾语义与可访问性，后者确保首个像素不出现。
-
getBoundingClientRect()在hidden状态下恒返回全零值，offsetHeight/offsetWidth也是 0 -
hidden元素不响应任何事件（click、focus、mouseenter），子元素也一并失效 - 频繁切换
hidden状态会触发 reflow，性能开销高于visibility: hidden，但低于反复修改display值
框架组件中 hidden 与 display 混用的隐蔽冲突
很多现代框架（如 Vue 的 v-if、React 的条件渲染）底层模拟的是 hidden 行为逻辑，但如果你在外层手动加了 display 样式又没清理，就可能和框架状态错位。更隐蔽的是：某些 UI 库的组件内部用了 hidden 控制子模块显隐，而你用 CSS 强行覆盖 display，结果发现怎么调都不生效。
真实调试建议：遇到“明明写了 display: block 却不显示”，先检查元素是否带 hidden 属性（哪怕 JS 动态加的），再查 computed styles 是否显示 display: none 并标注 “user agent stylesheet” —— 这就是 hidden 在起作用。
- Chrome DevTools 的 Elements 面板里，
hidden属性会高亮显示，但 computed styles 里看不到它的来源，容易误判为 CSS 冲突 - 用
getComputedStyle(el).display查到的永远是none，哪怕你写了style="display: flex" - Vue 3 的
v-show本质是切display，v-if是移除节点；若你在v-if区域里又手动加hidden，等于双重隐藏，无意义且增加维护成本
