css默认采用content-box是因为在css1规范制定时，设计者希望盒子的width和height属性仅控制内容区域的大小，而边框和内边距是额外叠加的。这种设计让开发者能精确控制内容尺寸，但容易导致布局计算复杂化。
为什么选择content-box作为初始值
选择content-box是因为它符合早期Web开发中对“内容”与“装饰”分离的理念。开发者设置width时，期望的是内容区域的宽度，边框和内边距被视为额外的装饰层。这种设计允许通过调整padding和border来改变整体尺寸，而不影响内容本身的大小。
content-box如何影响元素尺寸计算
在content-box模式下，元素的总宽度等于width加上padding-left、padding-right、border-left-width和border-right-width。例如，设置width为100px，padding为10px，border为5px时，实际渲染宽度为130px。这种计算方式要求开发者手动累加所有部分才能得到最终尺寸。
立即学习“前端免费学习笔记（深入）”；
基于width属性设置的具体问题
当使用content-box时，如果直接修改width而不考虑padding和border，会导致元素超出预期容器。例如，在一个固定宽度的容器中，设置子元素width为100%并添加padding，会使子元素溢出容器边界。这是因为width只控制内容区域，而padding和border会额外增加总宽度。
