要想清楚這個屬性的作用，首先要理解盒子模型

　盒子模型是指：外邊距（margin）+ border（邊框） + 內邊距（padding）+ content（內容）

　可以把每一個容器，比如div，都看做是一個盒子模型

①：沒有設定box-sizing:border-box屬性，寬高會加上padding和border的值，需要我們手動去計算，

　　　　減去padding和border的值，並調整content的值，以免超過給定的寬高

　　　　比如下圖，我給父元素parent設定寬高為500px，背景色為黑色；然後給子元素設定寬高為478px，並設定內邊距10px,紅色邊框1px，背景顏色為灰色

　　　　此時子元素的寬高為500px（content 478px + padding 20px + border 2px）

　②：加了box-sizing:border-box屬性，padding和border的值就不會在影響元素的寬高，相當於把padding和border的值都算在content裡

　　　　盒子模型會自動根據padding和border的值來調整content的值，就不需要手動調整

上面的示例①是標準盒子模型，一般瀏覽器也都預設為標準盒子模型。即：box-sizing:content-box

　　上面的示例②是怪異盒子模型，一般根據實際專案需要自行設定。即：box-sizing:border-box