2023-06-28|閱讀時間 ‧ 約 6 分鐘

CSS 習作｜Box Sizing 盒模型計算方式

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 拆解來看，一個元素的盒模型會由以下所構成，由內而外分別是：

Box-model

藍色 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，如下圖：

width 的作用範圍

box-sizing：content-box 的計算方式

藍色的 content-box 是指 width 的寬度， width 作用範圍僅在 content-box。因此，若我們對一個元素設定 width: 500px;，如在裡面放入文字，當文字數量累積超過寬度 500px 時就會換行繼續新增，計算方式參照下圖：

box-sizing: content-box

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