box-sizing

CSS中的box-sizing屬性定義了user agent應該如何計算一個元素的總寬度和總高度。

box-sizing: content-box;
width: 100%;

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

在CSS 盒子模型的預設定義裡，你對一個元素所設定的width與height只會應用到這個元素的內容區。如果這個元素有任何的

box-sizing 屬性可以被用來調整這些表現:

• content-box 是預設值。如果你設定一個元素的寬為100px，那麼這個元素的內容區會有100px 寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。
• border-box告訴瀏覽器：你想要設定的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那麼這100px會包含它的border和padding，內容區的實際寬度是width減去(border+ padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。

注:border-box不包含margin(應該是margin不計入元素寬度和高度)

Note:對於新的web站點，你可能希望首先將box-sizing設定為border-box，如下所示：

* { box-sizing: border-box; }

這使得處理元素大小的工作變得容易得多，並且通常消除了在佈局內容時可能遇到的許多陷阱。然而，在某些情況下，你應謹慎使用這個屬性。例如： 你正在編寫一個將由其他人使用的共享元件庫，如果他們網站的其餘部分沒有設定此值，他們可能會發現很難使用你的元件庫。

語法

box-sizing屬性被指定為下面列表中的關鍵字。

屬性值

content-box

預設值，標準盒子模型。width與height只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距、邊框和外邊距都在這個盒子的外部。比如說，.box {width: 350px; border: 10px solid black;}在瀏覽器中的渲染的實際寬度將是 370px。

尺寸計算公式：

width= 內容的寬度

height= 內容的高度

寬度和高度的計算值都不包含內容的邊框（border）和內邊距（padding）。

border-box

width和height屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文件處於 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如,.box {width: 350px; border: 10px solid black;}導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，並且被分配到0，使得不可能使用border-box使元素消失。

尺寸計算公式：

width= border + padding + 內容的寬度

height= border + padding + 內容的高度

形式化語法

content-box | border-box

示例

本例顯示了不同的box-sizing值如何改變兩個原本相同的元素的渲染尺寸。

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Result