border-box和content-box最直观的区别和解释

Chrome浏览器box-sizing默认是content-box，content-box就是元素的width和height决定了元素的宽高，这意味着元素的border和padding等不能算在元素的width和height中，padding和border的改变不能改变width和height的值。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href=""/><style type="text/css">.border-box{height: 100px;width: 300px;padding: 20px;background: skyblue;box-sizing: content-box;}</style></head><body><div class="border-box">这是content-box的高度</div><div class="border-box">这是content-box的高度</div><div class="border-box">这是content-box的高度</div></body>
</html>

控制台元素结构如下：

border-box就是用元素内容和padding和border一起决定width和height，啥意思，就是width和元素的内容以及padding和border相互制约。下面用几句话简洁解释一下。
•width和height改变，paddign和border不改变时，元素内容的宽高会发生相应的改变，改变的值就是width和height改变的值。
•paddign和border改变，width和height不改变时，元素内容的宽高会发生相应的改变，改变的值就是width和height改变的值。

•元素内容的宽高等于：元素的宽高 - （ border + padding ）

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href=""/><style type="text/css">.border-box{height: 100px;width: 300px;padding: 20px;background: skyblue;box-sizing: border-box;}</style></head><body><div class="border-box">这是border-box的高度</div><div class="border-box">这是border-box的高度</div><div class="border-box">这是border-box的高度</div></body>
</html>

控制台元素结构：

在实际工作的场景和目的

我更喜欢用border-box，因为border-box更灵活一点，举个例子，我在业务中遇到一个问题，我的商品详情页的一个盒子是高度自适应的，为146px，但是在ie8浏览器上显示为146.8px，如何解决，如果对盒子设置height:146px;则会出现被撑高的情况，因为box-sizing默认为content-box，你给元素设置宽高，只是给元素内容设置宽高，你元素的总高度是heigtht + border + padding所以就会出现撑高，解决方法就是给当前的盒子设置box-sizing: border-box这样你设置高度为146px时，会默然将元素内容的高度进行相应减少来保证整体高度为146px，这个最大的好处就是你这个盒子有好几个，而且有不同的padding和border值，解决这个的最好的方法就是给盒子设置border-box

原文地址：https://blog.csdn.net/andynikolas/article/details/79169798

border-box和content-box最直观的区别和解释相关推荐

border-box和content-box最直观的区别和解释【不理解包赔】
chrome浏览器默认是content-box,什么是content-box,我用最简单的语言解释给你听. content-box就是用元素的width和height觉得元素的高宽,这就意味着元素的p ...
【目标检测】概念理解：region proposal、bounding box、anchor box、ground truth、IoU、NMS、RoI Pooling
最近刚接触图像识别,理解一些概念十分困难,尤其是动不动就冒出个看不懂的英语,让人抓狂.查了不少资料后做一个总结并加上一些自己的理解,理解若有误,烦请大家指出,相互学习. 本文主要对region pro ...
软编码Flv 到Mp4 容器(五) fmp4 ftyp box 和moovmvhd box详解
https://github.com/332065255/flv2fmp4 代码库软编码Flv 到Mp4 容器(一) 软编码Flv 到Mp4 容器(二) flv tag拆解软编码Flv 到Mp4 ...
RUST笔记_特性Box和闭包Box
必须显示的初始化含有dyn triat的Box,这个代码是为结构AA装配XYZ特性,之后在某函数传入有XYZ特性的Box. struct AA {int1: i32,int2: i32, } impl ...
Bounding Box与anchor box
之前一直分不清Bounding Box与anchor box,直到问了一下 YOLO会将输入的图片分成S*S个网格,每个小网格会生成n个anchor Box.图像的真实框会和图像中心点所在的小网格生成 ...
立宏安全设备工程-AI Box 门锁开关-AI BOX 人脸识别安全门锁盒子
AI Box 门锁开关 AI BOX 人脸识别安全门锁盒子 •人脸/指纹授权人员方可开锁 •非授权人员无法打开门 •安全门锁达到Ple ,安全系统可达PLd •预警功能强大 •行为分析大数据 •外壳包 ...
python requests中content与text方法的区别
python requests中content与text方法的区别目录 python requests中content与text方法的区别目录 requests的作用 response的常用方法: ...
python中的content方法_对python requests的content和text方法的区别详解
问题: 一直在想requests的content和text属性的区别,从print 结果来看是没有任何区别的看下源码: @property def text(self): ""& ...
[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式...
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

border-box和content-box最直观的区别和解释

border-box和content-box最直观的区别和解释相关推荐

最新文章

热门文章