正确选择 display: none、visibility: hidden 或 hidden 属性取决于 dom 是否参与流式计算、是否响应事件、是否影响表单提交及辅助技术感知；三者在布局、交互和可访问性上行为迥异。
html 本身没有“隐藏技巧”这种玄学概念，所谓“布局更灵活”的本质，是正确理解 display、visibility 和 hidden 属性的行为差异，以及它们在真实 DOM 操作中的副作用。
用 display: none 还是 visibility: hidden？看 DOM 是否要参与流式计算
两者都让元素“看不见”，但浏览器处理方式完全不同：
-
display: none彻底移出渲染树：不占空间、不响应事件、子元素全失效、触发布局重排（reflow） -
visibility: hidden保留在渲染树中：仍占空间、不响应事件、子元素默认继承隐藏（但可用visibility: visible覆盖） - 常见错误：用
visibility: hidden去“隐藏表单字段”却忘了它还在form提交中 —— 它的value依然会被提交
hidden 全局属性不是 CSS 替代品，而是语义开关
hidden 是 html5 原生布尔属性，作用等价于 display: none，但它有明确的语义含义：“此内容当前对所有用户都不相关”。
- 它会被屏幕阅读器忽略，而
display: none也会，但visibility: hidden在部分旧读屏器中仍有问题 - 不能用 CSS 覆盖
hidden的效果（除非用!important强制改display），因为它的优先级高于普通样式 - js 中设置
el.hidden = true比操作style.display更直接，且自动同步到 DOM 属性
用 aria-hidden 控制可访问性，别混用 hidden
aria-hidden="true" 只影响辅助技术，对视觉和布局完全无影响 —— 这是它和 hidden 最根本的区别。
立即学习“前端免费学习笔记（深入）”；
- 典型场景：图标字体（
<i class="icon-home"></i>）需隐藏文字语义，但图标本身要可见 → 加aria-hidden="true"，不加hidden - 错误做法：给一个弹窗遮罩层同时加
hidden和aria-hidden="true"—— 多余，且可能干扰焦点管理 - 注意：
aria-hidden="true"不会阻止键盘焦点进入其子元素，如需禁用交互，还得配合tabindex="-1"或inert（目前仅 Chromium 支持）
真正影响布局灵活性的，从来不是“怎么藏”，而是“藏完之后 DOM 还在不在、尺寸还计不计算、事件还响不响应、辅助技术还知不知道”。选错一个属性，后面调试 focus 管理、表单提交、动画衔接或屏幕阅读器行为，都会多绕三步。