移动端布局中必须全局设置box-sizing: border-box，否则默认content-box模型下padding会额外增加宽度导致溢出；需特别处理表单控件、嵌套padding及边框元素，并用DevTools验证尺寸。
移动端布局中，CSS盒模型直接影响元素实际占用宽度，尤其当使用padding时，若未正确设置box-sizing，极易导致内容区宽度超出容器，引发横向滚动、布局错位或响应式失效。
默认盒模型（content-box）是溢出主因
在标准盒模型下，元素的width仅指内容区宽度，padding和border会额外增加总宽度。例如：
一个设为width: 100%、padding: 16px的按钮，在父容器宽375px时，实际占宽 = 375px + 32px = 407px → 溢出屏幕
- 移动端视口窄，哪怕几像素溢出也会触发水平滚动条
- Flex/Grid 容器内子项若因 padding 超出，可能破坏对齐或换行逻辑
- rem/vw 单位配合 padding 时，计算更易失控
统一使用 border-box 是最有效解法
全局设置box-sizing: border-box，让width包含padding和border，使尺寸更符合直觉：
立即学习“前端免费学习笔记（深入）”；
* { box-sizing: border-box; } —— 建议作为移动端项目第一行 CSS
- 此后
width: 100%+padding: 16px，元素仍严格占满父容器宽度 - 适配 iPhone SE（320px）到 Pro Max（430px）等不同屏宽时，padding 不再“偷空间”
- 与现代 CSS 框架（如 Tailwind、Bootstrap 5+）默认行为一致，减少意外
特殊场景仍需手动控制宽度
即使启用了border-box，以下情况仍需显式约束：
-
含固定边框的卡片：设
width: 100%+border: 1px solid #eee，虽不溢出，但左右各多占1px，视觉上略窄于相邻无边框元素 → 可加margin: 0 -1px抵消 -
input / textarea 等表单控件：部分浏览器默认
box-sizing: content-box，需单独重置：input, textarea { box-sizing: border-box; } -
嵌套 padding 的列表项：父容器
padding+ 子项padding易累积 → 改用gap替代子项内边距，或用:first-child/:last-child去除首尾多余 padding
用开发者工具快速验证
在 Chrome DevTools 中选中元素，右侧“Computed”面板查看box-sizing值，并展开“Metrics”看各区域实际像素值：
