box-sizing: border-box什么意思?

最新推荐文章于 2025-06-06 17:08:38 发布

原创最新推荐文章于 2025-06-06 17:08:38 发布 · 2.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

CSS 专栏收录该内容

6 篇文章

订阅专栏

box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。

box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。

●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。

●border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

uebest

关注关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

box-sizing: border-box；到底是干什么的？使用场景是什么？底层原理是什么？

长风破浪会有时的博客

11-01

1605

是一个非常有用的 CSS 属性值，用于精确控制元素的大小，尤其是在需要加上边框和内边距的情况下。通过使用border-box，可以避免元素大小超出预期的问题，从而更好地控制布局和设计。

深入理解 `box-sizing: border-box；`：CSS 布局的利器

engchina的专栏

02-02

1445

深入理解 `box-sizing: border-box;`：CSS 布局的利器

参与评论您还未登录，请先登录后发表或查看评论

box-sizing:border-box的理解和作用

qq_51066068的博客

09-26

2万+

box-sizing:border-box的理解和作用。CSS中代码background:url(图片) no-repeat right center的意思

CSS 中的 `box-sizing` 属性详解

weixin_43991457的博客

06-06

554

box-sizing是CSS控制元素宽高计算方式的属性，决定padding和border是否计入宽高。它有两个主要取值：content-box（默认值，宽高仅含内容区域）和border-box（宽高包含padding和border）。content-box需要手动计算总宽度，而border-box更直观实用，因此开发中常全局设置box-sizing: border-box以避免布局问题。该属性还有inherit值可继承父元素设置。实际项目中推荐使用border-box简化布局计算。

box-sizing: border-box；是什么意思

m0_64711772的博客

03-26

3992

box-sizing: border-box；是什么意思

box-sizing: border-box;的作用

热门推荐

qq_37453240的博客

01-31

4万+

box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包

css中的 box-sizing: border-box

m0_51354601的博客

12-11

4239

box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。

详解CSS3中的box-sizing（content-box与border-box）

12-14

CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...

关于box-sizing的全面理解

12-13

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。语法box-sizing: content-box|border-box|inherit; ...

CSS3 box-sizing属性详解

12-13

box-sizing属性包括content-box（default），border-box，padding-box。 1、content-box，border和padding不计算入width之内 2、padding-box，padding计算入width内 3、border-box，border和padding计算入...

css box-sizing:border-box

yuzheh521的博客

12-09

2180

此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景。，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。比如,给父元素parent设置宽高为500px，背景色为黑色；，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。

box-sizing:border-box

HDdgut的博客

08-16

318

box-sizing:border-box; 但指定的width或height等于100%的时候，需要加边距的时候可以使用 box-sizing: border-box; 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。也就是： height=pa...

css中神奇的盒模型-----（box-sizing：border-box）

Amelian的博客

11-26

3670

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。 box-sizing属性用于更改

box-sizing:border-box 解释

weixin_33692284的博客

10-05

515

box-sizing:border-box 为ie的怪异盒模型引进的；如果给标签加上box-sizing:border-box 属性，则会告知浏览器的解析器这个元素的盒模型类型为怪异盒模型；即给元素设置的宽高不但包括content还会包含padding和border；分割线------------------------------...

CSS之box-sizing:border-box

qq_44388958的博客

03-11

1340

box-sizing:border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。如果上述的内容还不是太明白，我们就来举个例子： · 比如插入一个DIV，这个DIV的宽度设置为200像素，高度也设置为200像素；那么这个DIV就是宽200px，高200...

从box-sizing:border-box属性入手，来了解盒模型

TwcatL_tree

01-20

5880

从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题...

box-sizing:border-box;理解，盒模型

qq_43197791的博客

12-28

2581

*解决添加padding边距向外加问题在給下面添加padding时，出现了下面宽度比头部宽出来一部分，其实是padding加到外部。解决方法很简单只需要添加box-sizing:border-box;意思就是改变了盒模型。 pc端只有双击的时候会看到 box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C，后者为IE盒子模型。 .business-title...

box-sizing:border-box;是什么意思

最新发布

06-23

### CSS 属性 `box-sizing: border-box` 的含义及作用 #### 1. **盒模型的基本概念** 在CSS中，元素的宽度和高度计算方式由盒模型决定。盒模型包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。默认情况下，元素使用的是 `content-box` 盒模型[^3]。 #### 2. **`box-sizing: border-box` 的定义** 当设置 `box-sizing: border-box` 时，元素的宽度和高度将包含内容、内边距和边框，但不包括外边距。这意味着即使添加了内边距或边框，元素的总宽度和高度仍然保持不变[^4]。 #### 3. **与 `content-box` 的对比** - 在 `content-box` 模式下，宽度和高度仅指内容区域的大小，而内边距和边框会增加到指定的宽度和高度之外[^3]。 - 在 `border-box` 模式下，指定的宽度和高度是整个盒子的尺寸，包括内容、内边距和边框[^3]。 #### 4. **代码示例** 以下是一个简单的代码示例，展示 `box-sizing: content-box` 和 `box-sizing: border-box` 的差异： ```html <body> <div class="content-box">Content Box</div> <div class="border-box">Border Box</div> </body> <style> .content-box { width: 200px; height: 200px; padding: 20px; border: 10px solid black; box-sizing: content-box; background-color: lightblue; } .border-box { width: 200px; height: 200px; padding: 20px; border: 10px solid black; box-sizing: border-box; background-color: lightgreen; } </style> ``` 在这个例子中： - `.content-box` 的实际宽度为 `260px`（200px 内容 + 40px 内边距 + 20px 边框）。 - `.border-box` 的实际宽度为 `200px`，因为 `box-sizing: border-box` 将内边距和边框包含在宽度之内。 #### 5. **最佳实践** 许多现代CSS框架和项目推荐全局设置 `* { box-sizing: border-box; }`，以简化布局设计并避免子元素宽度溢出的问题。 #### 6. **视觉差异对比** | 属性值 | 内容区域宽度 | Padding 是否算宽度 | Border 是否算宽度 | 使用体验 | |----------------|--------------|--------------------|--------------------|----------| | `content-box` | 是 | 否 | 否 | 计算麻烦 | | `border-box` | 自动适配 | 是 | 是 | 推荐使用 | ####