box-sizing属性决定元素宽高计算方式；2. content-box（默认）宽高仅含内容，padding和border额外增加尺寸；3. border-box宽高包含内容、padding和border，总尺寸固定；4. 实际开发常全局设置*{box-sizing:border-box}以简化布局控制。
在CSS中，box-sizing 属性决定了元素的宽度和高度如何计算。主要区别在于 border-box 和 content-box 如何处理 padding 和 border 对元素尺寸的影响。
content-box（默认值）
当 box-sizing: content-box 时，元素的 width 和 height 只包含内容区域，不包括 padding 和 border。
这意味着如果你设置了一个元素：
width: 200px;padding: 20px;
border: 5px solid black;
那么它实际占用的总宽度是：
立即学习“前端免费学习笔记（深入）”；
- 内容宽度：200px
- 左右内边距：20px × 2 = 40px
- 左右边框：5px × 2 = 10px
- 总宽度 = 200 + 40 + 10 = 250px
页面布局时容易因为额外的 padding 或 border 导致元素超出预期空间。
border-box
当 box-sizing: border-box 时，元素的 width 和 height 包含了内容、padding 和 border。
同样设置：
width: 200px;padding: 20px;
border: 5px solid black;
此时 200px 的宽度已经包含了所有部分：
- 总宽度固定为 200px
- border 占用 10px（左右各5px）
- padding 占用 40px（左右各20px）
- 内容实际可用宽度 = 200 - 10 - 40 = 150px
这种方式更直观，特别适合响应式布局，避免计算错位。
实际开发建议
很多开发者会在项目开始时统一设置：
* {box-sizing: border-box;
}
这样所有元素都使用 border-box 模型，更容易控制布局，减少意外溢出。
基本上就这些。理解这两个值的关键是搞清 width 到底“包不包含”padding 和 border。content-box 不包含，border-box 包含。选哪个取决于你希望如何控制尺寸。
