visibility: hidden 使隐藏但保留布局空间且仍可聚焦操作；display: none则彻底移除、不占位且禁交互；需禁交互时应配合disabled或pointer-events: none，或直接使用hidden属性。
visibility: hidden 会让
这是 visibility 的标准行为：元素仍参与文档流，尺寸、边距、位置都照常计算，只是内容不可见。对 来说，它会“留白”，下方元素不会上移。
常见误判场景：
– 用 JS 切换 visibility 时发现页面有“空洞”
– 以为隐藏后能点击穿透，实际仍拦截鼠标事件（visibility: hidden 不禁用交互）
如果目标是“视觉隐藏 + 保持占位 + 不影响布局”，这个行为反而是对的；但如果想让后续元素顶上来，就得换方案。
想隐藏 display: none
display: none 彻底移出渲染树，不占空间、不响应事件、不触发 focus/blur。这是最常用的真隐藏方式。
立即学习“前端免费学习笔记（深入）”；
- JS 控制示例：
document.getElementById('mySelect').style.display = 'none'; - 注意：设为
display: none后，offsetHeight、getBoundingClientRect()返回 0，:focus伪类失效 - 若需恢复，必须显式设回
display: block（或inline，取决于原始 display 值）
visibility: hidden 的
能 —— 这是最容易踩的坑。即使看不见， 仍可被 Tab 键聚焦、键盘上下键切换选项、回车确认，甚至用 JS 调用 .focus() 或 .click() 触发下拉。
验证方式：
document.getElementById('mySelect').focus(); // 光标会进入隐藏的 select
若需禁用交互，必须配合：
– disabled="true"（同时禁用聚焦与操作）
– 或 pointer-events: none（仅禁鼠标，不影响键盘焦点）
– 单独用 visibility: hidden 不足以阻止用户交互
真正“藏而不占位+禁交互”的组合写法
多数业务场景要的是：视觉消失、不占空间、不能点也不能 Tab 进去。推荐组合：
#mySelect {
display: none;
pointer-events: none;
}
但更稳妥的做法是直接加 hidden 属性（HTML5 原生语义）：
注意：
– hidden 属性等价于 display: none，且对所有浏览器兼容良好
– 它比 CSS 更易被 JS 控制：el.hidden = true / false
– 不要混用 hidden 和 display: block，后者会覆盖前者
visibility 和 display 的行为差异、是否保留焦点、是否响应键盘，这几个点一旦忽略，就会在表单跳转、无障碍访问或自动化测试中暴露问题。 
