display: none 是唯一真正不占位的隐藏方式：它使元素退出渲染树，尺寸为0、父容器塌缩、周围元素补位且不响应事件；其他方式均无法同时满足不可见、不占位、不可交互。
display: none 是唯一真正不占位的隐藏方式
按钮设 display: none 后，它彻底退出渲染树：offsetWidth 和 offsetHeight 变为 0，父容器高度塌缩，周围元素自动补位，也不响应任何事件。这不是“盖住”，是浏览器直接跳过渲染——其他方式都无法同时满足「不可见 + 不占位 + 不可交互」。
常见误操作：
- 用
visibility: hidden：按钮还在文档流里，getBoundingClientRect()返回的尺寸不变，tab 键仍能 focus 到它 - 用
opacity: 0：完全透明但点击穿透，clientHeight非零，子元素也全透明 - 用
position: absolute; left: -9999px：视觉移出，但getClientRects()仍返回非空结果，可能干扰布局计算
JS 动态控制时 display 值必须匹配原始类型
按钮默认是 inline-block，不是 block。硬写 btn.style.display = "block" 会破坏行内布局（比如换行、撑宽），恢复时反而出问题。
实操建议：
- 在 DevTools 的 Computed 面板里看
display实际值，别猜 - JS 中优先存原始值：
btn.dataset.originalDisplay = getComputedStyle(btn).display，恢复时赋回 - 不确定就别硬编码，用 class 切换更稳妥：
.hidden { display: none; }+btn.classList.toggle("hidden")
hidden 属性语义更强但兼容性有限
hidden 是 HTML5 原生布尔属性，效果等同于 display: none，且向屏幕阅读器明确传达“此元素不应被感知”。写法简单：<button hidden>提交</button> 或 JS 中 btn.hidden = true。
注意点：
- IE 不支持，如需兼容 IE8+，必须 fallback 到
display: none - 它优先级比 CSS 高：即使写了
button[hidden] { display: block !important; }，浏览器仍强制隐藏 - 不能用 CSS 过渡控制显隐过程，
transition: display无效
display: none 会影响表单提交和媒体元素
设了 display: none 的 <input> 依然会随 form.submit() 提交；<video></video> 或 <iframe></iframe> 仍在后台播放/加载，音频照出、统计请求照发。
关键修复点：
- 要真正排除表单字段，得加
disabled属性，或手动el.removeAttribute('name')，或提交前el.remove() - 若需强保障可访问性，同步加
aria-hidden="true"（虽然display: none默认已屏蔽读屏，但旧版 JAWS 有例外） - 想加淡入淡出？
transition: display 0.3s完全无效——得先设opacity: 0+visibility: hidden，过渡结束再设display: none
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
