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 块内即可，但注意优先级和覆盖逻辑：
立即学习“前端免费学习笔记（深入）”；
