display: none 是唯一真正不占位的隐藏方式，它使元素彻底退出渲染树，宽高和盒模型均归零，父容器塌缩且周围元素自动补位。
display: none 是唯一真正「不占位」的隐藏方式
它让元素彻底退出渲染树，DOM 节点还在，但浏览器连它的宽高、边距、盒模型都不算——父容器会塌缩，周围元素自动补位，offsetHeight 和 getBoundingClientRect() 全返回 0。这不是“盖住”或“透明”，是直接跳过渲染流程。其他方案如 visibility: hidden、opacity: 0 或 position: absolute; left: -9999px 都会保留占位或触发重排，不能替代它。
恢复显示时 display 值必须匹配原始类型
设 display: none 很简单，但一写 element.style.display = 'block' 就出问题？因为元素原始 display 类型可能不是 block：
-
span、a、strong默认是inline，强行设block会换行、撑宽 -
li默认是list-item，设block会丢掉项目符号 -
td、th必须用table-cell，否则表格结构错乱甚至整行塌陷 -
tr对应table-row，table对应table
实操建议：
→ 在 DevTools 的 “Computed” 面板里看 display 实际值
→ JS 中优先存原始值：el.dataset.originalDisplay = getComputedStyle(el).display，恢复时再赋回
→ 不确定就别硬编码，用 class 切换更稳妥（比如 .hidden { display: none; } + el.classList.toggle('hidden')）
表单字段和屏幕阅读器容易被忽略的两个坑
display: none 不影响表单提交行为，也不自动屏蔽辅助技术语义——这两点常导致线上故障：
-
<input name="token" value="abc">加了display: none，依然会随form.submit()或FormData提交出去 - 要真正排除，得加
disabled属性，或手动el.removeAttribute('name')，或提交前el.remove() - 屏幕阅读器虽默认跳过
display: none元素，但旧版 JAWS 或某些嵌套场景下仍有例外；若需强保障，同步加aria-hidden="true" - 想“视觉隐藏但语义保留”（比如 skip-link），就不能只靠
display: none，得用position: absolute; left: -9999px;等组合
JavaScript 动态控制时的典型误操作
直接改 style.display 看似简单，但容易埋雷：
- 用
el.style.display = ''清空内联样式，结果元素还是不显示——因为 CSS 文件里有.hidden { display: none; }，class 没删 - 在
scroll或resize回调里频繁设display: none/block，引发连续重排，页面卡顿 -
<video></video>或<iframe></iframe>设display: none后仍在后台播放/加载，音频照出、统计请求照发 - 想加淡入淡出？
transition: display 0.3s完全无效——display是离散属性，没有中间状态；得先设opacity: 0+visibility: hidden，动画结束再切display: none
最麻烦的其实是表格单元格：在 td 上用 display: none 表面能隐藏，但遇到 colspan 或打印预览时，列宽错乱、内容偏移很常见。真要隐藏列，优先对整行 tr 设 display: none，或者用 visibility: collapse（注意 IE11 不支持）。
