深入解析 CSS (CSS in Depth)

Keith J. Grant

*級Web開發人員，現任職於美國洲際交易所，負責編寫和維護合作站點的CSS，客戶包括紐約證券交易所網站等。
在使用HTML、CSS和JavaScript開發和維護Web站點及應用程序方面具有豐富的經驗。

【譯者簡介】

黃小璐

畢業於華中科技大學計算機學院。曾任奇虎360軟件開發工程師，多年Web從業者。
參與翻譯了《高性能HTML5》《移動Web手冊》《大型JavaScript應用*佳實踐指南》《Web開發*威指南》等書。

高楠

多年Web開發經驗，自由譯者，開源硬件愛好者。目前就職於360奇舞團。

目錄  
第一部分基礎回顧  
第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和rem 26  
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.1元素寬度的問題47  
3.1.1避免魔術數值50  
3.1.2調整盒模型51  
3.1.3全局設置border-box 52  
3.1.4給列之間加上間隔53  
3.2元素高度的問題54  
3.2.1控制溢出行為55  
3.2 .2百分比高度的備選方案56  
3.2.3使用min-height和max-height 60  
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媒體對象和BFC 87  
4.4 .1 BFC 88  
4.4.2使用BFC實現媒體對象佈局89  
4.5網格系統90  
4.5.1理解網格系統91  
4.5.2構建網格系統91  
4.5.3添加間隔95  
4.6總結99
  
第5章Flexbox 100  
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 Flexbugs 123  
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-index 166  
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章模塊化CSS 202  
9.1基礎樣式：打好基礎203  
9.2一個簡單的模塊204  
9.2.1模塊的變體205  
9.2.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配置KSS 222  
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還是px 279  
12.3.2思考一下行高281  
12.3.3為行內元素設置間距284  
12.4總結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調整字距，提升可讀性296  
13.4.1正文主體的字間距297  
13.4.2標題、小元素和間距298  
13.5惱人的FOUT和FOIT 302  
13.5.1使用Font Face Observer 304  
13.5.2回退到系統字體305  
13.5.3準備使用font-display 307  
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