# 認識CSS#1 box-sizing
###### tags: `CSS`
## <font color= #E71129 > box-sizing用處 </font>
**box-sizing** 的作用是控制 **width** 與 **height** 作用的對象空間，簡單來說就是設定物件尺寸的計算方式
**box-sizing** 有兩個值可以使用

**1. content-box
2. border-box**

如果沒有設定的話，預設就是 **content-box**

## <font color= #E71129 > 一個物件的範圍有多大 </font>
一個物件的範圍，其實就是四個層層包裹的矩形所構成，由內而外分別是「content-box(藍色)、padding-box(綠色)、border-box(橙黃)、margin-box(橙色)」

## <font color= #E71129 > content-box </font>
物件的範圍是由內容和 padding 、 border 來決定， **內容 + <font color="red"> padding </font> + <font color="red"> margin </font>**

HTML

<div class="box">
        <div class="wrap">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus maiores eaque iusto ea rerum inventore ut harum                   ipsafuga totam.
            </p>
        </div>
    </div>

CSS

.box {
  width: 400px;
  height: 400px;
  background-color: #0E6946;
  padding: 20px;
  margin: 20px;
  border: 5px solid #E71129;
}

.box p {
  color: white;
  font-size: 20px;
}

### <font color=#960A1A>content-box計算方式(除了border，把所有加起來!)</font>
照上面得程式碼來計算該物件的內容大小為 WIDTH=? HEIGHT=?

width = width + padding(左右) + border(左右) = 400 + 20 * 2 + 5 * 2 = 430px

height = height + padding(上下) + border(上下) = 400 + 20 * 2 + 5 * 2 = 430px

## <font color= #E71129 > border-box </font>
依照一開始的設定的 width 和 height 來分配空間(包含 padding 及 border)!

### <font color=#960A1A>border-box計算方式(完全不用計算!!!!!!!! (っ´ω`c) )</font>

設定的元素大小 + padding + border 都由最初設定的 width 大小來內推分配

所以不像 content-box 需要計算哦~~~

## <font color= #E71129 > 參考資料 </font>

[Box-sizing - 金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10252827)