box-sizing为content-box时width为何包含border宽度？

问题原因 #

你引入的 normalize.css v5.0.0 重置样式表中，默认为 <button> 元素设置了 box-sizing: border-box 规则，该规则优先级高于浏览器默认的 content-box 规则。

• 当 box-sizing 为 border-box 时，你设置的 width: 34px 是元素总宽度，包含了border、padding和content区域的宽度
• 你的 .square 类配置了左右各1px的border（合计2px）、padding为0，因此content区域宽度为 34px - 2px = 32px，和你在开发者工具中看到的计算值完全吻合。

解决方案 #

可以根据你的需求二选一：

• 给 .square 类显式添加 box-sizing: content-box 规则，覆盖normalize的默认配置，此时 width: 34px 只会作用于content区域，加上2px的border后元素总宽度为36px。
• 若希望保留 border-box 盒模型规则，直接将 .square 的 width 调整为36px即可，此时content区域宽度自动计算为 36px - 2px = 34px，符合你的初始预期。

内容的提问来源于stack exchange，提问作者SWIIWII