<h1>P 高度? 這東東也有高度喔?</h1>

: p 不是以 px 為單位的嗎?是要怎麼計算他的高度啊~
假設有是 24px ，不同字型那麼高度都是一樣的嗎? 不見得喔~
所以要依據行高 (line-height)、字型、瀏覽器的默認樣式來計算每行的高度
p是區塊元素，每有一行就是占據一行高度與寬度
如果文字佔據兩行，那就要算兩行的高度

如果沒有特別設定行高，則吃到瀏覽器默認行高
主流瀏覽器默認行高為 1.2 (Chrome、Firefox、Safari、Edge)

body{
  font-size: 24px;
  line-height: 1.8;
}

<p>p 不是以 px 為單位的嗎?是要怎麼計算他的高度啊~</p>

上面這一題的高度就是
文字是 p 標籤（區塊元素）那麼他就會佔領一行
但這題沒有行高（line height) 的單位，所以
24*1.8=43px

> <h3>盒模型?那又是啥?</h3>
> border-box: content-box / border-box

<h4>
：「 誒你前面要加這個啊 」
</h4>


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

<s>
「那ㄍ... 星星那些是什麼？」
</s>

*：選擇所有元素
*::before,*::after ~~前面後面都要~~ 偽元素也選取起來，避免元素使用了偽元素之後造成樣式不一致的問題

回歸！
**content-box 默認樣式**
box-sizing:content-box;
計算盒子尺寸（長寬）時要把邊框計算進去，包含內邊距和邊框; 但是外邊距還是別人的。

**border-box是什麼呢？**
border: 邊框
box: 盒子

box-sizing: border-box;
假設容器寬度是 300px，那不管邊框幾px、內邊距幾px 都會啃食那個 300px 整個容器寬度就是 300px 不變。

~~某方面也蠻像啃老（？~~