CSS 習作｜Box Sizing 盒模型計算方式
閱讀時間約 5 分鐘
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 可以使用的值有以下：
- 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
拆解來看，一個元素的盒模型會由以下所構成，由內而外分別是：
元素的實際高度 = 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 區塊。
以下列程式碼為例：
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 時就會換行繼續新增，計算方式參照下圖：
因此，若我們對一個元素設定 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 變為 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，我們下篇見 🙇🏻
留言0
查看全部
你可能也想看
Css Position功能誤解與Box Model應用 製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版
2023-06-08
學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
2023-05-16
CSS紀錄 ▎那些年糾纏我的sticky? 失效情形&解法紀錄相信大家對於 sticky 這個效果不陌生，網頁上方的導覽列、文章側邊的相關閱讀等，諸多網頁都能看見它的身影，不過這篇不是 sticky 的使用教學，而是我自己的踩雷紀錄😅💣
2022-09-29
CSS筆記 ▎還分不清楚 transform 和 transition 嗎?自學程式的過程中，你總是把transform、transition，甚至是translate搞混嗎！為了分辨「轉變」的三個關係字，並理解到底什麼時候要用哪個屬性才正確，這篇筆記誕生了！
2022-06-14
[CSS筆記] transition、transform、animation 動畫屬性這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
2022-01-09
【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！ 對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
2021-09-28
【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯
2021-06-10
CSS選擇器的優先權順序CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：
頁面內的樣式(崁入樣式)
例子：
外部載入(串連)
例子：
B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：
2020-05-06