← 返回列表
盒模型
标准盒模型（content-box）与怪异盒模型（border-box）的核心区别： width / height 到底包不包含 padding 和 border。
核心区别
- 标准盒模型（content-box）：
width / height只代表内容区域。 总宽度 = width + padding + border + margin。 - 怪异盒模型（border-box）：
width / height包含 内容 + padding + border。 总宽度 = width + margin。
一句话：content-box 加 padding/border 会把盒子撑大；border-box 是在设定的 width 里往里扣，盒子外轮廓更可控。
并排对比（相同数值）
两边都设置： width: 200px、 padding: 20px、 border: 10px。 看实测「边框外侧总宽」差多少。
content-box · 标准
期望 width = 200px
content
- 声明 width：200px（内容区实测 0px）
- 边框外侧总宽：0px
- 公式：200 + 20×2 + 10×2 = 260px
padding / border 叠在 width 外面，盒子被撑大了。
border-box · 怪异 / IE
期望 width = 200px
content
- 声明 width：200px（内容区实测 0px）
- 边框外侧总宽：0px
- 公式：总宽就是 width，内容被往里压缩
padding / border 从 200px 里扣，外轮廓仍是 200px。
如何切换
用 box-sizing 切换。浏览器默认是 content-box。
box-sizing: content-box;标准盒模型（默认）box-sizing: border-box;怪异盒模型（面试常说的 IE 盒模型）切换写法
/* 标准盒模型（浏览器默认） */
.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 10px solid;
}
/* 边框外侧总宽 = 200 + 20*2 + 10*2 = 260px */
/* 怪异盒模型（IE 盒模型） */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid;
}
/* 边框外侧总宽 = 200px，padding/border 往里扣 */
/* 开发里常见全局写法 */
*,
*::before,
*::after {
box-sizing: border-box;
}