在css中box-sizing:border-box与content-box区别

box-sizing属性决定元素宽高计算方式；2. content-box（默认）宽高仅含内容，padding和border额外增加尺寸；3. border-box宽高包含内容、padding和border，总尺寸固定；4. 实际开发常全局设置*{box-sizing:border-box}以简化布局控制。

在CSS中，box-sizing 属性决定了元素的宽度和高度如何计算。主要区别在于 border-box 和 content-box 如何处理 padding 和 border 对元素尺寸的影响。

content-box（默认值）

当 box-sizing: content-box 时，元素的 width 和 height 只包含内容区域，不包括 padding 和 border。

这意味着如果你设置了一个元素：

那么它实际占用的总宽度是：

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

• 内容宽度：200px
• 左右内边距：20px × 2 = 40px
• 左右边框：5px × 2 = 10px
• 总宽度 = 200 + 40 + 10 = 250px

页面布局时容易因为额外的 padding 或 border 导致元素超出预期空间。

border-box

当 box-sizing: border-box 时，元素的 width 和 height 包含了内容、padding 和 border。

Narration Box

Narration Box是一种语音生成服务，用户可以创建画外音、旁白、有声读物、音频页面、播客等

27

查看详情

同样设置：

此时 200px 的宽度已经包含了所有部分：

• 总宽度固定为 200px
• border 占用 10px（左右各5px）
• padding 占用 40px（左右各20px）
• 内容实际可用宽度 = 200 - 10 - 40 = 150px

这种方式更直观，特别适合响应式布局，避免计算错位。

实际开发建议

很多开发者会在项目开始时统一设置：

这样所有元素都使用 border-box 模型，更容易控制布局，减少意外溢出。

基本上就这些。理解这两个值的关键是搞清 width 到底“包不包含”padding 和 border。content-box 不包含，border-box 包含。选哪个取决于你希望如何控制尺寸。

以上就是在css中box-sizing:border-box与content-box区别的详细内容，更多请关注php中文网其它相关文章！