绝大多数情况应使用 display: none，因其真正移除元素、不占空间、不触发焦点且不被读屏软件读取；visibility: hidden 和 opacity: 0 仅视觉隐藏，存在布局或交互隐患。
响应式隐藏该用 display: none 还是其他方式
绝大多数情况直接用 display: none，它真正移除元素、不占空间、不触发焦点、不被读屏软件读取——这才是“隐藏”的本意。别被 visibility: hidden 或 opacity: 0 的表面效果迷惑：前者留白撑开布局，后者仍能被点中、tab 键仍会停驻。
常见错误现象：@media (max-width: 768px) { .sidebar { visibility: hidden; } } 导致主内容区被压缩换行，侧边栏位置空着却看不见；或者用 opacity: 0 隐藏按钮，结果用户连点两下触发了两次提交。
- 只要目标是“让页面其他元素自动填满”，就选
display: none - 只有明确需要保持尺寸稳定（如轮播容器预占位）、或需子元素局部透出（如模态框内关闭按钮），才考虑
visibility: hidden -
opacity: 0必须配对pointer-events: none和tabindex="-1"才算“真隐藏”，否则只是视觉欺骗
@media 里写 display: none 容易失效的三个原因
不是规则没写，而是浏览器压根没执行。最常踩的坑是选择器权重不足、缺少基础声明、或断点逻辑反了。
- 没设默认
display值：比如只在@media (max-width: 768px)里写.nav { display: none; }，但桌面端没定义.nav的display，浏览器按默认inline渲染，布局错乱 - 权重被覆盖：全局样式写了
.header.nav { display: block !important; }，媒体查询里.nav { display: none; }就无效——加前缀如.mobile-layout .nav或提高选择器 specificity - 用
max-width嵌套多层时逻辑混乱：优先改用min-width断点，例如@media (min-width: 1024px) { .ad-banner { display: none; } }更清晰可靠
JavaScript 切换隐藏状态时怎么避免破坏原始样式
直接操作 element.style.display = 'none' 很危险——它会覆盖元素原本的 display 值（比如从 inline-flex 强制变成 block），后续恢复时无法还原。
- 推荐方案：用 class 控制，如
el.classList.toggle('d-none')，CSS 中定义.d-none { display: none; } - 如果必须用 JS 直接改，先缓存原始值：
const originalDisplay = el.style.display || getComputedStyle(el).display;，恢复时再赋回去 - 原生
hidden属性更轻量：el.hidden = true不触发布局计算，且语义明确，但注意 IE9 不支持 - Vue/React 中优先用条件渲染（
v-if/{condition && <comp></comp>}），而非仅切display
表格列、表单控件、图标这些特殊元素怎么安全隐藏
它们不能简单套 display: none，否则会破坏语义或交互逻辑。
- 表格列：HTML 没有“列”节点，
<col>不支持display。正确做法是给每列单元格加data-column="name"，再用类如.hide-col-name控制显隐，并同步处理<thead> 中对应 <code><th> <li>表单校验失败提示：隐藏时用 <code>display: none，但别只靠 CSS —— 同时设aria-live="off"防止读屏重复播报 - 装饰性图标：用
aria-hidden="true"即可，不用隐藏；若需视觉隐藏又保留 SEO，可用position: absolute; left: -9999px; - 广告位或非核心图片：小屏下用
display: none，但服务端渲染时得确保这部分 HTML 不被爬虫误判为低质内容
复杂点在于：同一元素在不同断点可能要反复切换显隐，而 display 切换会触发重排，动画中尤其敏感；更隐蔽的问题是，父元素设了 display: none，子元素无论如何设置 display: block 都无效——这个继承链是硬切断的，没法绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
