box-sizing
content-box vs border-box、全局设置 *,*::before,*::after
box-sizing
box-sizing 改变盒模型计算方式——几乎所有现代项目都用 border-box。
学完本章你将： 掌握 content-box vs border-box、全局设置。
对比
css
/* content-box（默认）：width = 内容宽度 */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid;
}
/* 实际宽度 = 300 + 40 + 10 = 350px —— 超出预期！ */
/* border-box：width = 内容+padding+border */
.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid;
}
/* 实际宽度 = 300px —— 符合预期 */全局设置（推荐）
css
/* 所有项目的第一行 CSS */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 这样 width 就是你看到的——省心 */实际影响
css
/* 两列布局——content-box 会溢出 */
.col { width: 50%; padding: 20px; float: left; }
/* 实际宽度 > 50%，换行！ */
/* border-box 就不会 */
.col {
box-sizing: border-box;
width: 50%;
padding: 20px;
float: left;
}
/* 正好 50%，完美并排 */