目 錄

部分 基礎回顧

第1章 層疊、優先級和繼承2

1.1 層疊3

1.1.1 樣式表的來源5

1.1.2 理解優先級8

1.1.3 源碼順序12

1.1.4 兩條經驗法則14

1.2 繼承15

1.3 特殊值17

1.3.1 使用inherit關鍵字17

1.3.2 使用initial關鍵字18

1.4 簡寫屬性19

1.4.1 簡寫屬性會默默覆蓋其他樣式20

1.4.2 理解簡寫值的順序20

1.5 總結23

第2章 相對單位24

2.1 相對值的好處24

2.1.1 那些年追求的像素級完美25

2.1.2 像素級完美的時代終結了25

2.2 em和rem26

2.2.1 使用em定義字號27

2.2.2 使用rem設置字號31

2.3 停止像素思維32

2.3.1 設置一個合理的默認字號33

2.3.2 構造響應式面板34

2.3.3 縮放單個組件35

2.4 視口的相對單位36

2.4.1 使用vw定義字號38

2.4.2 使用calc()定義字號39

2.5 無單位的數值和行高39

2.6 自定義屬性（即CSS變量）41

2.6.1 動態改變自定義屬性43

2.6.2 使用JavaScript改變自定義屬性45

2.6.3 探索自定義屬性46

2.7 總結46

第3章 盒模型47

3素寬度的問題47

3.1.1 避免魔術數值50

3.1.2 調整盒模型51

3.1.3 全局設置border-box52

3.1.4 給列之間加上間隔53

3素高度的問題54

3.2.1 控制溢出行為55

3.2.2 百分比高度的備選方案56

3.2.3 使用min-height和max-height60

3.2.4 垂直居中內容60

3.3 負外邊距62

3.4 外邊距折疊62

3.4.1 文字折疊63

3.4.2 多個外邊距折疊63

3.4.3 容器外部折疊64

3.5 容素間距65

3.5.1 如果內容改變了67

3.5.2 更通用的解決方案：貓頭鷹選擇器68

3.6 總結71

第二部分 精通布局

第4章 理解浮動74

4.1 浮動的設計初衷74

4.2 容器折疊和清除浮動80

4.2.1 理解容器折疊80

4.2.2 理解清除浮動82

4.3 出乎意料的“浮動陷阱”84

4.4 媒體對像和BFC87

4.4.1 BFC88

4.4.2 使用BFC實現媒體對像布局89

4.5 網格繫統90

4.5.1 理解網格繫統91

4.5.2 構建網格繫統91

4.5.3 添加間隔95

4.6 總結99

第5章 Flexbox100

5.1 Flexbox的原則100

5.1.1 創建一個基礎的Flexbox菜單103

5.1.2 添加內邊距和間隔105

5.2 素的大小107

5.2.1 使用flex-basis屬性109

5.2.2 使用flex-grow屬性109

5.2.3 使用flex-shrink屬性110

5.2.4 實際應用111

5.3 彈性方向112

5.3.1 改變彈性方向114

5.3.2 登錄表單的樣式115

5.4 對齊、間距等細節117

5.4.1 理解彈性容器的屬性117

5.4.2 理解素的屬性120

5.4.3 使用對齊屬性121

5.5 值得注意的地方122

5.5.1 Flexbugs123

5.5.2 整頁布局123

5.6 總結123

第6章 網格布局124

6.1 網頁布局開124

6.2 網格剖析127

6.2.1 網格線的編號132

6.2.2 與Flexbox配合133

6.3 替代語法137

6.3.1 命名的網格線137

6.3.2 命名網格區域139

6.4 顯式和隱式網格140

6.4.1 添加變化144

6.4.2 素填滿網格軌道146

6.5 特性查詢149

6.6 對齊152

6.7 總結153

第7章 定位和層疊上下文154

7.1 固定定位154

7.1.1 用固定定位創建一個模態框155

7.1.2 控素的大小158

7.2 定位158

7.2.1 讓Close按鈕定位158

7.2.2 素159

7.3 相對定位161

7.3.1 創建一個下拉菜單161

7.3.2 創建一個CSS三角形164

7.4 層疊上下文和z-index166

7.4.1 理解渲染過程和層疊順序166

7.4.2 用z-index控制層疊順序168

