代码推演
代码预测：边框盒与内容区宽度
提问：没有滚动条时，A、B 的边框盒宽度和内容区宽度各是多少？两侧声明的外边距是否计入这些数值？
共同的尺寸
.notice {
width: 300px;
padding: 20px;
border: 5px solid navy;
margin: 10px;
}各自的计算方式
.a { box-sizing: content-box; }
.b { box-sizing: border-box; }<div class="notice a">
A：分享会报名通知
</div>
<div class="notice b">
B：分享会报名通知
</div>查看参考解析
A：内容区 300px，边框盒为 300 + 20 × 2 + 5 × 2 = 350px。
B：边框盒 300px，内容区为 300 − 20 × 2 − 5 × 2 = 250px。
左右外边距分别声明为 10px，但它们位于边框之外，不计入上述内容区或边框盒宽度。
展开代码运行演示
<style>
.notice {
width: 300px;
padding: 20px;
border: 5px solid navy;
margin: 10px;
}
.a { box-sizing: content-box; }
.b { box-sizing: border-box; }
</style>
<div class="notice a">A：分享会报名通知</div>
<div class="notice b">B：分享会报名通知</div>