CSS3 box-sizing 属性

最新推荐文章于 2025-01-15 23:03:13 发布
最新推荐文章于 2025-01-15 23:03:13 发布
阅读量316 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 自己总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qietingfengdeyanse/article/details/51098267
本文详细介绍了CSS3中的box-sizing属性，包括其两个主要取值content-box和border-box的区别，以及这两种模式下元素实际宽度的计算方式。这对于理解CSS盒模型至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做项目的时候遇到这个问题
后来才知道是

CSS3 box-sizing 属性

box-sizing：content-box | border-box

默认值：content-box

适用于：所有接受width和height的元素

继承性：无


content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。
深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1478
深入理解 `box-sizing: border-box;`：CSS 布局的利器
深入理解CSS3 box-sizing属性：重塑盒子模型，精准控制元素尺寸
艾恩小灰灰的博客
04-19 3514
CSS3的box-sizing属性为开发者提供了重塑盒子模型的灵活性，使得在面对复杂布局和精确尺寸控制的需求时，能够更得心应手。理解并熟练运用border-box模式，不仅可以避免常见的布局问题，还能简化CSS计算，提升开发效率。希望本文的解析与示例能帮助您深入理解并有效利用box-sizing属性，为您的项目带来更加整洁、可控的布局体验。
盒模型宽高定义box-sizing
demographic2017的博客
02-28 240
以前盒模型默认的宽高是指内容的宽高。css3后可以用box-sizing来指定宽高。 box-sizing：content-box | border-box 默认值：content-box content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Elemen...
box-sizing的属性理解
cywxjcy的博客
06-22 217
box-sizing box-sizing 有三个属性，用于告诉浏览器如何计算高度和宽度，下面一 一介绍： boder-box box-sizing:border-box; width = 元素内容宽度 + boder边框宽度 + pading留白宽度 heigth = 元素内容高度 + border边框高度 + padding留白高度 <div class="content-box">Content box</div><br> <div class="borde
理解box-sizing属性
weixin_34289744的博客
02-13 640
box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性： box-sizing: content-box|border-box|inherit: 复制代码content-box 使得元素的宽高即为内容区的宽高 &lt;style&gt; * { padding:0; margin:0 ...
关于box-sizing的理解
awxmbfe0493的博客
07-11 131
---恢复内容开始--- box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inher...
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属性使用参考指南
12-01
CSS3的`box-sizing`属性是一个非常重要的样式规则，它允许开发者改变元素的盒模型，从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础，理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...
CSS3 box-sizing属性
12-11
说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 ...这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，
box-sizing的理解
u011402106的博客
05-16 740
box-sizing 属性可以被用来调整这些表现： content-box(默认值).如果你设置一个元素的宽度为100px,那么这个元素的内容会有100px宽，并且任何边框和内边框的宽度都会被增加到最后会指出来的元素宽度中。 width=content-width+padding-width+border_width 列： 元素的宽度 CSS <style> *{ padding: 0; margin: 0; } .content-div{ width:
box-sizing理解
weixin_44164982的博客
07-07 863
box-sizing的三个属性 content-box 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE
关于css box-sizing的理解
qq_26402341的博客
09-09 384
在父元素设置了宽度后，如果两个子元素设置浮动（float:left/right），占满父元素整个宽度（width:50%;），如果子元素加边框或是内边距(padding),会造成布局混乱，这时box-sizing的作用就体现出来了 box-sizing 属性默认是 content-box,意思是 子元素如果加边框和内边距，是在子元素的宽度和高度之外绘制，所以造成实际宽度大于父元素了，所以布局会乱
css box-sizing:border-box
yuzheh521的博客
12-09 2186
此时子元素的宽高为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...
css中的 box-sizing: border-box
m0_51354601的博客
12-11 4250
box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。
css3的box-sizing:border-box；
weixin_43846020的博客
09-21 739
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。 假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就是
CSS 样式 box-sizing: border-box； 详细解读
最新发布
ThomasChan123的博客
01-15 817
CSS 样式 box-sizing: border-box; 详细解读
css中神奇的盒模型-----（box-sizing：border-box）
Amelian的博客
11-26 3682
背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。 注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。 box-sizing属性用于更改
box-sizing: border-box；
2301_79265530的博客
09-25 454
告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值