Chapter 4: Common Traps & Advanced Distinctions
Chapter 4: Common Traps & Advanced Distinctions
Key Vocabulary
| English / 英文 | 中文 | Simple Meaning / 簡單意思 |
|---|---|---|
| distinguish | 分辨 | tell things apart |
| descendant | 後代元素 | child at a lower level |
| coercion | 型別轉換 | automatic type conversion |
相似概念、NOT/EXCEPT 題、容易誤選的 distractor、較難題。這一章專門訓練「差一點就選錯」的辨識力，是拉開分數差距的關鍵章節。
1. Similar Concepts: Tell Them Apart
相似概念辨識表
| Confusable Pair / 易混淆概念 | Key Distinction / 辨識關鍵 |
|---|---|
position values | static: normal flow; relative: move from its original spot; absolute: nearest positioned ancestor and leaves the flow; fixed: pinned to the viewport; sticky: sticks after its offset and leaves with its container. 最常誤把 sticky 當 fixed。 |
em vs rem | em is relative to the parent font size; rem is relative to the root (html) font size. 記法：r = root。 |
| LocalStorage / SessionStorage / Cookie | LocalStorage persists (about 5 MB); SessionStorage disappears when its tab closes; Cookies are sent with requests and are smaller. The key difference is lifetime, not speed. |
justify-content / align-items / align-self | justify-content: whole row on the main axis; align-items: whole row on the cross axis; align-self: one child on the cross axis. |
== vs === | == compares values with coercion (5 == "5" is true); === compares value and type (5 === "5" is false). |
null vs undefined | null: intentionally empty; undefined: declared but not assigned. |
<article> vs <section> | An article can stand alone; a section is simply a thematic part. |
<label> vs <fieldset> + <legend> | A label describes one field; fieldset + legend groups related fields with a title. |
oninput / onchange / onload | oninput: every input change; onchange: changed after losing focus; onload: page finished loading. |
div > p vs div p | > selects direct children only; a space selects all descendants. |
When z-index works | It works on positioned elements (relative, absolute, fixed, sticky). With static, z-index has no effect here. |
isNaN(x) vs x === NaN | Use isNaN(x). x === NaN is always false because NaN is not equal to itself. |
2. NOT / EXCEPT Question Practice
NOT／EXCEPT 型題目練習
這類題目故意在四個選項裡放三個正確敘述、一個錯誤或不相關的敘述，考的是「有沒有漏讀關鍵字」。作答時務必先確認題目問的是「正確」還是「不正確／不是」。
1. 以下哪一個標籤不建議在 HTML5 中使用？
A. nav B. header C. center D. section
→ C。<center> 是舊式標籤，HTML5 建議改用 CSS text-align 處理置中。
2. 關於「無障礙網站設計」，下列哪項不是常見的要求？ A. 提供高對比度文字與背景 B. 使用替代文字（alt）描述圖片 C. 所有操作必須使用滑鼠完成 D. 表單必須有清楚的標籤（label） → C。無障礙設計要求鍵盤也能操作，「必須用滑鼠」剛好違反無障礙原則，是這題的陷阱所在。
3. 在瀏覽器中使用 LocalStorage 儲存團員資料，下列敘述正確的是？ A. LocalStorage 的資料在瀏覽器關閉後會消失 B. LocalStorage 只能儲存文字資料，若要儲存物件需轉換為 JSON 字串 C. LocalStorage 的容量限制通常是 50MB D. LocalStorage 與 SessionStorage 的差別在於速度 → B。A 錯在把 LocalStorage 跟 SessionStorage 的特性搞反；C 錯在容量誇大 10 倍（實際約 5MB）；D 錯在把「生命週期」誤植成「速度」——這題一次考三種常見誤解，务必逐項排除。
4. 正確檢查一個數字是否為 NaN 的寫法是？
A. x == NaN B. x === NaN C. isNaN(x) D. x == 'NaN'
→ C。A、B 都會恆為 false，因為 NaN 不等於任何值（包括自己），這是 JavaScript 一個著名的反直覺行為。
5. z-index 屬性在什麼情況下才會生效？
A. 只在設置了 position: absolute 時 B. 只在設置了 position: relative 時 C. 只在設置了 position 為 relative、absolute、fixed 或 sticky 時 D. 永遠生效
→ C。A、B 都只講對一半，容易在時間壓力下選到看似合理但不完整的答案。
3. Common Mistakes
常見錯誤清單
對應第二章「核心概念」的五個易混淆概念，這些是實際寫程式時最常犯、也最常被考的錯誤：
- 把
position: sticky誤用成fixed，導致分類標題捲動時整個畫面都被卡住，而不是到定點才吸附 - 忘記
JSON.stringify()，直接把物件存進 LocalStorage，導致存進去的是無意義的字串[object Object] - 只寫了「存」的邏輯（
oninput），忘記寫「讀」的邏輯（onload），變成使用者重開頁面資料還是不見了 - 分不清
justify-content跟align-items，對齊方向調錯軸 - 用
x === NaN判斷是否為 NaN，這個寫法永遠回傳 false - 在沒有設定 position 的元素上寫
z-index，完全沒有效果卻找不出原因
4. Advanced Questions (Read If Time Allows)
高難度進階題庫（時間充裕再讀）
來源：NotebookLM「手機網站技術技能比賽-測試題目」原始題庫中難度較高的部分，答案已驗證。這些題目比第三章的應用題更刁鑽，適合已經熟悉基礎的學生衝刺高分用。
Advanced CSS / CSS 高難度
| # | Question / 題目 | Answer / 答案 | Explanation / 解析 |
|---|---|---|---|
| 1 | 哪個選擇器可以選到同時具有 class1 且 class2 的元素？ | .class1.class2 | 中間沒有空格代表「且」，有空格代表「後代」 |
| 2 | flex-grow 屬性的作用是？ | 設定元素是否會在容器中伸縮以佔用多餘空間 | |
| 3 | 想讓元素背景只覆蓋內容不含 padding，該用什麼？ | background-origin: content-box | |
| 4 | [data-info] 這種寫法是什麼選擇器？ | 屬性選擇器 | 選取所有有 data-info 屬性的元素 |
| 5 | Grid 佈局中指定網格項目起訖位置用什麼屬性？ | grid-row 和 grid-column | |
| 6 | 設定元素透明度用哪個屬性？ | opacity | visibility 是顯示/隱藏，不是透明度漸變 |
| 7 | float: left 後如何清除對下一個元素的影響？ | clear: both |
Advanced JavaScript / JavaScript 高難度
| # | Question / 題目 | Answer / 答案 | Explanation / 解析 |
|---|---|---|---|
| 1 | null 和 undefined 的區別？ | null 表示刻意設為空物件，undefined 表示尚未賦值 | |
| 2 | 下列哪個描述閉包（closure）正確？ | 閉包是能夠訪問自己作用域之外變數的函數 | |
| 3 | this 的值取決於？ | 函數被調用的位置（不是定義的位置） | |
| 4 | 把字串轉成整數用哪個函式？ | parseInt() | |
| 5 | 哪段程式碼可以建立一個不能修改的物件？ | Object.freeze(obj) | |
| 6 | 如何讓非同步任務按順序執行？ | async/await | |
| 7 | 合併兩個陣列且不修改原陣列，用哪個方法？ | Array.concat() | |
| 8 | Promise 的 .then() 用於？ | 處理成功（resolve）的結果 | |
| 9 | 檢查物件是否擁有指定屬性（不含原型鏈），用哪個方法？ | hasOwnProperty() | |
| 10 | 產生 0～9 之間隨機整數的正確寫法？ | Math.floor(Math.random() * 10) |
Advanced Mobile-Web Optimisation / 手機網站優化
| # | Question / 題目 | Answer / 答案 | Explanation / 解析 |
|---|---|---|---|
| 1 | 手機網站用 rem 比 px 更適合的原因？ | rem 相對於根元素，便於做全局的響應式調整 | |
| 2 | 哪組 CSS 屬性最適合做手機網站的流動性佈局？ | display: flex 和 display: grid | |
| 3 | 想讓一張圖片只在手機上顯示，該怎麼做？ | display: none 搭配 @media (max-width: 600px) { display: block } | |
| 4 | 用什麼技術可以有效縮短載入時間？ | CSS Sprites（把多張小圖合併成一張，減少請求數） | |
| 5 | 在 JavaScript 中偵測目前是否為行動裝置，常用什麼？ | navigator.userAgent | |
| 6 | HTML5 中嵌入影片最有效的標籤是？ | <video> | |
| 7 | 手機按鈕建議最小尺寸為何？為什麼？ | 至少 44px × 44px，確保在高密度螢幕上仍容易點擊 | Apple／Google 官方無障礙設計指引的建議值 |
| 8 | 避免手機瀏覽器滾動出現彈性回彈效果，用哪個 CSS 屬性？ | overscroll-behavior: contain | |
| 9 | 建置響應式導航選單，最能兼顧手機和桌面體驗的方法？ | @media 查詢搭配 flex 做顯示／隱藏切換 | |
| 10 | 哪個 JS 框架特別適合快速開發 PWA？ | React | |
| 11 | 手機網站如何優化字體以確保最佳性能？ | 使用 WOFF2 格式字體 | 檔案較小、載入更快 |
提醒：原始題庫中還有部份題目（如「如何避免地址欄佔用畫面」「CSS 重新計算」等）因缺乏官方答案且說法容易有爭議，刻意不收錄，避免記錯誤答案。
