box-sizing:border-box 解释

最新推荐文章于 2025-04-14 18:05:48 发布
最新推荐文章于 2025-04-14 18:05:48 发布
阅读量3.9k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： css基础 文章标签： box-sizingborder-box 怪异盒模型 标准w3c盒模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wxl1555/article/details/52736418

   box-sizing:border-box    为ie的怪异盒模型引进的；

如果给标签加上box-sizing:border-box 属性，则会告知浏览器的解析器这个元素的盒模型类型为怪异盒模型；

即给元素设置的宽高不但包括content还会包含padding和border；


分割线----------------------------------------------------------------------------------------------------------------

w3c标准的盒模型得宽高 只是指的content  ，不包括padding和border的值；

深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1474
深入理解 `box-sizing: border-box;`：CSS 布局的利器
【高频考点精讲】CSS盒模型深入剖析：border-box到底如何影响你的布局计算？
全栈老李的博客
05-19 938
border-box就像CSS世界里的"防呆设计"，让我们的布局工作更加符合直觉。但全栈老李还是要提醒大家，理解底层原理比记住某个属性更重要。下次当你为布局头疼时，不妨先检查下box-sizing的设置，说不定问题就迎刃而解了。关于盒模型还有什么疑问，欢迎在评论区交流。下期我们会讲另一个布局神器——Flexbox，记得关注哦！
css中的 box-sizing: border-box
m0_51354601的博客
12-11 4249
box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。
css中神奇的盒模型-----（box-sizing：border-box）
Amelian的博客
11-26 3675
背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。 注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。 box-sizing属性用于更改
box-sizing: border-box
记录学编程后遇到的问题，注意点以及相关知识
04-27 366
box-sizing: border-box; 简单的说： 带有 box-sizing: border-box 样式的盒子：盒子的宽度和高度是加上内容、填充、边距之后的。当有填充或者边距时，相应内容的宽度或高度就会缩小，因为之和要达到 width、height。 没有 box-sizing: border-box 样式的盒子：width、height 只是规定内容的宽和高，如果有填充或者边框，盒子的大小就会变化（会加上填充和边框） 对比 ...
详解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 2185
此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景。，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。比如,给父元素parent设置宽高为500px，背景色为黑色；，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。
CSS之box-sizing:border-box
qq_44388958的博客
03-11 1345
box-sizing:border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 如果上述的内容还不是太明白，我们就来举个例子： · 比如插入一个DIV，这个DIV的宽度设置为200像素，高度也设置为200像素；那么这个DIV就是宽200px，高200...
box-sizing：border-box
mmcrsx_blog的博客
05-16 1157
box-sizing:border-box
从box-sizing:border-box属性入手，来了解盒模型
热门推荐
qq_26780317的博客
06-20 13万+
从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。 背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框...
box-sizing: border-box；box-sizing:content-box；讲解
jakelihua
11-20 2324
本文讲解box-sizing: border-box;两个语法的计算公式，与应用场景。
box-sizing:border-box;理解，盒模型
qq_43197791的博客
12-28 2583
*解决添加padding边距向外加问题 在給下面添加padding时，出现了下面宽度比头部宽出来一部分，其实是padding加到外部。解决方法很简单只需要添加box-sizing:border-box;意思就是改变了盒模型。 pc端只有双击的时候会看到 box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C，后者为IE盒子模型。 .business-title...
box-sizing: border-box；到底是干什么的？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
12-03 2487
是一个非常有用的 CSS 属性，通过设置它可以确保元素的宽度和高度包括内边距和边框，从而避免布局问题并实现精确的尺寸控制。
box-sizing:border-box的理解和作用
qq_51066068的博客
09-26 2万+
box-sizing:border-box的理解和作用。CSS中代码background:url(图片) no-repeat right center的意思
详细解读 box-sizing: border-box；
ThomasChan123的博客
04-14 824
详细解读 box-sizing: border-box;
box-sizing: border-box;
最新发布
06-13
### CSS `box-sizing: border-box` 使用方法及效果 #### 1. `box-sizing: border-box` 的定义与作用 `box-sizing` 是一个 CSS 属性，用于控制元素的盒模型计算方式。当设置为 `border-box` 时，元素的宽度和高度将包括内容区域、内边距（padding）和边框（border），而不仅仅是内容区域的宽度和高度[^4]。这意味着，即使添加了 `padding` 和 `border`，元素的总宽度和高度也不会超出指定的值。 #### 2. 使用方法 通过在 CSS 中声明 `box-sizing: border-box;`，可以改变元素的盒模型计算方式。以下是一个示例代码： ```css .element { box-sizing: border-box; width: 300px; height: 200px; padding: 20px; border: 1px solid #000; } ``` 在这个例子中，`.element` 的总宽度为 300px，总高度为 200px。即使添加了 `padding` 和 `border`，元素的实际宽度和高度仍然保持为 300px 和 200px[^4]。 #### 3. 效果与优势 使用 `box-sizing: border-box;` 可以让开发者更直观地控制元素的尺寸。例如，在设计固定宽度的布局时，不需要额外考虑 `padding` 和 `border` 对总宽度的影响[^1]。这使得布局更加灵活且易于维护。 #### 4. 全局应用 为了确保整个页面的一致性，可以通过全局样式表将所有元素的 `box-sizing` 设置为 `border-box`： ```css * { box-sizing: border-box; } ``` 这样可以避免因不同元素使用不同的盒模型而导致的布局问题[^3]。 #### 5. 示例对比 以下是一个对比示例，展示 `content-box` 和 `border-box` 的区别： ```css /* content-box */ .content-box { width: 300px; height: 200px; padding: 20px; border: 1px solid #000; box-sizing: content-box; } /* border-box */ .border-box { width: 300px; height: 200px; padding: 20px; border: 1px solid #000; box-sizing: border-box; } ``` - 在 `content-box` 模式下，`.content-box` 的实际宽度为 342px（300 + 2 * 20 + 2 * 1），高度为 242px。 - 在 `border-box` 模式下，`.border-box` 的实际宽度和高度分别为 300px 和 200px[^2]。 #### 6. 注意事项 虽然 `box-sizing: border-box;` 提供了更直观的尺寸控制方式，但在某些情况下可能需要特别注意： - 如果需要精确计算内容区域的大小，则需要减去 `padding` 和 `border` 的值。 - 在混合使用 `content-box` 和 `border-box` 时，可能会导致布局不一致的问题[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值