移动端布局中必须全局设置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，使尺寸更符合直觉：
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
立即学习“前端免费学习笔记（深入）”；
* { 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”看各区域实际像素值：
- 绿色区域 = content，蓝色 = padding，橙色 = border —— 三者相加应 ≤ 父容器宽度
- 若总宽度标红（显示“overflows container”），立即检查
box-sizing和width定义 - 在“Rendering”设置中启用“Paint flashing”，可高亮重绘区域，间接暴露因溢出引发的渲染异常
