其實一直沒仔細研究過CSS3新增的這個屬性box-sizing，只是經常會看到其它網頁和公司項目里面有用到這個屬性，然后就百度找到了一篇不錯的介紹
https://www.jianshu.com/p/e2eb0d8c9de6
要想清楚這個屬性的作用，首先要理解盒子模型
盒子模型是指：外邊距（margin）+ border（邊框） + 內邊距（padding）+ content（內容）
可以把每一個容器，比如div，都看做是一個盒子模型
比如你給一個div設置寬高為500px，但實際你設置的只是content，之后你又設置了padding:10px;border:1px solid red;
這時div的寬高就會變為544px（content 500px + padding 40px + border 4px）
相當於一個元素的實際寬高是由： padding + border + content 組成
①：沒有設置box-sizing:border-box屬性，寬高會加上padding和border的值，需要我們手動去計算，
減去padding和border的值，並調整content的值，以免超過給定的寬高
比如下圖，我給父元素parent設置寬高為500px，背景色為黑色；然后給子元素設置寬高為478px，並設置內邊距10px,紅色邊框1px，背景顏色為灰色
此時子元素的寬高為500px（content 478px + padding 40px + border 4px）所以就覆蓋了父元素的黑色背景，只能看到子元素的灰色背景
②：加了box-sizing:border-box屬性，padding和border的值就不會在影響元素的寬高，相當於把padding和border的值都算在content里
盒子模型會自動根據padding和border的值來調整content的值，就不需要手動調整
上面的示例①是標准盒子模型，一般瀏覽器也都默認為標准盒子模型。即：box-sizing:content-box
上面的示例②是怪異盒子模型，一般根據實際項目需要自行設置。即：box-sizing:border-box
測試代碼（上面可能說的不太清楚，下面的示例代碼實驗一下你就懂了）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> .parent { position: relative; margin: 0 auto; width: 500px; height: 500px; background-color: #000;
} .son { box-sizing: border-box; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding: 10px; width: 478px; height: 478px; border: 1px solid red; background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">
</div>
</div>
</body>
</html>