问题定位

在测试flutter动态化引擎过程中发现相同width的CSS样式下发到flutter到时渲染和web端不一致，明显感觉端上的宽高要多出一部分，但是宽度和margin的值完全一样。

花了一些时间排查这个问题，基本定位到问题来源于两者使用的盒模型不一致所导致的。

盒模型

盒模型最直观的就是下面这张图片：

标准的W3C盒模型由4部分组成：content，padding，border和margin。对应box-sizing的value为content-box

简单来说元素的宽度=content width + padding + border + margin

而IE6以下还有另一种盒模型，该模型下元素的宽度则为Width + margin，此时的Width是包含了元素的content width + padding + border的，对应box-sizing的value为border-box

上面两张图片的CSS都为：


div {
    width: 200px;
    height: 100px;
    margin: 40px;
    padding: 20px;
    border: 10px solid blue;
}

看了上面盒模型的介绍相信大家对问题原因应该都比较清楚了，很可能是两者盒模型不一致导致相同CSS但是渲染效果截然不同

但是Web端默认的盒模型（box-sizing属性）value是content-box，而flutter也是一样，为什么会出现盒模型不一致呢？

后面检查了代码后发现我这里Web端工具的渲染CSS全局被reset为border-box（即另一种盒模型，width算上了padding和border）

咨询了相关同事后将对应Web端的渲染元素box-sizing修改回content-box后重新配置相关布局属性后最终解决了该问题