CSS元素的总宽度计算规则
CSS 盒子模型（Box Model）的默认计算规则。
在默认情况下（box-sizing: content-box），元素的总宽度计算公式是：总宽度 = 内容区宽度（width） + 左右内边距（padding-left + padding-right） + 左右边框（border-left + border-right）
这种计算方式的设计逻辑是：
width仅表示元素内部内容区域的宽度padding是内容与边框之间的空间，属于元素 “内部扩展”border是元素的边框线，属于元素 “边缘”
比如：
div {width: 240px;height: 35px;border: 1px solid #d9e0ee;border-top: 3px solid #ff8400;line-height: 35px;padding-left: 40px;font-size: 14px;
}当设置 width: 240px 并添加 padding-left: 40px 和 border: 1px 时：总宽度 = 240px（内容） + 40px（左内边距） + 0（右内边距） + 1px（左边框） + 1px（右边框） = 282px
【注】padding-left 会让元素整体变宽 —— 因为默认规则下，内边距和边框都是在 width 之外额外计算的。
增加 padding-left 时，元素的总宽度会变大（内容宽 + 左内边距 + 边框宽度）。
要解决这个问题，可以使用 box-sizing: border-box 属性，它会让 width 包含内容区、内边距和边框的宽度，这样修改 padding 就不会改变元素的总宽度了。
添加 box-sizing: border-box 后：
- 元素的总宽度会固定为
width设定的 240px padding-left: 40px会从内容区域内部 “挤压” 空间，而不是向外扩展- 边框的宽度也会包含在总宽度内，不会额外增加元素的整体尺寸
div {width: 240px;height: 35px;border: 1px solid #d9e0ee;border-top: 3px solid #ff8400;line-height: 35px;padding-left: 40px;font-size: 14px;/* 新增这行代码 */box-sizing: border-box;
}