css box-sizing如何改变盒模型计算方式

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

box-sizing: border-box

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

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

如何使用 box-sizing 统一布局

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

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

32

查看详情

立即学习“前端免费学习笔记（深入）”；

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

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

以上就是css box-sizing如何改变盒模型计算方式的详细内容，更多请关注php中文网其它相关文章！