hidden属性语义化隐藏元素，但依赖CSS实现，需手动补[hidden]{display:none}防覆盖；display:none彻底移除渲染树，getBoundingClientRect返回全零；hidden优先级高于display样式，仅移除属性可恢复显示；SSR中hidden可避免首屏闪现。
hidden 属性不强制退出渲染树，但浏览器默认用 display: none 实现它
HTML 的 hidden 属性本身不是渲染指令，而是语义声明。浏览器实现它的默认方式，是靠 UA 样式表里那条隐式规则：[hidden] { display: none; }。这意味着：它是否真正“不占文档流”，取决于这条 CSS 是否生效、是否被覆盖。
常见错误现象包括：
- 引入了重置样式（如 Tailwind 的
flex类或 Ant Design 的按钮类），把[hidden]的display: none覆盖掉，导致元素意外显示 - 没写兜底的
[hidden] { display: none; }，而项目又没用 normalize.css，结果在 Safari 或某些 WebView 中首帧闪现 - 媒体查询中写了
@media (min-width: 768px) { [hidden] { display: block; } }，本意是“PC 端取消隐藏”，却忘了加!important，导致失效
所以，如果你依赖 hidden 来控制初始可见性（尤其是 SSR 场景），必须手动补上这行 CSS，否则无法保证行为一致。
display: none 彻底跳过 layout，getBoundingClientRect() 返回全零
display: none 是唯一能让元素在 layout 阶段就被剔除的 CSS 值。浏览器构建 render tree 时直接跳过该节点，子元素也一并忽略——它不参与几何计算、不生成图层、不进 paint 队列。
立即学习“前端免费学习笔记（深入）”；
这带来几个硬性影响：
-
el.getBoundingClientRect()返回{ top: 0, left: 0, width: 0, height: 0, ... }，不是null，但所有值都是 0 -
el.offsetParent为null，因为父容器找不到它的布局上下文 - 父容器高度可能塌陷（比如一个空
div包着display: none的p，div高度就是 0） - 表单中
<input display: none>不会出现在FormData中，也不被form.elements收集
注意：这些不是“bug”，而是规范定义的行为。如果你需要 getBoundingClientRect() 返回真实尺寸，就不能用 display: none，得换 visibility: hidden 或 opacity: 0。
hidden 和 display: none 同时存在时，hidden 优先级更高
当一个元素同时有 hidden 属性和显式 style="display: block" 时，hidden 仍生效——浏览器内部把它当作带 !important 的 display: none 处理。这是 HTML 规范要求的语义强制力。
但这个“优先级”只对 display 值起作用。它不影响其他属性：
-
el.style.visibility = 'visible'无效，因为hidden已让整个节点退出渲染流程 -
el.style.opacity = '1'也无效，同理 - JS 修改
el.style.display = 'block'不会恢复显示，必须先el.removeAttribute('hidden') - 子元素写
display: block或visibility: visible全部无效，父级hidden就是硬开关
换句话说：hidden 是渲染树层面的“熔断器”，不是样式层的开关。想让它失效，只能移除属性本身，不能靠覆盖样式。
服务端渲染中，hidden 是唯一能“解析即隐藏”的方案
SSR 页面首屏加载时，若靠 JS 注入 style="display: none"，必然存在 HTML 解析完成 → 渲染首帧 → JS 执行 → 再次渲染的间隙，用户可能看到内容闪一下。而 hidden 是 HTML 解析阶段就识别的布尔属性，parser 读到就标记状态，无需等待 CSS 加载或 JS 执行。
但要注意两个现实约束：
- 旧版 Safari（≤15.4）和部分 Android WebView 对
[hidden]的 UA 样式注入有延迟，仍可能闪现 —— 这时得加内联style="display: none"双保险 -
<script hidden></script>里的脚本仍会执行，hidden对<script></script>和<template></template>仅控制渲染，不阻断逻辑 - SEO 场景下，
hidden更明确传达“暂不展示”，而display: none可能被爬虫误判为隐藏关键词堆砌
真正难处理的不是“怎么写”，而是“要不要让子元素还能独立控制”。如果业务需要子项可单独显隐（比如折叠面板里某个 item 想展开），那就不能用 display: none 包裹整个父容器，hidden 也得慎用——此时得退回到 visibility: hidden + 定位或 opacity + pointer-events 组合。
