【CSS】box-sizing属性border-box与content-box区别

最新推荐文章于 2024-03-20 07:49:07 发布
最新推荐文章于 2024-03-20 07:49:07 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 前端
原文链接：https://www.cnblogs.com/ndos/p/8367090.html
版权

理解box-sizing属性border-box，content-box，其实也是理解正常盒模型与异常盒模型。

正常盒模型

正常盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。

参见  CSS盒模型

正常盒模型是指：盒模型的大小包括content，padding，border，并且先做content.。

正常盒模型的大小会以内容优先自动扩展，内部子元素超过父元素给定的大小，会将父元素撑大。

 

怪异盒模型

怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。

怪异盒模型是先做盒。然后添加border，padding，最后做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下，一般手机上用的更多。

更通俗的说，怪异盒模型中，父元素的盒模型确定，子元素是无法撑开父元素的盒模型，只能在盒模型剩余空间展示。

 

怎么样才算是选择了“标准 w3c 盒子模型”呢？

很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，

即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子。所以网页在不同的浏览器中就显示的不一样了。

反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了

mfkarj
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
box-sizing属性的content-box值和border-box值的区别
qq_44329870的博客
11-06 610
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-
CSS box-sizing---“content-box“与“border-box“的区别
sundaliycoding的博客
03-11 225
box-sizing默认值:content-box （border-box），box-sizing的值主要影响盒子的高宽 content-box: margin:不影响盒子 padding:使盒子变大 border:使盒子变大 border-box: margin:不影响盒子 padding:不影响盒子 border:不影响盒子 ...
box-sizing: border-box；box-sizing:content-box；讲解
jakelihua
11-20 2127
本文讲解box-sizing: border-box;两个语法的计算公式，与应用场景。
box-sizing属性值content-box和border-box的区别
h_未来可期_的博客
07-15 267
1、二者区别 1.1 官方文档给出的区别 1.2 代码示例 <style> .test1{ width: 100px; height: 100px; border: 2px solid black; padding: 5px; box-sizing: border-box; } .test2{ width: 100px; height: 100px; border: 2px solid black; paddi
box-sizing中border-box和content-box的区别
qq_41633396的博客
05-24 467
box-sizing border-box：此时width和height的大小代表元素的padding、border、content(也就是盒子的可见框的大小),这意味着，当你给一个元素设置好width、height、以及border-box之后，再去设置border不会影响盒子的可见框大小 content-box:此时width和height的大小代表元素的content的大小,这意味着，当你给一个元素设置好width、height、以及content-box之后，再去设置border会影响盒子的可见框大
box-sizing: border-box;和box-sizing:content-box 的作用
weixin_43932098的博客
06-13 800
.border-box : 指的是width=padding+border+content,就是说 加入你设置一个div的宽度为100px,这100px中包括padding border 和content内容区 content-box :指的是只有内容区域是width， ...
边框盒子 box-sizing 的 content-box 和 border-box属性
qq_45288176的博客
06-15 3726
对于默认的盒子模型 : 当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。图示：.........
css3 box-sizing： content-box 和 border-box 区别
weixin_45422449的博客
03-30 308
css3 box-sizing：的 content-box 和 border-box 区别 应用 content-box 简单的讲：box-sizing:content-box 属性下的内容，假设 设置固定的宽高 100px 时候，这是内容还有border：5px padding：10px 这是这个内容就占据了 100px+10px+5px 的空间内容 border-box 反之 使用 box-...
content-box和border-box的区别
qq_32862143的博客
02-27 1万+
盒子模型 盒子宽度：padding+border+content-width 盒子高度：padding+border+content-height 如图所示 盒子模型 content-box 说明：在内容宽度和高度之外绘制内边距和边框 border-box 说明：在已设定的宽度和高度之内绘制设定元素的边框及内边距 CSS .content-box{ width: ...
box-sizing中content-box和border-box的区别
Lz_King的博客
08-08 1338
盒模型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 的差别
sayyy的专栏
03-15 432
【代码】box-sizing： content-box 与 border-box 的差别。
两种盒模型（box-sizing）的区别？
shortlived的博客
08-19 213
相同点是都是用来指定宽度的，不同点是 border-box 更好用。
content-box和border-box区别
m0_59070120的博客
12-27 924
默认情况下是content-box 如果要设置border-box 使用box-sizing：border-box content-box的宽度和高度为自身的height和width，与他的border和padding无关 border-box的宽度和高度则为自身的height或者width加上互相的border和padding，比如这个盒子宽度为300px，设置padding为50px，border为10px那么该盒子的宽度则还是300px，该情况下，content-box的宽度则为360px了 .
content-box和border-box区别以及应用场景
lykia123的博客
06-10 3530
content-box和border-box区别以及应用场景【保证一看就彻底懂了】 首先这两个是什么？ 他们是css box-sizing的两个值，是两种不同的盒模型，用content-box，元素的宽高就等于width和height的值，他的宽高不受padding,border的影响，而用border-box，元素的宽高是受padding,border影响的，元素实际宽度是等于width-padding左右-border左右，也就是当width不变，padding/border发生变化时，内容的宽高是会相
css3 盒子模型 box-sizing:border-box属性
kai480的博客
05-11 347
此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景。比如下图，我给父元素parent设置宽高为500px，背景色为黑色；，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。
Css提高——Css3盒子模型border-box
最新发布
迪幻的博客
03-20 631
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们 计算盒子大小的方式就发生了改变。可以看到原定大小300*300的盒子被border、margin、padding撑大了；border、margin、padding撑大了；可以看到原定大小300*300的盒子被。
box-sizing:border-box属性的作用
wyl164778的博客
09-16 1285
简单暴力，亲测有效！！！ 一、盒子模型 盒子模型：外边距（margin）+边框（border）+内边距（padding）+content（内容） 举例：将一个div的宽高设置为500px，实际上只是设置div的内容（content），此时再设置div的padding：10px，border：1px solid red;这时div的宽高就会变成544px。 二、标准盒子模型和怪异盒子模型 标准盒子模型：border-sizing：content-box。元素宽高等于content值+padding和borde
box-sizing:border-box的理解和作用
热门推荐
Ghjkku的博客
06-02 13万+
要想清楚这个属性的作用，首先要理解盒子模型盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）可以把每一个容器，比如div，都看做是一个盒子模型比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red;这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）相当于一个元素的实际宽高是由
从box-sizing:border-box属性入手，来了解盒模型
TwcatL_tree
01-20 5743
    从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。     背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值