深入解析CSS

目 錄
第一部分 基礎(chǔ)回顧
第1章 層疊、優(yōu)先級(jí)和繼承　2
1．1 層疊　3
1．1．1 樣式表的來(lái)源　5
1．1．2 理解優(yōu)先級(jí)　8
1．1．3 源碼順序　12
1．1．4 兩條經(jīng)驗(yàn)法則　14
1．2 繼承　15
1．3 特殊值　17
1．3．1 使用inherit關(guān)鍵字　17
1．3．2 使用initial關(guān)鍵字　18
1．4 簡(jiǎn)寫(xiě)屬性　19
1．4．1 簡(jiǎn)寫(xiě)屬性會(huì)默默覆蓋其他樣式　20
1．4．2 理解簡(jiǎn)寫(xiě)值的順序　20
1．5 總結(jié)　23
第2章 相對(duì)單位　24
2．1 相對(duì)值的好處　24
2．1．1 那些年追求的像素級(jí)完美　25
2．1．2 像素級(jí)完美的時(shí)代終結(jié)了　25
2．2 em和rem　26
2．2．1 使用em定義字號(hào)　27
2．2．2 使用rem設(shè)置字號(hào)　31
2．3 停止像素思維　32
2．3．1 設(shè)置一個(gè)合理的默認(rèn)字號(hào)　33
2．3．2 構(gòu)造響應(yīng)式面板　34
2．3．3 縮放單個(gè)組件　35
2．4 視口的相對(duì)單位　36
2．4．1 使用vw定義字號(hào)　38
2．4．2 使用calc()定義字號(hào)　39
2．5 無(wú)單位的數(shù)值和行高　39
2．6 自定義屬性（即CSS變量）　41
2．6．1 動(dòng)態(tài)改變自定義屬性　43
2．6．2 使用JavaScript改變自定義屬性　45
2．6．3 探索自定義屬性　46
2．7 總結(jié)　46
第3章 盒模型　47
3．1 元素寬度的問(wèn)題　47
3．1．1 避免魔術(shù)數(shù)值　50
3．1．2 調(diào)整盒模型　51
3．1．3 全局設(shè)置border-box　52
3．1．4 給列之間加上間隔　53
3．2 元素高度的問(wèn)題　54
3．2．1 控制溢出行為　55
3．2．2 百分比高度的備選方案　56
3．2．3 使用min-height和max-height　60
3．2．4 垂直居中內(nèi)容　60
3．3 負(fù)外邊距　62
3．4 外邊距折疊　62
3．4．1 文字折疊　63
3．4．2 多個(gè)外邊距折疊　63
3．4．3 容器外部折疊　64
3．5 容器內(nèi)的元素間距　65
3．5．1 如果內(nèi)容改變了　67
3．5．2 更通用的解決方案：貓頭鷹選擇器　68
3．6 總結(jié)　71
第二部分 精通布局
第4章 理解浮動(dòng)　74
4．1 浮動(dòng)的設(shè)計(jì)初衷　74
4．2 容器折疊和清除浮動(dòng)　80
4．2．1 理解容器折疊　80
4．2．2 理解清除浮動(dòng)　82
4．3 出乎意料的“浮動(dòng)陷阱”　84
4．4 媒體對(duì)象和BFC　87
4．4．1 BFC　88
4．4．2 使用BFC實(shí)現(xiàn)媒體對(duì)象布局　89
4．5 網(wǎng)格系統(tǒng)　90
4．5．1 理解網(wǎng)格系統(tǒng)　91
4．5．2 構(gòu)建網(wǎng)格系統(tǒng)　91
4．5．3 添加間隔　95
4．6 總結(jié)　99
第5章 Flexbox　100
5．1 Flexbox的原則　100
5．1．1 創(chuàng)建一個(gè)基礎(chǔ)的Flexbox菜單　103
5．1．2 添加內(nèi)邊距和間隔　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 實(shí)際應(yīng)用　111
5．3 彈性方向　112
5．3．1 改變彈性方向　114
5．3．2 登錄表單的樣式　115
5．4 對(duì)齊、間距等細(xì)節(jié)　117
5．4．1 理解彈性容器的屬性　117
5．4．2 理解彈性子元素的屬性　120
5．4．3 使用對(duì)齊屬性　121
5．5 值得注意的地方　122
5．5．1 Flexbugs　123
5．5．2 整頁(yè)布局　123
5．6 總結(jié)　123
第6章 網(wǎng)格布局　124
6．1 網(wǎng)頁(yè)布局開(kāi)啟新紀(jì)元　124
6．2 網(wǎng)格剖析　127
6．2．1 網(wǎng)格線的編號(hào)　132
6．2．2 與Flexbox配合　133
6．3 替代語(yǔ)法　137
6．3．1 命名的網(wǎng)格線　137
6．3．2 命名網(wǎng)格區(qū)域　139
6．4 顯式和隱式網(wǎng)格　140
6．4．1 添加變化　144
6．4．2 讓網(wǎng)格元素填滿網(wǎng)格軌道　146
6．5 特性查詢　149
6．6 對(duì)齊　152
6．7 總結(jié)　153
第7章 定位和層疊上下文　154
7．1 固定定位　154
7．1．1 用固定定位創(chuàng)建一個(gè)模態(tài)框　155
7．1．2 控制定位元素的大小　158
7．2 絕對(duì)定位　158
7．2．1 讓Close按鈕絕對(duì)定位　158
7．2．2 定位偽元素　159
7．3 相對(duì)定位　161
7．3．1 創(chuàng)建一個(gè)下拉菜單　161
7．3．2 創(chuàng)建一個(gè)CSS三角形　164
7．4 層疊上下文和z-index　166
7．4．1 理解渲染過(guò)程和層疊順序　166
7．4．2 用z-index控制層疊順序　168
7．4．3 理解層疊上下文　168
7．5 粘滯定位　171
7．6 總結(jié)　174
第8章 響應(yīng)式設(shè)計(jì)　175
8．1 移動(dòng)優(yōu)先　176
8．1．1 創(chuàng)建移動(dòng)版的菜單　182
8．1．2 給視口添加meta標(biāo)簽　185
8．2 媒體查詢　186
8．2．1 媒體查詢的類型　187
8．2．2 給網(wǎng)頁(yè)添加斷點(diǎn)　189
8．2．3 添加響應(yīng)式的列　192
8．3 流式布局　194
8．3．1 給大視口添加樣式　195
8．3．2 處理表格　196
8．4 響應(yīng)式圖片　198
8．4．1 不同視口大小使用不同的圖片　198
8．4．2 使用srcset提供對(duì)應(yīng)的圖片　199
8．5 總結(jié)　200
第三部分 大型應(yīng)用中的CSS
第9章 模塊化CSS　202
9．1 基礎(chǔ)樣式：打好基礎(chǔ)　203
9．2 一個(gè)簡(jiǎn)單的模塊　204
9．2．1 模塊的變體　205
9．2．2 多元素模塊　208
9．3 把模塊組合成更大的結(jié)構(gòu)　211
9．3．1 拆分不同模塊的職責(zé)　212
9．3．2 模塊命名　215
9．4 工具類　 217
9．5 CSS方法論　217
9．6 總結(jié)　219
第10章 模式庫(kù)　220
10．1 KSS簡(jiǎn)介　221
10．1．1 配置KSS　222
10．1．2 編寫(xiě)KSS文檔　223
10．1．3 記錄模塊變體　227
10．1．4 創(chuàng)建概覽頁(yè)面　229
10．1．5 記錄需要JavaScript的模塊　229
10．1．6 為模式庫(kù)分組　232
10．2 改變編寫(xiě)CSS的方式　234
10．2．1 CSS優(yōu)先的工作流程　234
10．2．2 像API一樣使用模式庫(kù)　235
10．3 總結(jié)　240
第四部分 高級(jí)話題
第11章 背景、陰影和混合模式　242
11．1 漸變　243
11．1．1 使用多個(gè)顏色節(jié)點(diǎn)　245
11．1．2 使用徑向漸變　247
11．2 陰影　248
11．2．1 使用漸變和陰影形成立體感　249
11．2．2 使用扁平化設(shè)計(jì)創(chuàng)建元素　251
11．2．3 讓按鈕看起來(lái)更時(shí)尚　252
11．3 混合模式　253
11．3．1 為圖片著色　255
11．3．2 理解混合模式的類型　256
11．3．3 為圖片添加紋理　257
11．3．4 使用融合混合模式　258
11．4 總結(jié)　260
第12章 對(duì)比、顏色和間距　261
12．1 對(duì)比最重要　262
12．1．1 建立模式　263
12．1．2 還原設(shè)計(jì)稿　264
12．2 顏色　266
12．2．1 理解顏色表示法　272
12．2．2 添加新顏色到調(diào)色板　275
12．2．3 思考字體顏色的對(duì)比效果　277
12．3 間距　279
12．3．1 使用em還是px　279
12．3．2 思考一下行高　281
12．3．3 為行內(nèi)元素設(shè)置間距　284
12．4 總結(jié)　286
第13章 排版　287
13．1 Web字體　288
13．2 谷歌字體　289
13．3 如何使用@font-face　293
13．3．1 字體格式與回退處理　294
13．3．2 同一種字型的多種變體　295
13．4 調(diào)整字距，提升可讀性　296
13．4．1 正文主體的字間距　297
13．4．2 標(biāo)題、小元素和間距　298
13．5 惱人的FOUT和FOIT　302
13．5．1 使用Font Face Observer　304
13．5．2 回退到系統(tǒng)字體　305
13．5．3 準(zhǔn)備使用font-display　307
13．6 總結(jié)　308
第14章 過(guò)渡　309
14．1 從這邊到那邊　309
14．2 定時(shí)函數(shù)　311
14．2．1 理解貝塞爾曲線　312
14．2．2 階躍　315
14．3 非動(dòng)畫(huà)屬性　316
14．3．1 不可添加動(dòng)畫(huà)效果的屬性　318
14．3．2 淡入與淡出　319
14．4 過(guò)渡到自動(dòng)高度　321
14．5 總結(jié)　323
第15章 變換　324
15．1 旋轉(zhuǎn)、平移、縮放和傾斜　324
15．1．1 更改變換基點(diǎn)　327
15．1．2 使用多重變換　327
15．2 在運(yùn)動(dòng)中變換　328
15．2．1 放大圖標(biāo)　333
15．2．2 創(chuàng)建“飛入”的標(biāo)簽　335
15．2．3 交錯(cuò)顯示過(guò)渡　337
15．3 動(dòng)畫(huà)性能　338
15．4 三維（3D）變換　340
15．4．1 控制透視距離　341
15．4．2 實(shí)現(xiàn)高級(jí)3D變換　343
15．5 總結(jié)　346
第16章 動(dòng)畫(huà)　347
16．1 關(guān)鍵幀　348
16．2 為3D變換添加動(dòng)畫(huà)　350
16．2．1 創(chuàng)建無(wú)動(dòng)畫(huà)頁(yè)面布局　350
16．2．2 為布局添加動(dòng)畫(huà)　355
16．3 動(dòng)畫(huà)延遲和填充模式　356
16．4 通過(guò)動(dòng)畫(huà)傳遞意圖　359
16．4．1 反饋用戶操作　359
16．4．2 吸引用戶的注意力　362
16．5 最后一點(diǎn)建議　365
16．6 總結(jié)　365
附錄A 選擇器　366
附錄B 預(yù)處理器　370