css3 box-sizing定义了两种盒模型:
content-box
border-box
没有padding-box哦,别瞎猜。
二者区别就是容器的宽度计算方式不同:
content-box是块级默认属性,宽度计算方式为:
boxWidth=padding-left+padding-right+border-left+border-right+width;
border-box这种盒模型的计算宽度的方式网上大部分方式都有问题。
他的真实所占宽度不是定义的width;真实宽度为左右padding和左右border之和,与width属性之间较大的值boxWidth=Math.max(padding-left+padding-right+border-left+border-right,width);
例子:
chrome浏览器的computed
css样式如下:
原文链接:https://blog.csdn.net/Next__One/article/details/85873229