替貓老闆做官網 · 第 06 章
貼邊、截斷、誰蓋住誰
文字貼邊、圖被截斷、彈窗被蓋住——這些問題 AI 常常「看起來做好了」。這一章學會用盒模型、溢出與層疊的語言，把問題描述到 AI 一次修對。
貓老闆的簡報
手機上看，字貼著螢幕邊，圖被切掉一半。你說你看不出來？你沒有手機嗎。
——貓掌櫃的老闆「掌櫃」下需求時的原話
這章做什麼
修完三類走查問題：貼邊（內距）、截斷（溢出）、遮擋（層疊），並留下一份層級表。
動手做
- 用開發者工具找出所有貼邊的文字，統一補內距：手機 20px、桌面 28px。
- 圖片容器訂溢出規則：該裁切的跟著圓角裁切，不該出現滾軸的地方明確禁用。
- 訂出全站 z-index 層級表：一般內容 1、吸底欄 10、對話框 100、輕提示 200。
- 回報問題給 AI 時用「元素＋位置＋現象」格式，一次只報一個問題。
親手試試
✕ 貼邊與截斷（NG）
掌櫃監製陶燒貓碗
文字貼著左邊、圖被硬切一刀，圓角只圓了一半。
✓ 內距與裁切（OK）
掌櫃監製陶燒貓碗
內距統一、裁切跟著圓角走——同一個區塊，已經像人做的了。
左邊的每一個毛病，都是 AI「以為做好了」的樣子。
這樣對 AI 說
中文就可以
我的商品圖在手機版右側被截掉一半，商品名貼著螢幕邊緣。請這樣修：一、頁面左右內距統一：桌面 28px、手機 20px。二、圖片容器加上 overflow:hidden，裁切線與圓角一致。三、修完之後，列出你改動的每一個 selector 和它新的樣式，讓我核對。不要動其他區塊的排版，不要加新的顏色。
「列出你改動的每一個 selector」是這門課的常用句式——AI 自己列的清單，就是你核對用的驗收單。
驗收清單
這一章不看文案，看畫面：貼邊、截斷、蓋住，三種都屬於「AI 覺得做好了」。
- 文字離螢幕邊至少 20px（手機）／28px（桌面）
- 圖片截切線與圓角一致，沒有半截圖
- 橫向捲軸：一條都不能有
- 彈窗永遠蓋過吸底欄，層級表貼在專案裡
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。