The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
box-sizing 是 CSS 屬性的一種，它使我們可以 改變盒模型的計算方式。
而 box-sizing 可以使用的值有以下：
- box-sizing: content-box;
( width、height 設定作用在 content-box ) - box-sizing: border-box;
( width、height 設定作用在 content-box + padding-box + border-box ）
Box-model 盒模型
預設情況下，元素的寬度和高度計算如下：
元素的實際寬度 = width + padding + border
元素的實際高度 = height + padding + border
拆解來看，一個元素的盒模型會由以下所構成，由內而外分別是：
- 藍色 content-box
- 綠色 padding-box
- 橘黃 border-box
- 橘色 margin-box
通常預設為：box-sizing：content-box
一般來說盒模型的計算方式會 預設為 box-sizing: content-box;，當我們為一個元素設定 width、height 時，寬高的設定作用僅在 content-box 範圍。
以下列程式碼為例：
width 500px 的作用範圍僅在 content-box 區塊。
*{
box-sizing: content-box;
}
.box{
width: 500px;
height: 500px;
background: #95B5BF;
padding: 60px;
border: 30px solid #F8DDA4;
margin: 30px;
font-size: 20px;
}
而元素實際大小因為有 padding 和 border 而被撐出寬高，變成 680px，若加上 margin，則元素在畫面中所佔面積為 740px，如下圖：
box-sizing：content-box 的計算方式
藍色的 content-box 是指 width 的寬度， width 作用範圍僅在 content-box。
因此，若我們對一個元素設定 width: 500px;，如在裡面放入文字，當文字數量累積超過寬度 500px 時就會換行繼續新增，計算方式參照下圖：
box-sizing：border-box 的計算方式
border-box 的 width 作用範圍為 content-box、padding-box、border-box。
可以發現在 box-sizing：border-box 下， content-box 變為 320px*320px，padding 和 border 的寬度也被內推算進 500px 裡面了。
其中需要注意，box-sizing：border-box 下的內堆變化，並不是縮減 padding 和 border 來使其符合寬度 width 500px，而是 content-box 裡的寬度被推擠而變為 320px*320px，而裡面的文字寬度也保持為 20px。
若加上 margin，則元素在畫面中所佔面積為 560px*560px。
在畫面上的差異
可以看到在 box-sizing：border-box 下，一行文字的數量變少了，而產生這樣的變化是因為盒模型的計算方式被改變使得被內推，此時 content-box 的文字內容寬度為：一個字 20px* 一行 16個字＝ 20px*16 = 320px
問題紀錄：誤區測試與釐清
- box-sizing：border-box 下，如果 padding、border 的數值大於 width 時會發生什麼？
- 什麼樣的情況下，會使在 box-sizing：border-box 下仍然破版、跑版？
- box-sizing：border-box 下，如何伸縮自如的掌握自己設計的每個元件尺寸
本篇參考學習資源
小結
box-sizing 的觀念看似沒有很複雜，但是暗藏很多玄機，常常在實作中覺得畫面不如預期，希望透過本次習作筆記，加深瞭解其運作原理。
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
