※ 盒模型介紹：
什麼是盒模型？
說明：在CSS定義底下的模型結構，此結構有助於建構網頁介面。
盒模型的四大內容：
- margin：指的是元素外部的空間。用途是常被用來做元件跟元件之間上下和左右的推擠，也就是調整與其他元素之間的距離。常被用來做排版布局，讓元素之間不會互相「打架」。
- padding：向內推擠，內容與邊框間打開空間，用來增加內容周圍的距離。就像你在蛋糕和紙盒之間加泡棉或防震紙 —— 是「擴大蛋糕周圍的安全空間」，避免撞到盒子邊緣。
色票卡的盒模型範例：
說明：
盒子讓元素彼此之間可以裝起來，也有一個巢狀結構。
範例：包便當的概念
想像你正在幫自己準備一份愛心便當 🍱：
- 內容 Content：便當裡的食物，比如飯、菜、肉，是這個盒子的「主角」。
- 內距 Padding：你在食物周圍放了一些空間，好讓不同菜色不會黏在一起，也不會讓湯汁弄髒邊緣——這是讓內容舒服的「緩衝區」。
- 邊框 Border：便當盒的外殼，它固定住內部，也決定了整體的外觀形狀。
- 外距 Margin：你在包便當的袋子裡再加一層紙或布巾，確保便當跟袋子內壁不直接碰觸，這就是保持彼此「距離感」的安全空間。
- 巢狀結構：就好像有好幾層便當袋、保溫袋、小包裝，一層包一層，每個元素都可以有自己的盒模型設定，用來掌控版面上的空間與結構。
典型情況下如何定義寬高：
說明：
在寫 CSS 設定 width 或 height，這些數值通常只影響到藍色區域——也就是內容本身的大小，不會包含 Padding 或 Margin。
border box情況下如何定義寬高：
說明：
我以邊界去作為我的盒模型的定義，也就是讓寬度和高度去決定我所看到的那個邊的寬度和高度。簡單說就是「以邊界來決定整體寬高」，讓排版更直觀不容易跑版。
/* 全域選擇器 */
* {
box-sizing: border-box;
}
🌟 * 是一個 萬用選擇器（universal selector），意思是「選取頁面上的所有元素」。
