在前端开发过程中，设计稿还原是核心工作之一，很多开发者会遇到明明按照设计稿标注的数值编写CSS，最终页面元素的尺寸却和设计稿不符的情况，这往往和CSS盒模型的计算规则密切相关。
CSS盒模型的基础概念
CSS中每个元素都可以看作是一个矩形盒子，这个盒子由四部分组成，从内到外依次是内容区、内边距、边框、外边距。其中外边距不会影响元素本身的尺寸，只会影响元素和其他元素之间的间距，而内容区、内边距、边框都会直接影响元素占据的总空间。
我们可以通过box-sizing属性来切换盒模型的计算方式，目前主流的盒模型有两种：标准盒模型和怪异盒模型。
标准盒模型
标准盒模型是浏览器的默认盒模型，当box-sizing属性值为content-box时生效，也是很多开发者容易踩坑的盒模型类型。
在标准盒模型下，元素的总宽度和总高度的计算规则如下：
- 总宽度 = 内容区宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
- 总高度 = 内容区高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度
也就是说，如果你给一个元素设置了width: 100px，同时设置了padding: 10px和border: 2px solid #000，那么这个元素最终占据的总宽度是100 + 10*2 + 2*2 = 124px，而不是你设置的100px，这就是很多设计稿还原不准的核心原因。
怪异盒模型
怪异盒模型也叫IE盒模型，当box-sizing属性值为border-box时生效，这种盒模型的计算方式更符合设计稿的标注逻辑。
在怪异盒模型下，元素设置的width和height就是元素的总宽度和总高度，内容区的尺寸会自动减去内边距和边框的宽度，计算规则如下：
- 内容区宽度 = 设置的width - 左内边距 - 右内边距 - 左边框宽度 - 右边框宽度
- 内容区高度 = 设置的height - 上内边距 - 下内边距 - 上边框宽度 - 下边框宽度
同样上面的例子，如果设置box-sizing: border-box，width: 100px，padding: 10px，border: 2px solid #000，那么元素的总宽度就是100px，内容区宽度会自动计算为100 - 20 - 4 = 76px，更符合设计稿中直接标注元素总尺寸的习惯。
通过盒模型精确还原设计稿的步骤
第一步：确认设计稿的尺寸标注规则
拿到设计稿后，首先要确认设计稿中标注的元素尺寸是内容区尺寸还是包含内边距、边框的总尺寸。大部分UI设计工具标注的元素尺寸都是总尺寸，也就是包含内边距和边框的整体大小，这种情况下优先使用怪异盒模型来还原。
第二步：全局设置盒模型
为了避免每个元素都单独设置box-sizing，我们可以在CSS初始化时全局设置盒模型，推荐将根元素设置为怪异盒模型，这样所有子元素默认都会继承这个属性，减少重复代码。
/* 全局设置怪异盒模型 */
*,
*::before,
*::after {
box-sizing: border-box;
}
第三步：对照设计稿计算样式值
如果设计稿中某个按钮的总宽度是120px，内边距左右各10px，边框是1px的实线，那么按照怪异盒模型的规则，我们直接设置width: 120px即可，不需要额外计算内容区宽度，具体代码如下：
.btn {
/* 总宽度就是设计稿标注的120px */
width: 120px;
height: 40px;
padding: 0 10px;
border: 1px solid #e5e5e5;
border-radius: 4px;
background-color: #1677ff;
color: #fff;
text-align: center;
line-height: 38px; /* 高度减去上下边框2px，保证文字垂直居中 */
}
如果设计稿标注的是内容区尺寸，比如按钮内容区宽度100px，左右内边距各10px，边框1px，那么总宽度应该是100+20+2=122px，这时候如果使用标准盒模型，就需要设置width: 100px，如果使用怪异盒模型，就需要设置width: 122px，根据实际场景选择即可。
第四步：处理特殊场景的尺寸偏差
有时候即使设置了正确的盒模型，还是会出现尺寸偏差，常见的场景有：
- 元素设置了
min-width或max-width，导致实际尺寸被限制，需要检查这些属性是否和设计稿冲突 - 元素存在外边距合并的情况，父元素和子元素的外边距会合并，这时候需要给父元素设置
overflow: hidden或者边框、内边距来触发BFC，避免外边距合并影响布局 - 设计稿中的图标或者文字有特殊的偏移，需要结合
position或者transform微调，不要直接修改盒模型的尺寸
常见还原问题的排查方法
如果还原后尺寸还是不对，可以按照以下顺序排查：
- 打开浏览器开发者工具，选中对应元素，查看盒模型的可视化展示，确认当前元素的盒模型类型、各部分尺寸是否正确
- 检查是否有全局样式或者继承样式覆盖了
box-sizing属性，导致盒模型不符合预期 - 确认设计稿的标注单位是否和CSS中的单位一致，设计稿通常用px，CSS中也用px，避免单位换算错误
- 检查元素是否有隐藏的伪元素，伪元素也会占据空间，需要把伪元素的尺寸也计算进去
通过正确理解盒模型的计算规则，结合设计稿的标注逻辑选择合适的盒模型类型，就可以大幅提升设计稿的还原精度，减少不必要的样式调试时间。