display: none 和 hidden 本质不同：前者是css样式，移除元素于渲染树；后者是html语义属性，影响无障碍树但不强制隐藏。hidden可被css覆盖，支持子元素显式恢复显示，而display: none下子元素无法显示，且ie不支持hidden。
display: none 是 CSS 规则，hidden 是 HTML 布尔属性
二者根本不在同一层：前者是样式控制，后者是语义标记。display: none 由 CSS 引擎处理，作用于渲染树；hidden 是 HTML5 原生属性，浏览器会将其映射为 aria-hidden="true" 并参与无障碍树构建，但不强制移除元素。
常见误判是把 hidden 当作 display: none 的快捷写法——其实加了 hidden，document.getElementById('x') 仍能取到节点，el.getBoundingClientRect() 返回正常值；而 display: none 下，offsetTop 可能为 0 或 NaN，且 getBoundingClientRect() 返回全零对象。
子元素能否单独显示？行为完全不同
父元素设 display: none 时，子元素无论怎么写 display: block 都无效——浏览器压根不计算它的布局；而父元素设 hidden，子元素可以显式写 hidden="false" 或用 JS 移除该属性来恢复显示。
-
<div hidden><button>点我</button></div>→ 按钮不可见，但 JS 执行button.parentElement.removeAttribute('hidden')后立即可交互 -
<div style="display:none"><button>点我</button></div>→ 即使给 button 加style="display:block"，它依然不可见、不可聚焦、无法响应click
能否用 CSS 覆盖？兼容性与维护成本差异大
[hidden] { display: block; } 是合法且有效的 CSS 规则，意味着你可以用样式“驳回”语义隐藏；但你没法靠外部 CSS 覆盖内联的 style="display:none"，除非用 !important 或更高优先级的选择器（且容易失控）。
实际项目中容易忽略的点：
- IE 完全不支持
hidden属性，需 fallback 到display: none+ 手动同步aria-hidden - 用
hidden控制表单字段时，required和验证逻辑照常运行，而display: none下字段虽不可见，但提交时仍会被校验——这点常导致“看不见却报错”的用户困惑 - 服务端渲染（SSR）中，
hidden属性更易保持语义一致性，避免 JS 注入前出现闪现
屏幕阅读器和 SEO 如何对待它们？
display: none 元素默认被屏幕阅读器跳过、搜索引擎不索引；hidden 元素虽被标记为 aria-hidden="true"，但该状态可被 CSS 或 JS 覆盖，也允许开发者在子元素上显式写 aria-hidden="false" 来局部恢复可访问性。
真正影响可访问性的不是“怎么藏”，而是“藏没藏干净”。比如：
- 用
display: none隐藏错误提示，却忘了移除关联的aria-invalid="true"，屏幕阅读器会报错但找不到对应文本 - 用
hidden隐藏未激活的 tab 面板，但没同步管理tabindex和焦点流，键盘用户可能卡在不可见区域
复杂点在于：三者（display: none / visibility: hidden / hidden）对事件、布局、可访问性的组合影响并不正交，选错一个，调试时往往要回溯 DOM 结构、CSS 层叠、JS 状态三处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
