> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong/box-model.md).

# Box-sizing 介紹

## Content-box

`content-box`這是根據 CSS 標準的起始值和預設值。 [`width`](https://developer.mozilla.org/zh-TW/docs/Web/CSS/width)  與  [`height`](https://developer.mozilla.org/zh-TW/docs/Web/CSS/height) 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 `.box {width: 350px}; 而且 {border: 10px solid black;}` ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，;\
\
簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。

## Border-box

`width` 和 `height` 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的[盒模型](https://developer.mozilla.org/en-US/docs/CSS/Box_model)。注意，內邊距和邊框都將在盒子內 ，例如，`.box {width: 350px; border: 10px solid black;}` ，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px， 因為邊框（border）佔了20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。\
\
這裡的維度計算為：\
*width = border + padding + 內容的  width*，\
*height = border + padding + 內容的 height*。 

當你設定一個元素樣式為 `box-sizing: border-box;`，這個元素的內距和邊框將不會增加元素本身的寬度。

![](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MHerujbQqZDhckZDrE1%2F-MHes1lfNMA5Kh8XkOXk%2Fimage.png?alt=media\&token=85d4d50e-08ca-4b09-ba38-838fbcabd96a)

這樣可以確保所有元素的寬度都可以用比較直觀的方式來定義。

因為 `box-sizing` 算是個比較新的屬性，所以你還應該還是要加上我之前在例子中使用的 `-webkit-` 和 `-moz-` 前綴（Prefixes），這樣才能啟用特定瀏覽器實驗中的 CSS 特性。請記得該屬性從 [IE8+](http://caniuse.com/#search=box-sizing) 之後就開始支援。

#### 範例

{% tabs %}
{% tab title="Html" %}

```markup
	<div class="box-default">
		<div class="black">box-sizing 預設</div>
	</div>
	
	<div class="box-change">
		<div class="black">經修改後的 box-sizing</div>
	</div>
```

{% endtab %}

{% tab title="CSS" %}

```css
body {
	background-image: url(../images/unit.gif), url(../images/unit.gif);
	background-repeat: no-repeat;
	background-position-x: 4px;
	background-position-y: 235px, 527px;
}
.box-default,
.box-change{
	width: 500px;
	padding: 50px;
	margin-bottom: 70px;
	background-color: pink;
	border: solid 50px burlywood;
}
.black{
	background: red;
	color: #ffffff;
}
.box-default {
	
}
.box-change {
	box-sizing: border-box;
}
```

{% endtab %}
{% endtabs %}