border-box宽度计算方式

css3 box-sizing定义了两种盒模型：

1. content-box
2. 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样式如下：