display: none 是唯一让元素视觉消失且布局腾空的原生CSS方式，但内联设置易导致覆盖问题，推荐用 .hidden 类控制，并注意表单提交、尺寸读取及可访问性影响。
display: none 是唯一能让元素「视觉消失 + 布局腾空」的原生 CSS 方式。它不是盖住、不是透明、不是移走，而是让浏览器彻底跳过该元素的渲染和布局计算。
为什么直接写 style="display: none" 容易出问题
内联样式优先级最高，一旦硬编码，后续 CSS 文件里的同名规则（比如 .sidebar { display: block; }）就无法覆盖它。调试时你看到元素没隐藏，很可能只是某个更高权重的选择器悄悄把它又“拉回来”了。
- 用 JS 动态设置
element.style.display = "none"后，再想通过 class 恢复显示，必须先删掉这个内联样式，否则 class 无效 - 恢复显示时若只设
display: block，可能破坏原始布局——span原本是inline，强行变block会换行；div原本是flex子项，设block就脱离 flex 上下文 - 服务端渲染（SSR）初期输出
style="display:none"，前端 JS 接管逻辑时容易遗漏清理，导致 hydration 阶段 DOM 差异 warning
推荐做法：用 class 控制，而不是操作 style.display
在 CSS 中定义统一类，由 JS 控制增删，既可避免样式覆盖，又能保留原始 display 类型语义。
- 写一个通用隐藏类：
.hidden { display: none; } - HTML 中用：
<div class="card js-hideable">，不带内联style - JS 切换时用：
el.classList.toggle("hidden")，而不是反复读写style.display - 如果必须恢复显示且需保持原有
display值，不要清空style.display（即el.style.display = ""），而应提前缓存原始值，或用getComputedStyle(el).display获取计算后值再还原
表单控件设 display: none 后仍会被提交
这是最常被忽略的坑：display: none 不影响表单字段的可提交性。隐藏的 <input>、<select> 的值照常进入 FormData 或传统 form submit。
- 要真正排除提交，必须显式加
disabled属性（注意：disabled字段不会被提交） - 或者在提交前用 JS 手动移除
name：el.removeAttribute('name')，或从 DOM 中移除：el.remove() - 如果该字段是动态生成/销毁的，别只靠
display: none来“临时屏蔽”，得同步处理提交逻辑
调试时怎么确认元素真「不占位」了
不能只看页面是否“看不见”。进开发者工具验证才是关键：
- Elements 面板中，
display: none的元素节点名会变灰，但仍在 DOM 树里 - Layout 标签页里所有尺寸（
width/height/margin）都显示为0 - 用 JS 测试：
el.getBoundingClientRect()返回全为0；el.offsetParent返回null - 如果父容器高度塌陷、后续元素没上移，先检查父级是否用了
position: absolute或float，让子元素脱离了文档流
真正难处理的从来不是“怎么隐藏”，而是“隐藏之后，JS 还能不能读尺寸、表单还提不提交、屏幕阅读器还读不读、动画还做不做、恢复时布局还对不对”。display: none 是一把快刀，但切口位置错了，整块布局就歪了。
