标准答案
- CSS 盒模型描述元素占用空间的组成，从内到外是 content、padding、border 和 margin。
- content-box 是默认盒模型。width 和 height 只表示内容区尺寸，最终占位还要加上 padding 和 border。
- border-box 会把 padding 和 border 算进 width 和 height，width: 100px 表示整个边框盒宽 100px。
- margin 不属于 box-sizing 的计算范围，它控制元素和外部元素之间的距离。
- 工程里常把 box-sizing: border-box 设成全局规则，因为卡片、表单、栅格和响应式宽度更容易计算。
题目解析
这题考的是尺寸计算。回答时不要只说“四部分”，还要说清 width 在两种 box-sizing 下到底代表哪一层盒子的宽度。
margin 不属于元素自身的 border box，它影响元素和外界的距离，也会参与外边距折叠等布局规则。
代码示例
同样是 200px 宽度，border-box 更容易控制最终占位。
CSS
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 1px solid #35ad72;
}
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #35ad72;
}常见误区
- 误以为 width 永远等于元素最终占用宽度。content-box 下还要加 padding 和 border。
- 把 margin 算进 box-sizing。box-sizing 不会把 margin 算进 width。
- 全局设置 border-box 后，忘记第三方组件或伪元素也可能需要继承 box-sizing。