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樣式如下：