---
tags: css
---

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

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

> 以下我們看原始的範例

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

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

/* 把總共需要的140px 先寫上 */
.box1{
width: 140px;
height: 140px;
background:#456;
border: 10px solid #000;
padding: 10px;
box-sizing: border-box;
}

> 得到的結果將是一樣