盒模型之content-box和border-box的区别
总结一下content-box和border-box的区别,因为今天碰到这个问题给搞蒙了,看了很多帖子说content-box不包含padding和border;自己写了个盒子测试了一下.box {width: 200px;height: 200px;padding: 10px;margin: 20px;border: 5px solid red;background-color: cadetbl
总结一下content-box和border-box的区别,因为今天碰到这个问题给搞蒙了,看了很多帖子说content-box不包含padding和border;自己写了个盒子测试了一下
.box {
width: 200px;
height: 200px;
padding: 10px;
margin: 20px;
border: 5px solid red;
background-color: cadetblue;
/* content-box
宽:200 高:200 padding:10 border:5px 合计大小230 */
/* box-sizing: content-box; */
box-sizing: border-box;
/* border-box
宽:170 高:170 padding:10 border:5px 合计大小200 */
}
border-box 的效果图200px
content-box 效果图230px
做了测试更蒙了,这content-box最后大小不就是230px,不是包含了padding和border吗?最后又看了一些相关的博客,终于明白了!我理解的包含是把宽高计算在总大小内,而真正的理解是:“windt”,“width”,“width”,是你自己写的width在计算总盒子大小的时候不把padding和border计算在内winth内,就是要另外在加上padding和border;理解上出现了偏差。
content-box计算公式:winth=width+padding+border
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:
content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型
border-box:怪异盒模型,低版本IE浏览器中的盒模型
语法格式
box-sizing:content-box | border-box
区别
content-box:padding和border不被包含在定义的width和height之内。
盒子的实际宽度=设置的width+padding+border
border-box:padding和border被包含在定义的width和height之内。
盒子的实际宽度=设置的width(padding和border不会影响实际宽度,有效果,但不计算大小)
总结
我们在理解的时候就要记住content-box是正常盒模型,border-box是怪异盒模型;
content-box正常的盒子模型:width+padding+border,盒子内所有属性相加得到最终盒子大小;
border-box怪异盒模型,就是你写个width:200px;后面无论padding和border你写多少,最终盒子宽度就200px,不会变大,不会加上padding和border的大小;也就是width包含了padding和border。
华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。
更多推荐
所有评论(0)