前置
在 CSS 盒子模型的默認定義里，你對一個元素所設置的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding ，繪制到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。這意味着當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式布局時，這個特點尤其煩人。
定義
CSS 中的 box-sizing 屬性定義了 user agent 應該如何計算一個元素的總寬度和總高度。
值
1.content-box 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px 寬，並且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。
2.border-box 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那么這100px會包含它的border和padding，內容區的實際寬度是width減去(border + padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。
💡: border-box不包含margin
進一步理解
content-box
1.默認值，標准盒子模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。
2.注意: 內邊距、邊框和外邊距都在這個盒子的外部。
3.比如說，.box {width: 350px; border: 10px solid black;} 在瀏覽器中的渲染的實際寬度將是 370px。
4.尺寸計算公式：width = 內容的寬度``height = 內容的高度
5.寬度和高度的計算值都不包含內容的邊框（border）和內邊距（padding）。
border-box
1.width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距。
2.這是當文檔處於 Quirks模式 時Internet Explorer使用的盒模型。
3.注意，填充和邊框將在盒子內 , 例如, .box {width: 350px; border: 10px solid black;} 導致在瀏覽器中呈現的寬度為350px的盒子。
4.內容框不能為負，並且被分配到0，使得不可能使用border-box使元素消失。
5.尺寸計算公式：width = border + padding + 內容的寬度``height = border + padding + 內容的高度
示例
CODE
.border-box {
box-sizing: border-box;
height: 150px;
width: 200px;
padding: 20px;
border: 10px solid #000;
}
<div class="border-box">
當你老了，頭白了，睡意昏沉
爐火旁打盹，請取下這部詩歌
</div>
效果
完~ 🍻