---
# System prepended metadata

title: box-sizing CSS3 自動計算盒模型
tags: [css]

---

---
tags: css
---

# box-sizing CSS3 自動計算盒模型

* 通常我們會算區塊元素 容器中的 長寬加總起來，來算他佔了容器中多少的範圍 box-sizing 將會自動替你算好裡面的範圍並將他自適應。

> 以下我們看原始的範例

```css=
/* 以下加總起來範圍 為 140px 乘 140px */
.box{
width: 100px;
height: 100px;
background: blue;
border: 10px solid #000;
padding: 10px;
margin-bottom: 10px;
}
```

> box-sizing 只 需要計算好需要的總寬高即可

```css=
/* 把總共需要的140px 先寫上 */
.box1{
width: 140px;
height: 140px;
background:#456;
border: 10px solid #000;
padding: 10px;
box-sizing: border-box;
}
```
> 得到的結果將是一樣

![](https://i.imgur.com/ZJoYkSs.png)
