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

最新推荐文章于 2024-08-08 16:10:15 发布

uebest

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量809

点赞数 6

分类专栏： CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/uebest/article/details/136381165

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文解释了box-sizing:border-box的作用，即在定义元素宽度和高度时，border和padding被包含在内，保持尺寸稳定。介绍了content-box与border-box的区别，前者遵循W3C标准，后者让开发者更易控制布局。

摘要由CSDN通过智能技术生成

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

关注关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
box-sizing: border-box什么意思?

box-sizing: border-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：怪异盒模型，低版本IE浏览器中的盒模型现代浏览器和IE9+默认值是content-box。语法格式： box-sizing：content-box | border-box 区别： content-box：padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的widt

关于box-sizing的全面理解

12-13

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

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

box-sizing: border-box;的作用

qq_37453240的博客

01-31

4万+

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

css3的box-sizing:border-box；

weixin_43846020的博客

09-21

647

响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就是

box-sizing:border-box 解释

weixin_33692284的博客

10-05

456

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

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

m0_64711772的博客

03-26

3814

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

css中的 box-sizing: border-box

m0_51354601的博客

12-11

2973

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

CSS之box-sizing:border-box

qq_44388958的博客

03-11

1226

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

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

热门推荐

qq_26780317的博客

06-20

13万+

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

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计算入...

使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

12-13

有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。... box-sizing: content-box|border-box|inherit; 值描述 conte

css3 box-sizing属性使用参考指南

12-01

-webkit-box-sizing: border-box; } ``` 在这个例子中，`.box_sizing`的子元素`.in`应用了`border-box`，因此元素的宽度100%包含了边框和内边距，不会导致父元素`.box_sizing`的溢出。在不同的浏览器中，由于历史...

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

Amelian的博客

11-26

3472

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

css box-sizing:border-box

yuzheh521的博客

12-09

1924

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

box-sizing: border-box；box-sizing:content-box；讲解

jakelihua

11-20

2150

本文讲解box-sizing: border-box;两个语法的计算公式，与应用场景。

box-sizing：border-box

mmcrsx_blog的博客

05-16

1056

box-sizing:border-box

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

qq_43197791的博客

12-28

2482

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

ASP.NET Core Web API 使用Autofac框架

最新发布

鲤籽鲲的博客

08-08

492

ASP.NET Core Web API 使用Autofac框架

box-sizing: border-box

08-31

box-sizing: border-box是CSS中的一个属性，用于控制元素的框模型。当将box-sizing设置为border-box时，元素的宽度和高度将包括边框和内边距在内，不会再被外边距撑开。这意味着元素的实际尺寸将是设置的宽度和高度加上边框和内边距的总和。这样做可以更方便地控制元素的布局和排列。例如，在给定一个带有边框的框时，通过将box-sizing设置为border-box，可以确保框的宽度和高度包括了边框和内边距。这样，在使用float、padding和border时，框的尺寸会更加可控，避免了边框和内边距对框的尺寸产生影响。总结来说，box-sizing: border-box可以用于控制元素的框模型，使元素的宽度和高度包括边框和内边距。这样可以更方便地控制元素的布局和排列。123 #### 引用[.reference_title] - *1* [关于box-sizing的全面理解](https://download.csdn.net/download/weixin_38566318/13671319)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [css中神奇的盒模型-----（box-sizing：border-box）](https://blog.csdn.net/weixin_46872121/article/details/110149936)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [box-sizing:border-box的理解和作用](https://blog.csdn.net/qq_38110572/article/details/118218549)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]