display:none 彻底移除元素、不占空间、不触发渲染；visibility:hidden 保留占位、子元素可单独设为可见。响应式首选 display:none，动画或需布局稳定时用 visibility:hidden 或 clip-path。
display:none 和 visibility:hidden 的核心区别在哪
关键看是否影响文档流：display:none 彻底移除元素，不占空间、不触发渲染、子元素也不渲染；visibility:hidden 保留占位，元素还在文档流里，只是“看不见”，子元素默认继承隐藏（但可用 visibility:visible 单独恢复）。
响应式中该选哪个？看具体场景
多数响应式隐藏用 display:none —— 比如小屏下收起侧边栏、隐藏广告位、移除非核心图片。它真正减少渲染负担，也避免占位导致的布局错位。
少数情况用 visibility:hidden：
- 需要保留元素位置（比如轮播图切换时防止页面跳动）
- 配合 CSS 动画做淡入淡出（
visibility可触发 transition，但需搭配opacity才有视觉效果） - 临时隐藏但马上要显示，且不想触发重排（re-flow）
在媒体查询里怎么写才不出错
直接写在 @media 块内即可，但注意优先级和覆盖逻辑：
立即学习“前端免费学习笔记（深入）”；
- 确保选择器权重足够高，别被更具体的规则覆盖
- 避免在多个断点里反复切换同一元素的
display，容易因顺序或 specificity 导致意外显示 -
display:none在父元素上生效时，子元素无法通过display:block强行显示（这是常见误区） - 如果用了
visibility:hidden，记得检查子元素是否意外显示——子元素设visibility:visible是有效的
示例：
@media (max-width: 768px) {
.sidebar { display: none; }
.header-logo { visibility: hidden; }
}
还有哪些隐藏方式容易被忽略
除了这两个，实际项目中还得考虑：
-
opacity:0：元素仍可交互、占位、影响 tab 键序，慎用于响应式隐藏 -
position:absolute; left:-9999px：老式“屏幕外隐藏”，对可访问性不友好，且可能被读屏软件误读 -
clip-path: inset(100%)或clip: rect(1px, 1px, 1px, 1px)：更现代的不可见但保留语义的方式，适合需要兼顾无障碍的隐藏
真正要“响应式隐藏”，display:none 仍是首选；但只要涉及动画、可访问性或布局稳定性，就得停下来想两秒：是不是 visibility 或 clip-path 更合适。
