代码推演
同写 300px，为什么宽度不同？
<style>
.box { width:300px; padding:20px; border:5px solid navy; margin:10px; }
.a { box-sizing:content-box; }
.b { box-sizing:border-box; }
</style>
<div class="box a">A</div>
<div class="box b">B</div>提问：不计滚动条，A、B 的边框盒宽度与内容区宽度分别是多少？若计算左右外边距在内的横向占用，还需加多少？
查看参考解析
A：边框盒 350px、内容 300px；B：边框盒 300px、内容 250px。两者左右外边距合计再加 20px。margin 不计入声明的 border-box 宽度。