当前位置：首页 > 文章列表 > 文章 > 前端 > CSSbox-sizing属性用于定义元素的盒模型计算方式，控制元素的宽度和高度如何计算。它有两个主要值：content-box（默认值）：元素的宽度和高度仅包括内容区域，不包含内边距（padding）和边框（border）。例如：如果设置width:100px;padding:10px;，那么元素实际占用的宽度是100+10*2+border。border-box：元素的宽度和高度包括内容、内边

CSSbox-sizing属性用于定义元素的盒模型计算方式，控制元素的宽度和高度如何计算。它有两个主要值：content-box（默认值）：元素的宽度和高度仅包括内容区域，不包含内边距（padding）和边框（border）。例如：如果设置width:100px;padding:10px;，那么元素实际占用的宽度是100+10*2+border。border-box：元素的宽度和高度包括内容、内边

2026-01-06 12:29:48 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《CSS box-sizing是什么？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

推荐使用 box-sizing: border-box 因为它使元素的宽高包含 padding 和 border，设定的宽度即实际占据空间，避免布局溢出；通过全局设置 , ::before, *::after { box-sizing: border-box; } 可提升开发效率和响应式设计的可控性。

css box-sizing属性是什么

box-sizing 属性定义了元素的宽度和高度如何计算，直接影响布局行为。默认情况下，CSS 的 width 和 height 只包含内容区域，而 padding 和 border 会额外增加尺寸。box-sizing 可以改变这种计算方式，让布局更直观可控。

box-sizing 的常用值

content-box（默认值）
width 和 height 只应用于内容区域，padding 和 border 会增加元素总宽高。
例如：一个元素 width: 200px; padding: 10px; border: 5px solid，则实际宽度为 200 + 20 + 10 = 230px。

border-box
width 和 height 包含内容、padding 和 border，内容区域会自动压缩。
同样设置 width: 200px; padding: 10px; border: 5px solid，实际宽高仍为 200px，内容区只剩 170px 宽。

为什么推荐使用 border-box

使用 box-sizing: border-box 能让布局更可预测，尤其在栅格系统或响应式设计中：

设定的宽度就是最终占据的空间，避免溢出容器
多个盒子并排时更容易控制总宽度
减少计算负担，提升开发效率

如何全局设置

通常建议在项目开始时统一设置：

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

这样所有元素都采用 border-box 模型，布局更一致。

基本上就这些，不复杂但容易忽略。

本篇关于《CSSbox-sizing属性用于定义元素的盒模型计算方式，控制元素的宽度和高度如何计算。它有两个主要值：content-box（默认值）：元素的宽度和高度仅包括内容区域，不包含内边距（padding）和边框（border）。例如：如果设置width:100px;padding:10px;，那么元素实际占用的宽度是100+10*2+border。border-box：元素的宽度和高度包括内容、内边距和边框。例如：如果设置width:100px;padding:10px;，那么内容区域的宽度会自动调整为100-10*2=80px，而总宽度始终是100px。使用场景布局控制：使用border-box可以更直观地控制元素尺寸，避免因内边距和边框导致布局错乱。响应式设计：在需要精确控制元素大小时，border-box更加方便。示例代码.box{width:200px;padding:20px;border:5pxsolid#000;》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

CSS