CSS 盒模型有哪些？box-sizing 的作用是什么？
两种盒模型
1. 标准盒模型（content-box）
width/height= 内容区域- 实际宽度 = width + padding + border + margin
2. 怪异盒模型（border-box）
width/height= 内容 + padding + border- 实际宽度 = width + margin（width 已包含 padding 和 border）
/* 标准盒模型 */
.box1 {
box-sizing: content-box;
width: 100px;
padding: 10px;
border: 1px solid;
/* 实际宽度 = 100 + 20 + 2 = 122px */
}
/* 怪异盒模型 */
.box2 {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 1px solid;
/* 实际宽度 = 100px（padding和border被包含在内） */
}全局推荐
* {
box-sizing: border-box;
}border-box 更符合直觉，计算尺寸更方便，是现代开发的主流选择。