box-sizing属性用于控制元素盒模型的计算方式，默认content-box使width仅含内容区域，padding和border额外增加总尺寸；而border-box让width包含内容、padding和border，设置width:100px即总宽为100px。通过.box{box-sizing:border-box}可切换模型，推荐全局重置*{box-sizing:border-box}以统一布局行为。实际应用中，border-box便于实现等宽并列布局与响应式设计，避免溢出问题。该属性从IE8起支持，现代浏览器兼容良好，但需注意第三方组件可能覆盖设置，建议在CSS重置时优先定义。合理使用能提升布局可预测性，减少调试成本。
在CSS中，box-sizing 属性是控制元素盒模型计算方式的关键工具。默认情况下，元素使用的是 content-box 模型，这会让 width 和 height 只包含内容区域，而 padding 和 border 会额外增加元素总尺寸。通过切换 box-sizing，可以更直观地控制布局，避免意外的溢出或错位。
理解两种盒模型
CSS 提供了两种主要的盒模型：
- content-box：默认值。width 和 height 只应用于内容区域。padding 和 border 会增加到设定的宽高之外。
- border-box：width 和 height 包含了内容、padding 和 border。这意味着设置 width: 200px; 就是整个元素占 200px 宽，无论内边距或边框多大。
举个例子：一个元素设置为 width: 100px; padding: 10px; border: 5px solid black;
- 使用 content-box 时，实际宽度为 100 + 2×10 + 2×5 = 130px
- 使用 border-box 时，实际宽度就是 100px，内容区域自动缩小以容纳 padding 和 border
如何切换盒模型
直接为元素设置 box-sizing 属性即可切换：
.box {
box-sizing: border-box;
}
推荐在全局重置样式中统一设置，避免不同浏览器默认行为不一致：
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素都采用 border-box 模型，布局更 predictable（可预测），尤其是在栅格系统或响应式设计中。
实际应用场景
在构建等宽并列的卡片或表单控件时，border-box 能显著简化计算：
- 两个 div 各设 width: 50%; padding: 20px; 使用 border-box 仍能完美并排
- 若用 content-box，总宽将超过 100%，导致换行
- 移动端适配时，固定尺寸容器内添加内边距不会破坏布局
兼容性与注意事项
box-sizing 属性从 IE8 开始被支持，现代浏览器均无问题。但需注意：
- 某些第三方组件可能强制使用 content-box，需覆盖样式
- 使用 CSS reset 或 normalize.css 时建议优先定义 box-sizing
- 动画或 JS 获取元素尺寸时，逻辑保持一致即可
基本上就这些。合理使用 box-sizing 能大幅减少布局调试时间，让 CSS 表现更符合直觉。不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
