border-box宽度计算方式

最新推荐文章于 2025-10-15 02:51:29 发布
原创 最新推荐文章于 2025-10-15 02:51:29 发布 · 3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border-box

本文深入探讨CSS3中content-box和border-box两种盒模型的区别，详细解析了它们的宽度计算方式，以及在实际应用中的表现差异，对于理解网页布局原理至关重要。

css3 box-sizing定义了两种盒模型：

  1. content-box
  2. border-box

没有padding-box哦，别瞎猜。
二者区别就是容器的宽度计算方式不同：

content-box是块级默认属性，宽度计算方式为：

boxWidth=padding-left+padding-right+border-left+border-right+width;

border-box

这种盒模型的计算宽度的方式网上大部分方式都有问题。
他的真实所占宽度不是定义的width;真实宽度为左右padding和左右border之和，与width属性之间较大的值

boxWidth=Math.max(padding-left+padding-right+border-left+border-right,width);

例子：

chrome浏览器的computed

在这里插入图片描述
css样式如下：
在这里插入图片描述

【高频考点精讲】CSS盒模型终极指南：从content-box到border-box，彻底搞懂width和height的计算方式
全栈老李的博客
07-06 854
🧑‍🏫：全栈老李📅：2025 年 7 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们来聊聊CSS中最基础也最容易踩坑的概念——盒模型。我是全栈老李，一个喜欢把复杂问题讲简单的技术博主。盒模型这个概念，就像是你网购时收到的快递包裹，理解它就能明白浏览器是如何"打包"每个HTML元素的。
深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1645
深入理解 `box-sizing: border-box;`：CSS 布局的利器
CSS 关于box-sizing: border-box
weixin_46945119的博客
03-18 2013
概念 首先这个border-box的含义是盒子宽度就是原本的width+两边的padding+两边的border；在ie8及以上的浏览器中。如果设置width：100px；padding：5px；border：5px；那么盒子现在的宽度就是120px；如果加上border-box盒子的宽度又重新回到了100px；内容的宽度缩小为80px； 举例 border-box是指将边框border和内边距padding在现有元素的宽度和高度内设置举个例子 比如div的宽度和高度都是100pxpadding是10pxb
关于css中盒状模型的宽度(box-sizing属性)
qq_43674062的博客
04-12 1733
1.在正常情况下设置一个盒状模型的width时，不包括内外边距和边框，它的宽度就是它本身 html <div class="div1"></div> css .div1 { height: 200px; width: 200px; background: red; } 设置了内外边距和边框后 css .div1 { height: 200px; width: 200
HttpOnly 是怎么防止 XSS 攻击的？
最新发布
轻风细雨_林木木
10-15 328
XSS（跨站脚本攻击）是一种前端安全漏洞，攻击者通过注入恶意JavaScript代码窃取用户敏感信息。设置HttpOnly属性的Cookie可有效防护，该属性会禁止JavaScript访问Cookie值，防止XSS直接窃取凭证。但需配合HTTPS、SameSite等其他安全措施，构建多层防护体系，因为HttpOnly仅阻止脚本读取，不影响正常请求带Cookie功能。建议对敏感凭证设置HttpOnly、Secure等属性，并结合输入校验等措施全面防范XSS风险。
css-盒子模型border-box
qq_39111074的博客
08-25 2618
不写的情况下，盒子的box-sizing属性值默认是: content-box; box-sizing: content-box; - - - 计算盒子大小 = 盒子的width + 内边距padding + 盒子边框border 所以普通盒子设置一定的宽度width后，再增加padding或border会使盒子变大，但我们经常不需要盒子被撑大，希望改变padding或border后，盒子大小不变。 此时可以设置： box-sizing: border-box; - - - 盒子大小 = 盒子的width
box-sizing: border-box；box-sizing:content-box；讲解
jakelihua
11-20 2366
本文讲解box-sizing: border-box;两个语法的计算公式，与应用场景。
CSS盒子模型的宽度和高度如何理解
weixin_30553837的博客
02-26 920
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。 比如： css代码： div{ width:200px; padding:20...
详解CSS3中的box-sizing（content-box与border-box）
12-14
使用`border-box`可以避免在计算元素尺寸时出现意外的加法，使布局更加直观。然而，由于旧的盒模型在某些老版本的IE浏览器中是默认的，所以在处理跨浏览器兼容性问题时，需要注意这一点。 总的来说，理解`box-...
CSS：为什么看起来content-box更合理，但还是经常使用border-box？
TianXuab的博客
11-11 733
当我们在进行网页布局时，经常会遇到content-box和border-box这两种盒子模型。虽然content-box看起来更合理，但我们却经常使用border-box。本文将解释为什么会出现这种情况，并详细介绍如何将一个盒子模型变成border-box。
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box解析每行css代码
06-09
### 逐行解析 CSS 代码 `-webkit-box-sizing: border-box;...- 在 `#borderBox img` 中，使用了 `border-box` 模式，此时元素的宽度和高度包括内容、内边距和边框，实际渲染尺寸不会超出指定值[^3]。 --- ###
box-sizing 的计算方式
qq_45802159的博客
02-18 237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1,#d2{ width:200px; ...
css中的 box-sizing: border-box
m0_51354601的博客
12-11 4362
box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。
css3 盒子模型 box-sizing:border-box属性
kai480的博客
05-11 507
此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景。比如下图，我给父元素parent设置宽高为500px，背景色为黑色；，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。
css 盒子模型以及盒子相关尺寸基本的计算
qq_41304029的博客
01-27 1060
因为历史原因，我们往往将盒子模型分为盒子模型分为两类，分别是IE盒模型（怪异模型，IE8以下）以及w3c的标准盒模型（主流浏览器遵循的一种盒子模型），他们在width和height的作用方式上面有区别。IE 盒模型：设置的width/height其实就是content的宽度/高度+padding宽度+border的宽度。在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE低版本使用的是IE盒模型。2、对于普通流中的则包含块为直接父级的content-box。
盒子的尺寸
weixin_43339334的博客
06-02 1101
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用） 可选值： content-box 默认值，宽度和高度用来设置内容区的大小 border-box 宽度和高度用来设置整个盒子可见框的大小 wi
真正的盒模型-border-box
sky2714的博客
11-09 1016
长期以来,w3c的盒模型都是很恶心的,我们设置了一个盒子的width和height,如果我们要再去给其设置padding,border,那么它的真实大小是width/height+padding+border,如下:width: 200px; height: 200px; background: #888; text-align: center; border: 10px #5cb85c solid
box-sizing: border-box；盒子包含内外边距及边框
qq_16714671的博客
01-10 1242
正常盒子模型高宽都包含了内外边距及边框的值。 盒子最终的大小的高包括：边框、外边距、内边距、高度。高度与内外边距及边框分表计算 盒子最终的大小的宽包括：边框、外边距、内边距、高度。宽度与内外边距及边框分表计算 设置box-sizing: border-box;后，盒子最终的大小的宽高height的大小，盒子最终的大小的宽 width的大小。 原始盒子模型： 加入box-sizing: border-box;属性后 ...
盒子模型的计算方法 box-sizing
qq_39579242的博客
08-23 2605
div {    box-sizing:  content-box;   /*默认值*/    box-sizing:  border-box;    /*推荐使用*/ } content-box: 一个盒子的总宽度=margin+border+padding+width border-box: 一个盒子的总宽度=margin+width  ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值