box-sizing是用來調整區塊的內距與邊框計算方式

參數值 | 語法 | 說明
------------- | -------------
content-box | box-sizing:content-box; | 尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding），內距與邊框要額外加上去。
border-box | box-sizing:border-box; | 屬性包括內容（content），內邊距（padding）和邊框（border）。

box-sizing預設參數值為content-box
會因為padding、border而導致區塊的寬度改變，影響到整個網頁的呈現或跑版

從以下實際的例子來看會更清楚一些
這是兩組內容分別有三個box的區塊，一組(亮綠色)設定box-sizing:content-box;
另一組(桃紅色）設定box-sizing:border-box;

兩組原本預設width/height皆為100px的box
只有box-sizing設定不同的區塊，大小卻變得差異很多

content-box：
因為加上了padding:10px; 和border:2px
所以一個box的整體寬度變成了124px
計算方式：100px+10px(padding左)+10px(padding右)+2px(border左)+2px(border右)

border-box：
不為所動，一樣維持100px，和原本一開始設定的width/height還是一樣

結論就是使用border-box就不需要在考慮padding、border的尺寸會影響元素的寬高
方便我們在設定width、height上更直觀