17370845950

box-sizing属性可改变CSS盒模型计算方式，默认content-box下宽高仅含内容，padding和border额外增加总尺寸；使用border-box后，宽高包含内容、内边距和边框，使布局更直观可控。通过全局设置, ::before, *::after { box-sizing: border-box; }可统一所有元素的盒模型，避免布局错位，提升开发效率。

默认情况下，CSS 的盒模型将元素的宽度（width）和高度（height）仅应用于内容区域，而内边距（padding）、边框（border）和外边距（margin）会额外增加总尺寸。这在布局时容易导致计算复杂。box-sizing 属性可以改变这种计算方式，让开发者更直观地控制元素的实际大小。

box-sizing: content-box（默认值）

这是浏览器默认的盒模型：

• 设置的 width 和 height 只包括内容区域
• padding 和 border 会增加在 width/height 之外
• 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

例如：一个元素 width: 200px; padding: 10px; border: 5px solid; 实际占用宽度为 200 + 20 + 10 = 230px。

box-sizing: border-box

使用 border-box 后，元素的 width 和 height 包含了内容、内边距和边框：

• 设置的 width 和 height 是元素最终占据的总宽高
• padding 和 border 将在 width/height 内部“压缩”内容区域
• 总宽度 = 设置的 width（已包含 padding 和 border）+ 左右 margin

例如：同样设置 width: 200px; padding: 10px; border: 5px solid; 在 border-box 下，实际宽度就是 200px，内容区域自动缩小为 170px。

如何使用 box-sizing 统一布局

为了简化页面布局，很多开发者会在全局重置 box-sizing：

*, *::before, *::after {
  box-sizing: border-box;
}

这样所有元素都采用 border-box 模型，避免意外溢出或错位，尤其在栅格布局、弹性盒子中更加可控。

基本上就这些，合理使用 box-sizing 能大幅减少尺寸计算的困扰。