CSS元素的总宽度计算规则

摆烂且佛系2025-09-27 13:30

CSS 盒子模型（Box Model）的默认计算规则。

在默认情况下（box-sizing: content-box），元素的总宽度计算公式是：总宽度 = 内容区宽度（width） + 左右内边距（padding-left + padding-right） + 左右边框（border-left + border-right）

这种计算方式的设计逻辑是：

width 仅表示元素内部内容区域的宽度
padding 是内容与边框之间的空间，属于元素 "内部扩展"
border 是元素的边框线，属于元素 "边缘"

比如：

javascript 复制代码

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 会从内容区域内部 "挤压" 空间，而不是向外扩展
边框的宽度也会包含在总宽度内，不会额外增加元素的整体尺寸

javascript 复制代码

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;
}