7.4.3 理解層疊上下文168

7.5 粘滯定位171

7.6 總結174

第8章 響應式設計175

8.1 移動優先176

8.1.1 創建移動版的菜單182

8.1.2 給視口添加meta標簽185

8.2 媒體查詢186

8.2.1 媒體查詢的類型187

8.2.2 給網頁添加斷點189

8.2.3 添加響應式的列192

8.3 流式布局194

8.3.1 給大視口添加樣式195

8.3.2 處理表格196

8.4 響應式圖片198

8.4.1 不同視口大小使用不同的圖片198

8.4.2 使用srcset提供對應的圖片199

8.5 總結200

第三部分 大型應用中的CSS

第9章 模塊化CSS202

9.1 基礎樣式：打好基礎203

9.2 一個簡單的模塊204

9.2.1 模塊的變體205

9.2.素模塊208

9.3 把模塊組合成更大的結構211

9.3.1 拆分不同模塊的職責212

9.3.2 模塊命名215

9.4 工具類 217

9.5 CSS方法論217

9.6 總結219

第10章 模式庫220

10.1 KSS簡介221

10.1.1 配置KSS222

10.1.2 編寫KSS文檔223

10.1.3 記錄模塊變體227

10.1.4 創建概覽頁面229

10.1.5 記錄需要JavaScript的模塊229

10.1.6 為模式庫分組232

10.2 改變編寫CSS的方式234

10.2.1 CSS優先的工作流程234

10.2.2 像API一樣使用模式庫235

10.3 總結240

第四部分 高級話題

第11章 背景、陰影和混合模式242

11.1 漸變243

11.1.1 使用多個顏色節點245

11.1.2 使用徑向漸變247

11.2 陰影248

11.2.1 使用漸變和陰影形成立體感249

11.2.2 使用扁平化設素251

11.2.3 讓按鈕看起來更時尚252

11.3 混合模式253

11.3.1 為圖片著色255

11.3.2 理解混合模式的類型256

11.3.3 為圖片添加紋理257

11.3.4 使用融合混合模式258

11.4 總結260

第12章 對比、顏色和間距261

12.1 對比重要262

12.1.1 建立模式263

12.1.2 還原設計稿264

12.2 顏色266

12.2.1 理解顏色表示法272

12.2.2 添加新顏色到調色板275

12.2.3 思考字體顏色的對比效果277

12.3 間距279

12.3.1 使用em還是px279

12.3.2 思考一下行高281

12.3.3 素設置間距284

12.4 總結286

第13章 排版287

13.1 Web字體288

13.2 谷歌字體289

13.3 如何使用@font-face293

13.3.1 字體格式與回退處理294

13.3.2 同一種字型的多種變體295

13.4 調整字距，提升可讀性296

13.4.1 正文主體的字間距297

13.4.2 標素和間距298

13.5 惱人的FOUT和FOIT302

13.5.1 使用Font Face Observer304

13.5.2 回退到繫統字體305

13.5.3 準備使用font-display307

13.6 總結308

第14章 過渡309

14.1 從這邊到那邊309

14.2 定時函數311

14.2.1 理解貝塞爾曲線312

14.2.2 階躍315

14.3 非動畫屬性316

14.3.1 不可添加動畫效果的屬性318

14.3.2 淡入與淡出319

14.4 過渡到自動高度321

14.5 總結323

第15章 變換324

15.1 旋轉、平移、縮放和傾斜324

15.1.1 更改變換基點327

15.1.2 使用多重變換327

15.2 在運動中變換328

15.2.1 放大圖標333

15.2.2 創建“飛入”的標簽335

15.2.3 交錯顯示過渡337

15.3 動畫性能338

15.4 三維（3D）變換340

15.4.1 控制透視距離341

15.4.2 實現高級3D變換343

15.5 總結346

第16章 動畫347

16.1 關鍵幀348

16.2 為3D變換添加動畫350

16.2.1 創建無動畫頁面布局350

16.2.2 為布局添加動畫355

16.3 動畫延遲和填充模式356

16.4 通過動畫傳遞意圖359

16.4.1 反饋用戶操作359

16.4.2 吸引用戶的注意力362

16.5 後一點建議365

16.6 總結365

附錄A 選擇器366

附錄B 預處理器370