css组件嵌套后出现尺寸失控是前端开发中非常常见的问题，核心原因大多和盒模型的叠加计算规则有关，只要逐层梳理盒模型的构成，就能快速定位问题并解决。
css盒模型的基本构成
css中每个元素都可以看作一个矩形盒子，标准盒模型的构成从内到外依次是内容区、内边距、边框、外边距。我们可以通过box-sizing属性控制盒模型的计算方式，默认值是content-box，也就是宽度和高度只计算内容区的大小。
如果使用border-box，那么设置的宽度和高度会包含内容区、内边距和边框，外边距仍然单独计算。两种盒模型的计算规则差异，是组件嵌套时尺寸失控的主要原因之一。
两种盒模型的计算示例
下面通过代码对比两种盒模型的尺寸计算差异：
/* 标准盒模型，元素总宽度 = 200 + 20*2 + 2*2 = 244px */
.box1 {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
/* border-box盒模型，元素总宽度 = 200px，内容区宽度 = 200 - 20*2 - 2*2 = 156px */
.box2 {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
组件嵌套时尺寸失控的常见场景
场景1：嵌套组件盒模型类型不一致
如果父组件使用content-box，子组件使用border-box，很容易出现子组件超出父容器的情况。比如父组件宽度200px，子组件设置宽度100%，同时有20px内边距和2px边框，在content-box下子组件总宽度会变成100% + 44px，超出父容器宽度。
场景2：忽略外边距的叠加效果
垂直方向的外边距会出现叠加现象，也就是两个相邻元素的外边距会取较大的那个值，而不是相加。如果嵌套的组件都设置了垂直外边距，很容易导致整体尺寸超出预期。
场景3：继承的样式影响尺寸计算
有些全局样式会统一设置box-sizing，如果某个组件单独修改了盒模型类型，或者继承了意外的内边距、边框样式，也会导致尺寸计算错误。
逐层检查盒模型叠加的方法
第一步：确认每个组件的盒模型类型
打开浏览器的开发者工具，选中对应的组件，在样式面板中查看box-sizing属性的值，确认所有嵌套组件的盒模型类型是否统一，建议项目内统一使用border-box，减少计算复杂度。
第二步：逐层计算尺寸
按照从父到子的顺序，计算每个组件的总宽度和总高度：
- 如果是
content-box：总尺寸 = 设置的宽高 + 内边距*2 + 边框*2 + 外边距*2 - 如果是
border-box：总尺寸 = 设置的宽高 + 外边距*2
如果子组件的总尺寸大于父组件的内容区尺寸，就会出现溢出或者尺寸失控的问题。
第三步：检查外边距叠加情况
查看嵌套组件之间的垂直外边距，确认是否存在外边距叠加的情况，如果叠加后的外边距导致整体尺寸超出容器，可以调整外边距的数值，或者给父组件添加overflow: hidden触发BFC，避免外边距叠加。
解决尺寸失控的常用方案
如果检查后发现是盒模型类型不一致导致的，可以统一设置盒模型类型，比如全局添加如下样式：
/* 全局统一使用border-box盒模型 */
*,
*::before,
*::after {
box-sizing: border-box;
}
如果是子组件有内边距或者边框导致超出父容器，可以调整子组件的宽度计算方式，比如使用calc()函数动态计算宽度：
/* 父容器宽度200px，子组件有20px内边距和2px边框，动态计算宽度 */
.parent {
width: 200px;
}
.child {
width: calc(100% - 20px*2 - 2px*2);
padding: 20px;
border: 2px solid #666;
}
如果是外边距叠加导致的问题，可以调整外边距的设置，或者给父组件设置padding-top代替子组件的margin-top，避免外边距叠加带来的尺寸异常。
注意：修改盒模型相关样式时，要先确认是否会影响其他组件的布局，避免修复一个问题又引发新的布局异常。