微调是保障布局在真实设备和内容下不崩、不溢、不卡位的关键动作；核心问题集中于padding、margin、box-sizing及Flex子项的min-width等细节。
微调不是“修修补补”，而是让布局在真实设备和内容下不崩、不溢、不卡位的关键动作。多数布局问题不出在主结构，而卡在 padding、margin、box-sizing 这几个地方。
为什么 margin: 0 auto 有时不居中？
常见现象：给一个 div 写了 width: 300px; margin: 0 auto;，但它就是靠左贴边，不居中。
原因不是代码写错，而是这个元素的 display 类型不支持自动外边距居中：
-
inline或inline-block元素：不响应margin: 0 auto（除非父容器设text-align: center） -
flex或grid子项：margin: 0 auto依然有效，但会被justify-content等覆盖，优先级更低 - 真正起效的前提是：块级元素（
display: block或默认块行为）+ 明确宽度 + 父容器宽度大于子元素
实操建议：调试时右键检查元素，看 computed 栏里 display 是什么；不确定就加一句 display: block; 显式声明。
立即学习“前端免费学习笔记（深入）”；
padding 和 border 总把盒子撑大？
这是最常被忽略的尺寸陷阱。默认 box-sizing: content-box 下，width: 300px 只算内容区，加上 padding: 10px 和 border: 2px 后，实际占宽变成 324px。
解决方案统一且简单：
- 全局加重置：
* { box-sizing: border-box; }（作业/项目开头必写） - 只对特定组件加：
.card { box-sizing: border-box; width: 100%; padding: 16px; }，此时宽度包含内边距 - 注意：IE8 及更早不支持
border-box，但 2026 年已无实际兼容压力
不设 box-sizing: border-box 的后果：响应式断点错乱、Flex 子项换行异常、Grid 列宽计算失准。
Flex 子项文字太长导致容器撑开？
比如侧边栏用 flex: 0 0 240px 固定宽度，但里面放了一段没空格的 URL，整个栏直接变宽甚至横向滚动。
这不是 Flex 的 bug，是浏览器默认行为：Flex 子项不主动截断文本。
关键修复只需一行：
- 给该子元素加
min-width: 0;（或overflow: hidden），强制它遵守父容器约束 - 配合
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;实现省略效果 - 不要只加
overflow: hidden—— 没min-width: 0，它仍可能撑开
这个组合在卡片、列表项、导航菜单里高频出现，漏掉 min-width: 0 是线上布局错位的隐形元凶。
用 position: relative 微调却偏移出界？
相对定位本意是“原地挪动”，但很多人发现加了 top: -10px 后，下方元素没上移，留出空白——因为相对定位不脱离文档流，但位移后原占位空间还在。
更隐蔽的问题是嵌套场景：
- 父容器没设
position: relative，子元素用position: absolute定位，基准会跑到body，极易错位 - 多个
relative嵌套时，top/left是相对于**最近的已定位祖先**，不是最外层 - 避免同时用
top和bottom（除非真要拉伸高度），zoom 缩放下渲染行为不稳定
实操口诀：要用 absolute，先找或加一个 position: relative 的父容器；微调优先用 transform: translateY(-10px)，它不影响文档流，也无副作用。
