错位主因是宽度计算脱离布局上下文：px固定值响应失效、box-sizing: content-box导致宽高溢出、viewport缺失致缩放失准、flex子项误用float或未设flex-basis、html5语义标签选择器未更新。
错位通常不是容器宽度设得太窄或太宽，而是宽度计算脱离了当前布局上下文——比如用 px 固定写死、忽略 box-sizing、或父容器没设 display: flex/grid 却指望子项“自动对齐”。
为什么设了 width: 300px 还是错位？
固定像素值在不同屏幕下必然失效；更隐蔽的问题是：元素实际占用宽度 = width + padding + border，但默认 box-sizing: content-box 会让这三者叠加溢出。比如你写 .card { width: 300px; padding: 16px; border: 1px solid #ccc; }，它真正在父容器里占的宽度是 334px。
- 统一加
*, *::before, *::after { box-sizing: border-box; }，让 padding 和 border 包含在 width 内 - 避免对容器级元素（如
.container）直接设width: 300px，改用max-width: 300px; width: 100% - 如果必须用固定宽，检查父容器是否设置了
overflow: hidden或flex-shrink: 0，否则可能被压缩变形
移动端一打开就错位，viewport 标签漏了没？
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 和 Android Chrome 都会按 980px 宽度渲染再缩放，所有基于百分比或 rem 的宽度都会失准，图标挤成一团、文字小得看不清。
- 该标签必须放在
最前面，不能被 JS 动态插入 - 不要写成
content="width=375"这类硬编码，device-width是唯一可靠值 - 搭配使用
clamp(320px, 100%, 1200px)替代纯100%，防小屏过宽、大屏拉伸变形
display: flex 容器里子项还是错位？检查这三个点
Flex 容器本身不会错位，错的是子项脱离了弹性上下文——常见于误加 float、position: absolute，或忘了设 flex-basis 导致宽度塌缩。
- 删掉子项上的
float: left—— 在 flex 容器中它完全无效，还可能干扰justify-content - 子项若需固定宽度（如图标区），显式写
flex: 0 0 auto或flex: 0 0 40px，别只靠width - 文字内容区要占满剩余空间？加
flex: 1或flex-basis: 100%，而不是留空
用 <main></main> <header></header> 后布局崩了？CSS 选择器没跟上
HTML5 语义标签默认是 display: block，和 <div> 行为一致。崩掉是因为你原来的 CSS 写的是 <code>.header { ... }，现在 DOM 里只有 <header></header>，规则压根没生效。
- 打开 DevTools 的 Elements 面板，右键目标元素 → “Reveal in Elements Panel”，再看右侧 Styles 是否有匹配样式
- 把
.header改成header，.nav改成nav，以此类推 - 如果项目混用新旧结构，保留 class 并加一层兼容：比如同时写
header, .header { height: 60px; }
最常被忽略的其实是盒模型隐性叠加和选择器失效——它们不报错，但会让宽度计算像黑箱一样不可控。动手前先开 DevTools 看一眼 Computed 的 width 和 box-sizing，比猜半天快得多。
