前幾天一直在跟 Flexbox 奮鬥，今天決定先換個東西。

結果一看 CSS，又遇到另一個很常讓人懷疑人生的問題：

我明明寫 width: 200px，為什麼最後看起來根本不只 200px？？？

蛤？
你是不是偷偷變胖了 ==

先來一個普通的方塊 HTML :

<div class="box">
  我是方塊
</div>

CSS :

.box {
  width: 200px;
  height: 100px;
  border: 5px solid black;
  padding: 20px;
}

乍看之下：

width 都寫 200px 了，這個方塊應該就是 200px 吧？

答案是——沒有喔!

CSS：驚不驚喜？意不意外？

原來 width 只算「內容」

CSS 預設使用的是：

box-sizing: content-box;

這時候 CSS：

width: 200px;

指的是中間「內容」的寬度。
但是我們剛剛還另外加了 CSS：

padding: 20px;
border: 5px solid black;

所以真正的寬度其實是：

200
+ 左右 padding 40
+ 左右 border 10
= 250px

。。。。。。
200px 到底是怎麼吃成 250px 的？？
原來不是它偷吃。
是我自己一直餵它 XD

Box Model 到底有哪幾層？
一個元素其實可以先簡單想成四層：

Margin
  Border
    Padding
      Content

• Content
  真正放文字、圖片或其他內容的地方。

• Padding
  內容跟邊框之間的距離。

可以理解成：
不要貼那麼近，留點呼吸空間。

• Border
  元素的邊框。

border: 2px solid black;

• Margin
  元素跟外面其他東西之間的距離。

簡單來說：
Padding 是裡面留空間，Margin 是外面留空間。

這兩個以前真的很容易打到一半突然：
「等一下，我現在要的是 margin 還是 padding？」

那可以不要偷偷變胖嗎？
可以!

這時候就輪到 CSS：

box-sizing: border-box;

如果改成 CSS：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;

  box-sizing: border-box;
}

這次 width: 200px 裡面就會直接包含：

• Content
• Padding
• Border

也就是說：
你說 200px，就真的給你 200px。

終於~~~~~~~

有一個說話算話的了!

難怪常常會看到這段
很多 CSS 一開始都會直接寫：

* {
  box-sizing: border-box;
}

或是

*,
*::before,
*::after {
  box-sizing: border-box;
}

以前看到大概就是：
大家都寫，那我也寫。

這次重新看才知道，原來它是為了讓元素尺寸比較好控制。
不然明明設定 200px，最後又 padding、又 border，
一個不注意就直接膨脹。

簡單來說：

content-box：200px 還可以繼續長。
border-box：說 200px 就 200px，不能再胖。

今天終於抓到方塊偷偷變胖的原因了。
不是 CSS 在搞我。

是我以前根本沒算它到底吃了多少 padding 跟 border XD

Day 6，完成！ 明天就是第一週最後一天。
來看看這幾天到底留下多少東西，還是只留下滿滿的問號 XD