LESSON-08 · TOPIC 01
能用最小 base 規則統一 box-sizing、body margin 與媒體元素最大寬度，不抹除必要的互動狀態。
能用最小 base 規則統一 box-sizing、body margin 與媒體元素最大寬度，不抹除必要的互動狀態。
瀏覽器預設與 content-box 計算若未先統一，元件尺寸容易因 padding/border 超出；過度 reset 又可能移除焦點與語意提示。
要修改的檔案：files/starter/style.css
定位：在 Computed 先讀 box-sizing，不先任意減少 width。｜依 starter-1 定位，只修改「base／reset」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
首頁卡片設定 16rem 後仍因 1rem padding 與 border 撐寬，圖片在手機又超出卡片。
起始狀態：卡片使用 content-box；fixture 另保留 max-width:100% 的媒體基底與可見 focus 規則。
runtime 的 box-sizing 由 content-box 變 border-box；base fixture 同時保留 body spacing reset、img max-width 與按鈕 focus。
驗收證據：runtime before=content-box、after=border-box、property=box-sizing；窄版圖片外框不超過父容器
開始組裝多個元件前，需要可預測盒模型、頁面外距與媒體縮放時。
常見混淆：reset 不等於 design system；它只建立基底，不負責卡片品牌色、section 間距或元件狀態。
這段程式是理解起點，不是要你直接跳過 Starter。
base 是全站共同起跑線，只先處理大家都需要的一小組預設，不是把瀏覽器所有樣式清空。
正式說法：A minimal reset normalizes selected user-agent defaults；box-sizing:border-box includes padding and border in the specified box size, while inherited universal rules cover pseudo-elements deliberately。
*,*::before,*::after{box-sizing:border-box}body{margin:0}img{display:block;max-width:100%;height:auto}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：在 Computed 先讀 box-sizing，不先任意減少 width。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Computed 先讀 box-sizing，不先任意減少 width。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Computed 先讀 box-sizing，不先任意減少 width。。
檔案：files/starter/style.css 定位：在 Computed 先讀 box-sizing，不先任意減少 width。
要做：執行實驗替卡片切換 base-reset class，直接讀取 computed box-sizing。
預期：runtime 的 box-sizing 由 content-box 變 border-box；base fixture 同時保留 body spacing reset、img max-width 與按鈕 focus。
證據：runtime before=content-box、after=border-box、property=box-sizing；窄版圖片外框不超過父容器
卡住先查：在 Computed 先讀 box-sizing，不先任意減少 width。
檔案：files/starter/style.css 定位：在 Computed 先讀 box-sizing，不先任意減少 width。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 box-sizing 由 content-box 變 border-box；base fixture 同時保留 body spacing reset、img max-width 與按鈕 focus。
證據：runtime before=content-box、after=border-box、property=box-sizing；窄版圖片外框不超過父容器
卡住先查：在 Computed 先讀 box-sizing，不先任意減少 width。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先統一盒模型，再判斷 width 是否真的有問題。
讓被測卡片由 content-box 切成 border-box；圖片使用 max-width:100%。
完整解答與原因：border-box 把 padding/border 納入指定尺寸；媒體基底限制圖片寬度，且 reset 不應移除 focus outline。