标准盒模型（content-box）下width仅指内容宽度，总宽度需加上padding和border；设置box-sizing: border-box后，width包含padding和border，内容区自动压缩，布局更直观。
在CSS中，盒模型的宽度计算方式直接影响元素的实际占用空间。默认情况下，元素的 width 只设置内容区域（content）的宽度，但实际占据的总宽度还受 padding 和 border 影响，除非更改盒模型行为。
标准盒模型（content-box）
这是默认的盒模型。当你设置 width: 200px; 时，这个值仅代表内容区域的宽度，不包括内边距和边框。总占用宽度计算公式为：
总宽度 = width + padding-left + padding-right + border-left + border-right
例如：
立即学习“前端免费学习笔记（深入）”；
- width: 200px
- padding: 10px
- border: 5px solid #000
实际总宽度 = 200 + 10×2 + 5×2 = 230px
替代盒模型（border-box）
通过设置 box-sizing: border-box; 可以改变盒模型的行为。此时，width 包含了 content、padding 和 border 的宽度。在这种模式下：
- 你设置的 width 值就是元素最终占据的总宽度（前提是不包含 margin）
- padding 和 border 的值会从内容区域“向内挤压”
例如：
立即学习“前端免费学习笔记（深入）”；
- box-sizing: border-box;
- width: 200px;
- padding: 10px;
- border: 5px solid #000;
此时内容区域实际可用宽度 = 200 - 20 - 10 = 170px，但整个盒子仍正好占 200px 宽。
如何选择盒模型
现代开发中，很多开发者倾向于全局设置：*, *::before, *::after { box-sizing: border-box; }
这样可以让布局更直观，特别是在使用百分比宽度或栅格系统时，避免因 padding 导致溢出容器的问题。
总结关键差异
- 默认（content-box）：width 仅为内容宽度，总宽需手动加 padding 和 border
- border-box：width 是包含 padding 和 border 的总宽度，内容区自动缩小
- box-sizing 属性是控制这一行为的关键
基本上就这些。理解两种模型的区别，能有效避免布局错位问题。
