错位主因是HTML结构非法或viewport未生效；浏览器静默修正嵌套错误导致渲染与代码不符，viewport配置错误使响应式失效，固定像素宽度在小屏溢出，须优先验证DOM和meta标签。
错位不是 CSS 写得不够“酷”，而是浏览器在解析 HTML 时已经悄悄改了结构，或者 viewport 根本没生效——这两点不先确认，调再多 flex 或 grid 都是白忙。
先看 DevTools 里 DOM 和你写的 HTML 对不对得上
浏览器遇到非法嵌套（比如 <p></p> 里塞 <div>），会静默闭合 <code><p></p>，把后续内容扔到外面。结果就是你写的结构是嵌套的，实际渲染出来是平级的，卡片、页脚全飘走。
- 打开 Elements 面板，找灰色斜体标签——那是被浏览器“修过”的铁证
- 右键疑似父容器 → “Edit as HTML”，删一个空格再回车：如果子元素整体跳出去，说明原始结构已被重写
- 在 Console 执行
document.body.innerHTML，和你本地源码逐行比对，多出的</p>、消失的<section>都是线索 - 用 W3C Validator（validator.w3.org）粘贴源码，重点处理
Element div not allowed as child of element p这类报错——这不是警告，是结构性断裂
viewport meta 没配对或拼错，响应式直接失效
没这行，移动端就按 980px 渲染再缩放，字体糊、按钮挤、@media 全不触发。而且拼错一个字母，比如 intial-scale（少个 i），iOS Safari 就当它不存在。
- 必须放在
<head>最前面，且只有一份；写在<body>里完全无效 - 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> - 别加
user-scalable=no：违反无障碍，部分安卓 WebView 还会因此进兼容模式，反而更错乱 - content 属性值不能换行或前后带多余空格，某些旧 WebView 会整条忽略
固定像素宽度是响应式错位最常见硬伤
width: 500px 在小屏上必然溢出，尤其当父容器没设 overflow: hidden 或没配合 max-width 时，横向滚动条或内容裁剪就来了。
立即学习“前端免费学习笔记（深入）”；
- 把
width: 500px换成max-width: 500px; width: 100%，让大屏有上限、小屏能收缩 - 表格错位？加
table-layout: fixed; width: 100%，再给每列显式设百分比宽（如th:nth-child(1) { width: 25% }），总和必须 100% - 三栏布局加 margin 错位？别给栅格类（如
.col-lg-4）设margin，改用嵌套：栅格类只管尺寸，margin加在内部容器（如.sec）上 - 所有涉及尺寸的元素，统一加
box-sizing: border-box，避免padding+border把总宽撑爆
用 outline 快速暴露错位源头，别一上来调 CSS
执行这行代码：document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>'，所有元素立刻显形。红色轮廓不干扰盒模型，比 border 更可靠。
- 能一眼看出哪个
<div>撑破了父容器、哪张<img>漂移了、<footer>被截断在哪 - 页面太乱？缩小范围：
div { outline: 2px solid #0088ff !important; } - 退出调试时执行
document.querySelector('style').remove()即可清除 - 注意：
outline会覆盖部分伪元素效果（如::before背景），临时够用，别长期开着
真正难搞的错位，往往藏在 HTML 结构合法性、viewport 生效状态、以及固定像素与相对单位混用的边界上——这些地方一旦出问题，表现就是“偶尔错位”“换个设备就崩”，而不是稳定复现。检查顺序不能倒：DOM 结构 → viewport → 宽度策略 → 样式细节。
