display: none 彻底移除元素，不占空间、不响应事件；visibility: hidden 仅透明化，仍占布局位置且子元素可能溢出；hidden 属性轻量但无过渡、选择局限；无障碍需用 sr-only 等视觉隐藏技巧。
display: none 和 visibility: hidden 的根本区别
用 display: none 才算真正“完全隐藏”——元素从渲染树中被移除，不占布局空间、不响应事件、子元素也无法显示。而 visibility: hidden 只是让元素变透明，它仍占据文档流位置，父元素的 overflow: hidden 也拦不住它的子元素溢出（比如弹窗类组件意外显示）。
hidden 属性比 display: none 更轻量但有局限
hidden 是 HTML 原生布尔属性，浏览器会自动映射为 display: none（对大多数元素），但它不支持 CSS 动画过渡、无法用 :not([hidden]) 精确反向选择，且部分自定义元素（如 [hidden] { display: none; } 才生效。
想隐藏但保留可访问性？别只靠 display: none
屏幕阅读器默认忽略 display: none 元素，若该内容对残障用户仍有意义（比如表单错误提示），应改用视觉隐藏技巧：
sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
再配合 aria-hidden="false" 或 role="alert" 显式声明语义。
display: none 在 flex/grid 容器中的特殊表现
当父容器是 display: flex 或 grid 时，子元素设 display: none 会直接跳过所有布局计算——它不会影响 flex-basis、grid-area 分配，也不会触发 order 排序。但要注意：JavaScript 查询 getComputedStyle(el).display 返回 "none"，而 el.offsetParent 为 null，这常被误用于判断“是否在视口内”。
立即学习“前端免费学习笔记（深入）”；
实际项目里最容易漏掉的是：服务端渲染（SSR）时若用 JS 动态加display: none，首屏可能闪现再隐藏；更稳妥的做法是在 HTML 初始状态就写 hidden 或服务端直接不输出 DOM。 
