【簡介】 本書內容改編自第14屆iThome鐵人賽Modern Web組的冠軍系列文章《防禦性CSS-建立「防患未然」的匠人心態》。本書用淺顯易懂的程式碼及貼近生活的實際情境，來探討如何培養「防患未然」的思維。由於有些畫面佈局過於單純和簡單，因此會容易忽略其潛在的破版危險，這些令人容易忽略的潛在性危險，很有可能在你最不希望它出現的時候意外出現了，小則影響畫面上的美觀，大則影響產品在客戶眼中的專業形象，進而造成商業上的損失。 本書將這些常見的案例分成八個主題，逐一探討每一個問題會發生的情境，以及提供解決這些問題的具體方法和技巧，希望在這些案例分析的過程當中，以容易上手的程式碼，帶領讀者慢慢培養「防患未然」的思考習慣，即使是一行簡單的CSS，也能夠充分展現專業的程式設計態度。 【目錄】 |CHAPTER 01| 防禦性程式設計簡介 1.1 什麼是防禦性程式設計 |CHAPTER 02| 不失禮貌的安全距離 2.1 標題與圖示 2.2 元件間的間距 |CHAPTER 03| 又是那令人在意的長短問題 3.1 類別標籤 3.2 過長的內容 3.3 過短的內容 3.4 固定的高度 3.5 固定的寬度 |CHAPTER 04| 放置圖片的正確姿勢 4.1 圖片比例 4.2 容易被忽略的預設背景重複 4.3 圖片失效的備案 4.4 響應式圖片設計 |CHAPTER 05| 陰魂不散的滾動條 5.1 移除不需要的滾動條 5.2 保留滾動條的空間 5.3 避免滾動穿透 |CHAPTER 06| 盒子模型的帽子戲法 6.1 內容盒子與邊框盒子 6.2 邊距重疊 |CHAPTER 07| Flexbox的彈性與不彈性 7.1 外容器的預設值 7.2 內元件的預設值 7.3 有彈性的間距 |CHAPTER 08| Grid迷宮般的內心戲 8.1 伸縮失效的子元件 8.2 自動填滿效果 8.3 釘選失效的祕密 |CHAPTER 09| 元件的態度決定高度 9.1 步驟對話框的高度 9.2 響應式高度設計 |CHAPTER 10| 讓人敬畏三分的CSS 10.1 分組選擇器 10.2 隱藏網頁上的元件 10.3 失效的z-index