Chapter 2: Core Concepts

Key Vocabulary

真正理解原理、關係、因果、分類，不是死背名詞。第一章給了定義，這一章解釋「為什麼」跟「彼此的關係」。

This chapter uses five concepts that students most often confuse, each with a diagram. The diagrams are not decoration: they build a mental picture, which is easier to retain than a memorised definition.

本章用五個概念配圖，幫你建立畫面式理解。

Only 1–2 days left? Read these five concepts (about 35–40 minutes), then do the practice paper in 03_高頻應用.md (about 40–60 minutes). In about 1.5 hours, you cover the preliminary-round core.

---

Concept 1: CSS Box Model

盒子模型

One-sentence idea: Every HTML element is a layered box: content → padding → border → margin, from inside to outside.

Visual / 視覺化

Explanation: width controls only the content width. Without box-sizing: border-box, add padding, border, and margin to find the real space used.

Example: width: 200px; padding: 20px; border: 5px; margin: 10px; → total used width = 200 + (20×2) + (5×2) + (10×2) = 270px.

Try it: If padding becomes 30px, what is the total used width? 學生練習。

Recall: Without looking, name the four Box Model layers from inside to outside. 回想問題。

---

Concept 2: Comparing the position Family

最容易混淆的一組

One-sentence idea: position decides what an element is anchored to; the five values use different anchors.

Visual / 視覺化

Explanation:

• static / relative: remain in normal flow (relative can shift from its original spot).
• absolute: uses the nearest positioned ancestor and leaves normal flow.
• fixed: stays in the same viewport position while scrolling.
• sticky: stays in normal flow, then sticks at an offset and leaves with its parent. This is the category-header effect.

Example: Keep the “Drinks” header at the top until “Desserts” pushes it away → use position: sticky, not fixed.

Try it: What goes wrong if the category header uses position: fixed? 學生練習。

Recall: What is the main difference between absolute and fixed? How is sticky different from both? 回想問題。

---

Concept 3: LocalStorage Save-and-Restore Flow

LocalStorage 自動儲存與回填

One-sentence idea: Save while the user types; load it again when the page opens. The user experiences seamless recovery.

Visual / 視覺化

讀（重新打開頁面時） 頁面載入 onload 事件 localStorage .getItem() 讀出 JSON.parse() 字串轉回物件 自動填回 表單欄位

Explanation: This is a full save/load cycle. Save: type → convert to a string → store. Load: read → convert back to an object → fill the form. The directions are opposite.

Example: In a travel-registration form, each input triggers saving. After the browser is reopened, page load triggers reading and restores the data.

Try it: Draw the save flow for a form in your own project and label each function call. 學生練習。

Recall: What happens if an object is passed directly to setItem()? Why is JSON.stringify() needed first? 回想問題。

---

Concept 4: Responsive Breakpoints

同一個網站，三種長相

One-sentence idea: One HTML document can become mobile, tablet, or desktop layouts when CSS switches rules by screen width.

Visual / 視覺化

Explanation: A breakpoint is where screen width activates a different CSS rule, for example @media (max-width: 640px) { ... }. Mobile often uses one column and large buttons; desktop can use denser multi-column layouts.

Example: The Starbucks final task required correct mobile, tablet, and desktop layouts, plus a fixed bottom navigation bar on mobile.

Try it: At 900px width, which layout rules apply? 學生練習。

Recall: What are the three breakpoint widths? Which position value makes a mobile navigation bar stay at the bottom? 回想問題。

---

Concept 5: Flexbox Main and Cross Axes

justify-content vs align-items vs align-self

One-sentence idea: Flexbox has two invisible axes. justify-content aligns the whole row on the main axis; align-items aligns the whole row on the cross axis; align-self changes one child.

Visual / 視覺化

Explanation: The layout direction is the main axis; the perpendicular direction is the cross axis. justify-content distributes items on the main axis. align-items aligns all items on the cross axis. Use align-self to override one child.

Example: In a menu layout, center a row with align-items: center, but put one “Popular” label at the top with align-self: flex-start.

Try it: To align a whole row to the right, change justify-content or align-items? 學生練習。

Recall: How do align-items and align-self differ? Which controls the row and which controls one item? 回想問題。

---

Lesson Summary / 本課總結

Key Takeaways / 五個最重要知識點

1. Box Model: content → padding → border → margin; width means content width only.
2. position: sticky sticks conditionally; it is not permanently pinned like fixed.
3. LocalStorage: save with JSON.stringify(), load with JSON.parse(); the directions are reversed.
4. @media breakpoints let one HTML document serve mobile, tablet, and desktop.
5. Flexbox: justify-content controls the row’s main axis; align-items its cross axis; align-self one item.

Visual Summary

Active Recall / 不看筆記回答

1. Box Model 四層由內到外的順序是什麼？
2. sticky 跟 fixed 的差別在哪一個關鍵動作上？
3. LocalStorage 存資料跟讀資料，函式呼叫順序分別是什麼？
4. 手機版斷點的寬度數字是多少？
5. justify-content、align-items、align-self 誰管整排、誰管單一個？

30-second Review / 30 秒複習區

閉上眼睛，在心裡回答：Box Model 四層、position 五個值誰跟誰最像陷阱、LocalStorage 存跟讀各兩個步驟、三個響應式斷點數字、Flexbox 兩條軸線分別歸誰管。都答得出來就過關，答不出來的部分回頭看對應的視覺化圖。

這五個概念的「容易犯的錯誤」與更難的辨識題，整理在 04_易錯陷阱與高難辨識.md。

---

Extended Topic Map / 分類總覽

來源：NotebookLM 自動生成的知識心智圖，用分類的角度重新看一次剛才學的概念，確認彼此的歸屬關係。

• HTML5 基礎：表格標籤（<th>/<tr>/<td>）、表單元素（<select>/<label>/<fieldset>）、語意化標籤（<article>/<section>/<nav>/<footer>）、媒體與內嵌（<video>/<svg>/<iframe>）
• CSS3 佈局與樣式：定位與排版（Flexbox／Grid／Position）、單位與盒模型（rem/em／box-sizing）、視覺效果（gradient／shadow／opacity／media queries）
• JavaScript 核心技術：資料儲存與處理（LocalStorage／JSON）、邏輯與語法（閉包／this／Promise）、DOM 操作（scrollIntoView／preventDefault／IntersectionObserver）
• UX 與無障礙設計：無障礙指引（alt／對比度／鍵盤操作）、使用者體驗（置底導航／錯誤提示／按鈕尺寸）

這四大分類幾乎涵蓋了第一章的所有速查表內容，可以用來檢查自己有沒有漏讀的分支。