为什么你的CSS布局总是错位以及如何排查

CSS 布局错位的根本原因通常只有三类：盒模型尺寸算错（尤其是默认的 content-box）、外边距折叠（margin collapsing，相邻垂直外边距合并成较大值）、以及定位基准不是你想象中的父元素。排查顺序固定为：先看 Computed 里的盒模型数值，再看 display/position/box-sizing 的计算值，最后用二分法注释元素定位污染源。

为什么宽度设了 100px，实际却占了 120px？

结论：因为 CSS 默认的盒模型是 content-box，width: 100px 只约束内容区，元素的实际占位宽度是 width + padding-left + padding-right + border-left + border-right。

也就是说，如果你给一个 width: 100px 的盒子加 padding: 10px 和 border: 1px，它实际占 122px，正好超出父容器 22px，横向滚动条和"下面元素被顶飞"就是这么来的。解决办法是在全局重置里加 *, *::before, *::after { box-sizing: border-box; }，让 width 包含 padding 和 border（仍然不包含 margin）。注意 box-sizing 不继承，必须用通配符或 inherit 显式设置。

上下两个元素的间距为什么不是 20px 加 30px？

结论：垂直方向相邻的块级元素会发生外边距折叠，20px 与 30px 合并后取 30px，而不是 50px。

外边距折叠有三种典型场景：相邻兄弟之间、父元素与第一个/最后一个子元素之间、以及空元素自身的上下边距。父子的那种最容易被误判为"元素没对齐到顶部"——父元素没有 border、padding、overflow 时，子元素的 margin-top 会穿出去，把父元素整体往下推。判定方法：给父元素临时加 overflow: hidden（形成 BFC，块级格式化上下文）或 display: flow-root，如果错位消失，就是折叠造成的。

绝对定位的元素为什么没对齐到父元素？

结论：position: absolute 的定位基准是最近的、position 不为 static 的祖先元素的 padding box；一个都没有时，基准是初始包含块（文档根）。

所以给子元素写 position: absolute; top: 0 之前，先确认父元素有 position: relative。另外有两个坑：transform、filter、will-change: transform 也会创建包含块，哪怕祖先还是 position: static，动画一加上，fixed 元素就"跳"到那个祖先内部了；position: fixed 默认以视口为基准，同样会被带 transform 的祖先劫持。

inline-block 之间的空隙从哪来？

结论：空隙来自 HTML 源码中标签之间的换行和空格，它们被当成一个文本节点渲染，宽度等于一个空格字符的宽度，随 font-size 线性变化。

字号翻倍，空隙也翻倍，所以在响应式场景里会忽大忽小。三种修法：把父元素设为 display: flex（推荐，一劳永逸）；父元素 font-size: 0 再给子元素恢复字号；或者把标签写成首尾相连不换行。图片底部那几像素的"幽灵空白"是另一回事，来自行内元素按基线对齐，给图片加 display: block 或 vertical-align: middle 即可消除。

排查步骤：按这个顺序查，最快定位

结论：优先读浏览器给出的计算值，不要盯着自己写的 CSS 猜。

1. 右键元素 →「检查」，在 Elements 面板右侧 Computed 标签里看盒模型图，逐个核对 width/height/padding/border/margin 的真实像素；
2. 在 Console 输入 $0.getBoundingClientRect()（$0 是当前选中元素），拿到 top/left/width/height，和你预期直接对数；
3. 用 outline: 1px solid red 标出元素，不要用 border——border 会改变盒模型尺寸，把问题本身掩盖掉；
4. 查计算值而非声明值：getComputedStyle($0).display、.position、.boxSizing、.margin，被划掉的样式说明没生效，通常是选择器优先级或拼写问题；
5. 二分法：注释掉一半子元素，看错位是否消失，逐步缩小范围；
6. 横向溢出检测：在 Console 执行 document.documentElement.scrollWidth > document.documentElement.clientWidth，返回 true 说明某个元素撑破了容器。

哪些属性最容易"看起来没错但就是错位"？

结论：line-height、百分比高度、min-width: auto、100vw 和滚动条宽度是五个高频元凶。

line-height 的行高会在文字上下额外分配空间，导致视觉重心偏移；百分比 height 依赖父元素的确定高度，父元素是 auto 时子元素的 height: 100% 直接无效；flex 子项默认 min-width: auto，内容超长时不收缩、直接撑破容器，改成 min-width: 0 才会正常截断；100vw 包含滚动条宽度，在 Windows 版 Chrome 的传统滚动条下比 100% 宽出 15px，配合 overflow-x 就会产生横向滚动条。这些都不报错，只能在 DevTools 里逐个验证。

布局错位从来不是玄学，它是一个可以按固定顺序排查的工程问题：盒模型数值对不对、外边距有没有折叠、定位基准是不是那个祖先、行内元素有没有被空白和基线影响。把这四步走完，绝大多数"莫名其妙的错位"都能在几分钟内定位到具体那一行 CSS。