box-sizing,你的宽高度计算对了吗?

Posted apanly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了box-sizing,你的宽高度计算对了吗?相关的知识,希望对你有一定的参考价值。

我们都知道CSS盒模型分为IE盒模型W3C标准盒模型,它们的计算方式和一个CSS属性有关box-sizing

技术图片


box-sizing属性值

content-box | border-box 默认值:content-box

content-box

当我们对元素设置content-box

.demo1 {   box-sizing: content-box;   width: 200px;   height: 200px;   padding: 20px;   margin: 10px;   border: 5px solid #333; } 复制代码

在浏览器具体表现为


技术图片



border-box

当我们设置成border-box

.demo2 {   box-sizing: border-box;   width: 200px;   height: 200px;   padding: 20px;   margin: 10px;   border: 5px solid #ccc; } 复制代码

在浏览器具体表现为


技术图片


元素宽高计算

当我们去掉元素的宽高度时

技术图片


去掉元素的内外边距时


技术图片


当我们去掉元素paddingborder时可以看出元素的宽高度是在变化的,而去掉margin值时,元素的宽高没有变化。

所以我们的元素的宽高度值计算只和paddingborder,元素的content有关

width = padding + border + content height = padding + border + content 复制代码


总结

  • content-box在宽度和高度之外绘制元素的内边距和边框

  • border-box在宽度和高度之内绘制元素的内边距和边框

  • 元素的宽高和margin无关,与paddingborder,元素的content有关

  • box-sizing属性值为content-box时,元素的宽高等于:width + padding + border;

  • box-sizing属性值为border-box时,元素的宽高等于元素设置的widthheight


作者:Mondo
链接:https://juejin.im/post/5ce3c9e751882533411b1fdd




原文地址:box-sizing,你的宽高度计算对了吗?
标签:元素   宽高   高度   borderbox   

智能推荐

以上是关于box-sizing,你的宽高度计算对了吗?的主要内容,如果未能解决你的问题,请参考以下文章

5分钟搞定box-sizing

CSS盒子模型的理解及其计算方式汇总

box-sizing

你的sscanf用对了吗

有Bug?你的代码神兽选对了吗

box-sizing重置盒子模型计算规则