學習目標

• 理解 CSS 盒模型（Box Model）的四個層次：content、padding、border、margin
• 學會設定元素的大小與間距
• 認識 box-sizing 屬性（content-box 與 border-box 的差異）
• 嘗試用邊框與背景顏色觀察盒子範圍

重點觀念（看見隱形的盒子）

• 每個元素都是一個盒子：包含內容區域（content）、內距（padding）、邊框（border）、外距（margin）。
• padding：內容與邊框之間的空間。
• border：圍繞在內容與內距外的邊框。
• margin：元素與其他元素之間的距離。
• box-sizing
  • content-box（預設）：width/height 只包含內容，不含 padding/border。
  • border-box：width/height 包含 padding 與 border，比較好控制大小。

盒模型示範

  <h1>CSS 盒模型示範</h1>
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin: 20px;
  padding: 10px;
  border: 5px solid darkblue;
}

.box1 {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 10px;
  box-sizing: content-box;
}

.box2 {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid green;
  margin: 10px;
  box-sizing: border-box; 
}

常見錯誤與修正

• ❌ 忘記盒模型層次 → ✅ content + padding + border + margin
• ❌ 只改 width/height → ✅ 記得還有 padding 與 border 會影響大小
• ❌ 全部用 content-box → ✅ 多數情境下 border-box 更好維護
• ❌ 濫用 margin 撐開 → ✅ 善用 padding 控制內距，保持結構清晰

今日小挑戰（可交付）

• [ ] 建立兩個盒子，分別用 content-box 與 border-box
• [ ] 嘗試調整 margin 與 padding，觀察差異
• [ ] 給盒子加上不同顏色的邊框，方便辨識範圍
• [ ] 練習把三個盒子排在一起，調整間距讓版面整齊
• [ ] 嘗試製作一個卡片樣式，包含標題、文字與邊框

DAY19 心得

今天學到的「盒模型」讓我真正理解到 CSS 的世界不是只有顏色和字體，而是每個元素都有看不見的「邊界」。以前我常常覺得排版跑掉，原來問題多半是 margin 或 padding 搞混。

練習 content-box 與 border-box 之後，我覺得 border-box 比較直覺，因為寬高就包含了邊框和內距，不用再去算總大小。這對未來要做排版時會更好控制。

盒模型就像是網頁世界的「建築結構」，一旦理解清楚，就能更精準地堆疊和排列元素。這一步很基礎，但卻是往後排版魔法的根基。