上线前必须检查盒模型：统一设 box-sizing 为 border-box，验证 padding/border 不导致溢出，排查 margin 合并与塌陷，确保响应式下尺寸计算精准，最终在无痕模式中逐元素确认真实渲染效果。
上线前盒模型问题不检查，页面布局大概率在不同设备或浏览器里“错一帧，全崩”。核心就一条：box-sizing 必须统一，且所有尺寸计算必须基于你实际采用的模型。
box-sizing 是否全局设为 border-box
默认是 content-box，但绝大多数现代项目都用 border-box。如果没显式设置，部分组件或第三方库可能回退到标准模型，导致 padding/border 撑出容器。
- 检查 CSS 入口文件是否包含：
* { box-sizing: border-box; }或至少html { box-sizing: border-box; }+*, *::before, *::after { box-sizing: inherit; } - 特别注意重置样式（如 normalize.css）是否覆盖了该设置；某些 UI 库（如 Bootstrap 4+）自带，但老版本或自定义构建可能漏掉
- 用开发者工具选中任意块级元素，在「Computed」标签页看
box-sizing值是否真为border-box，而不是 inherited 后被意外覆盖
padding/border 是否导致容器溢出或截断
哪怕用了 border-box，当父容器 width 设为 100% 或固定值，子元素若带 padding/border，仍可能触发水平滚动条或内容被裁剪——尤其在 flex/grid 容器中。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 检查关键容器（如
.container、header、卡片类组件）是否设置了overflow: hidden掩盖了真实溢出 - 对
width: 100%的子元素，确认其padding和border没有让实际渲染宽度突破父容器；必要时加max-width: 100% - 在移动端视口下用「Toggle device toolbar」模拟，观察是否有横向滚动或文字换行异常——这往往是 padding 挤占可用空间的信号
margin 合并与塌陷是否破坏垂直间距
相邻块级元素的垂直 margin 会合并，父元素与第一个/最后一个子元素的 margin 可能塌陷——上线后常见「标题离顶部太近」「段落间空隙比预期小」。
- 检查首屏标题、文章段落、卡片列表等典型垂直流场景，用开发者工具悬停 margin 区域，确认显示数值是否等于你写的值，还是被合并后变小了
- 避免依赖未声明的 margin 合并行为；明确需要间距的地方，优先用 padding（父容器上）或 flex gap（现代布局）替代 margin
- 若必须用 margin，对可能塌陷的父子关系，给父元素加
border-top、padding-top或overflow: hidden阻断塌陷
响应式断点下盒模型行为是否一致
百分比 width + padding + border 在不同屏幕宽度下，像素计算结果可能因四舍五入或 sub-pixel 渲染产生 1px 偏差，叠加后导致布局错位或换行异常。
- 在 Chrome DevTools 的「Rendering」面板中开启「Paint flashing」和「Layout Shift Regions」，缩放窗口反复触发重排，观察是否有闪烁区域
- 对关键栅格项（如
col-6类），检查其 computed width 是否严格等于预期值（比如 50% 应为整数 px，而非 49.98px） - 慎用
rem+ 小数 padding（如padding: 0.375rem），在 125% 缩放或某些 Android WebView 下易失精度；优先用px或em配合整数比例
最容易被忽略的是：开发者工具里看到的尺寸是「当前模型下的结果」，不是「你写的值」。上线前最后一遍检查，务必关掉所有扩展，清空缓存，用无痕模式打开真实部署地址，逐个元素 hover 盒模型图示——那里显示的数字，才是用户最终看到的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
