box-sizing中border-box和content-box的区别

最新推荐文章于 2023-12-11 14:45:41 发布
最新推荐文章于 2023-12-11 14:45:41 发布
阅读量470 收藏 1
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41633396/article/details/117221713
版权

box-sizing

border-box：此时width和height的大小代表元素的padding、border、content(也就是盒子的可见框的大小),这意味着，当你给一个元素设置好width、height、以及border-box之后，再去设置border不会影响盒子的可见框大小

content-box:此时width和height的大小代表元素的content的大小,这意味着，当你给一个元素设置好width、height、以及content-box之后，再去设置border会影响盒子的可见框大小

上面这点在小米商城的这个地方用到比较明显

在这里插入图片描述

one or two
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
box-sizing属性的content-box值和border-box值的区别
qq_44329870的博客
11-06 612
box-sizing属性 content-box：容器的实际宽度和高度等于设置的width值或height值和border、padding之和。 border-box：容器的实际宽度和高度等于设置的width值或height值，定义的border和padding不会改变对象的实际宽高，而是被包含在width和height之内。 举例代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-
box-sizing属性值content-box和border-box的区别
gao_zhennan的博客
04-21 704
一、两者区别 在介绍两者的具体区别之前，先来熟悉一下盒子模型，如下图所示，Padding位于Content和Border之间。 区别如下： box-sizing: content-box; 表示content大小不变，以content为基准向外“添加”padding，撑大了border; box-sizing: border-box; 表示border大小不变，以border为基准向内“添加”padding，挤压了content; ...
box-sizing： content-box 与 border-box 的差别
sayyy的专栏
03-15 444
【代码】box-sizing： content-box 与 border-box 的差别。
CSS box-sizing---“content-box“与“border-box“的区别
sundaliycoding的博客
03-11 226
box-sizing默认值:content-box （border-box），box-sizing的值主要影响盒子的高宽 content-box: margin:不影响盒子 padding:使盒子变大 border:使盒子变大 border-box: margin:不影响盒子 padding:不影响盒子 border:不影响盒子 ...
box-sizing中content-box和border-box的区别
Lz_King的博客
08-08 1339
盒模型box-sizing尺寸基准有两种：content-box 和 border-box; 默认的是 content-box content-box与border-box区别是两者的盒子的宽度是否包含边框和内边距； 下面用两个图来说明： 下图为box-sizing:content-box 下图为box-sizing:border-box
box-sizing中content-box和border-box
玲曦的博客
06-21 879
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )。此属性表现为标准模式下的盒模型。 border-box：padding和border被包含在定义的width和height之内。对象的实...
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与content-box区别
mfkarj的博客
05-28 1316
理解box-sizing属性border-box，content-box，其实也是理解正常盒模型与异常盒模型。 正常盒模型 正常盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。 参见CSS盒模型 正常盒模型是指：盒模型的大小包括content，padding，border，并且先做content.。 正常盒模型的大小会以内容优先自动扩展，内部子元素超过父元素给定的大小，会将父..
边框盒子 box-sizing 的 content-box 和 border-box属性
qq_45288176的博客
06-15 3730
对于默认的盒子模型 : 当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。图示：.........
浅谈CSS3中的box-sizing（content-box与border-box）
怎奈你何的博客
11-23 615
box-sizing
box-sizing：border-box
mmcrsx_blog的博客
05-16 1054
box-sizing:border-box
box-sizing: border-box
ahua2800的博客
01-18 213
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中 转载于:https://www.cnblogs.com/shiyunfront/p/8311815.html
css box-sizing:border-box
yuzheh521的博客
12-09 1916
此时子元素的宽高为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 1224
box-sizing:border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 如果上述的内容还不是太明白，我们就来举个例子： · 比如插入一个DIV，这个DIV的宽度设置为200像素，高度也设置为200像素；那么这个DIV就是宽200px，高200...
CSS中box-sizing: border-box
qq_42009005的博客
04-21 462
CSS中box-sizing: border-box 首先我们先来看一下默认的盒子模型 <div id="">我好累啊</div> div { width: 200px; height: 200px; background-color: #005AA0; border: 10px solid red; padding: 20px; margin: 20px; box-sizing: content-box;//默认的样式,可以
css中的 box-sizing: border-box
m0_51354601的博客
12-11 2957
box-sizing: border-box 是 CSS 中的一个盒子模型属性，用于指定元素的盒子模型的计算方式。默认的盒子模型是 content-box，而使用 border-box 则表示元素的宽度和高度包括了元素的边框和内边距，而不仅仅是内容的宽度和高度。例如，如果你设置一个元素的宽度为 100px，那么无论你添加了多少边框和内边距，这个元素的总宽度都会保持为 100px。在默认的 content-box 盒子模型中，宽度和高度仅包括内容区域，而边框和内边距会额外增加到元素的宽度和高度之外。
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
最新发布
04-09
-webkit-box-sizing、-moz-box-sizing和box-sizing是CSS属性，用于分别在不同浏览器中设置盒模型。-webkit-box-sizing用于Webkit内核的浏览器（如Chrome、Safari），-moz-box-sizing用于Gecko内核的浏览器（如Fire...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值