從0到1 CSS進階之旅

莫振傑

從事前後端開發4年多，開發過綠葉學習網、廣州智能工程研究會網站、大量在線應用工具以及各種類型網站，業餘時間閱讀大量國內外技術書籍，著有多本編程書。
現為綠葉學習網的站長，該網站用於分享其前後端開發經驗。
作者編寫分享的原創在線教程在互聯網廣受網友推崇。
今年又開發了系列前端線上付費課程。

目錄
第 1 章 基礎知識 1
1.1 CSS 進階簡介 1
1.1.1 你真的精通CSS 嗎 1
1.1.2 進階教程簡介 2
1.2 CSS 單位 3
1.2.1 *對單位 3
1.2.2 相對單位 3
1.3 CSS 特性 11
1.3.1 繼承性 11
1.3.2 層疊性 13
1.4 CSS 優先級 15
1.4.1 引用方式衝突 15
1.4.2 繼承方式衝突 16
1.4.3 指定樣式衝突 16
1.4.4 繼承樣式和指定樣式衝突 19
1.4.5 !important 20
1.5 CSS 引用方式 22
1.5.1 外部樣式表 23
1.5.2 內部樣式表 23
1.5.3 行內樣式表 24
1.6 CSS 選擇器 25
1.6.1 後代選擇器 26
1.6.2 子代選擇器 27
1.6.3 兄弟選擇器 28
1.6.4 相鄰選擇器 29
1.7 :first-letter 和:first-line 32
1.7.1 :first-letter 選擇器 32
1.7.2 :first-line 選擇器 32

第 2 章 CSS 規範 34
2.1 CSS 規範簡介 34
2.2 命名規範 34
2.2.1 CSS 文件命名 35
2.2.2 id 和class 命名 35
2.3 書寫規範 38
2.4 註釋規範 40
2.4.1 頂部註釋 40
2.4.2 模塊註釋 40
2.4.3 簡單註釋 41
2.5 CSS reset 41
2.5.1 什麼是CSS reset 41
2.5.2 為什麼要用CSS reset 42
2.5.3 如何使用CSS reset 42

第3 章 盒子模型 45
3.1 CSS 盒子模型 45
3.2 深入border 48
3.2.1 性能差異 48
3.2.2 兼容差異 48
3.3 深入padding 48
3.4 外邊距疊加 50
3.4.1 外邊距疊加的3 種情況 51
3.4.2 外邊距疊加的意義 53
3.5 負margin 技術 54
3.5.1 負margin 簡介 54
3.5.2 負margin 技巧 57
3.6 overflow 64

第4 章 display 屬性 67
4.1 塊元素和行內元素 67
4.1.1 塊元素 67
4.1.2 行內元素 68
從0 到2 1 系列圖書 目錄
4.2 display 簡介 69
4.2.1 block 元素 69
4.2.2 inline 元素 70
4.2.3 inline-block 元素 70
4.3 display:none 72
4.3.1 display:none 簡介 72
4.3.2 display:none 和visibility:hidden 的
區別 73
4.4 display:table-cell 75
4.4.1 圖片垂直居中於元素 75
4.4.2 等高佈局 77
4.4.3 自動平均劃分元素 79
4.5 去除inline-block 元素間距 80

第5 章 文本效果 84
5.1 文本效果簡介 84
5.2 深入text-indent 84
5.3 text-align 87
5.3.1 text-align 起作用的元素 88
5.3.2 text-align:center; 與margin:0
auto; 89
5.4 深入line-height 89
5.4.1 line-height 的定義 90
5.4.2 深入line-height 91
5.5 深入vertical-align 97
5.5.1 vertical-align 屬性取值 97
5.5.2 vertical-align 屬性應用 99

第6 章 表單效果 104
6.1 表單效果簡介 104
6.2 深入radio 和checkbox 105
6.3 深入textarea 106
6.3.1 固定大小，禁用拖動 106
6.3.2 在Chrome（或Firefox）和IE 中 實現相同的外觀 109
6.4 表單對齊 110

第7 章 浮動佈局 113
7.1 正常文檔流和脫離文檔流 113
7.1.1 正常文檔流 113
7.1.2 脫離文檔流 114
7.2 深入浮動 116
7.3 浮動的影響 118
7.3.1 對自身的影響 119
7.3.2 對父元素的影響 119
7.3.3 對兄弟元素的影響 121
7.3.4 對子元素的影響 125
7.4 浮動的副作用 126
7.5 清除浮動 128
7.5.1 clear:both 128
7.5.2 overflow:hidden 130
7.5.3 ::after 偽元素 131

第8 章 定位佈局 133
8.1 深入定位 133
8.1.1 子元素相對父元素定位 133
8.1.2 子元素相對祖先元素定位 136
8.2 z-index 屬性 138

第9 章 CSS 圖形 141
9.1 CSS 圖形簡介 141
9.2 三角形 142
9.2.1 CSS 實現三角形的原理 142
9.2.2 帶邊框的三角形 145
9.3 圓角與圓 148
9.3.1 border-radius 實現圓角 148
9.3.2 border-radius 實現半圓和圓 152
9.3.3 border-radius 的派生子屬性 154
9.4 橢圓 155
9.5 圖標製作 156

第 10 章 性能優化 164
10.1 CSS 優化簡介 164
從0 到1 系列圖書 目錄 3
10.2 屬性簡寫 165
10.2.1 盒模型簡寫 165
10.2.2 背景簡寫 167
10.2.3 字體簡寫 168
10.2.4 顏色值簡寫 168
10.3 語法壓縮 169
10.3.1 空白符 169
10.3.2 結尾分號 169
10.3.3 url() 的引號 170
10.3.4 屬性值為0 170
10.3.5 屬性值為“以0 開頭的小數” 171
10.3.6 合併相同的定義 171
10.3.7 利用繼承進行合併 172
10.4 壓縮工具 173
10.5 圖片壓縮 174
10.5.1 JPEG、PNG 和GIF 175
10.5.2 圖片壓縮 175
10.6 高性能選擇器 175
10.6.1 選擇器在瀏覽器中的解析原理 176
10.6.2 不同選擇器的解析速度 176

第 11 章 CSS 技巧 178
11.1 水平居中 178
11.1.1 文本的水平居中 178
11.1.2 元素的水平居中 179
11.2 垂直居中 183
11.2.1 文本的垂直居中 183
11.2.2 元素的垂直居中 185
11.3 CSS Sprite 188
11.4 iconfont 圖標 192
11.4.1 iconfont 網站 193
11.4.2 iconfont 技術 195

第 12 章 重要概念 202
12.1 CSS 中的重要概念 202
12.2 包含塊（containing block） 202
12.2.1 什麼是包含塊 202
12.2.2 包含塊的判定以及包含塊的範圍 203
12.3 層疊上下文（stacking context） 206
12.3.1 什麼是層疊上下文 207
12.3.2 什麼是層疊級別 207
12.3.3 層疊上下文的特點 208
12.4 BFC 和IFC 210
12.4.1 基本概念 210
12.4.2 什麼是BFC 211
12.4.3 BFC 的用途 213
附錄1 HTML 進階

第１3 章 基礎知識 222
13.1 HTML、XHTML 和HTML5 222
13.1.1 HTML 和XHTML 222
13.1.2 HTML5 223
13.2 div 和span 225
13.3 id 和class 226
13.3.1 id 屬性 226
13.3.2 class 屬性 226
13.4 瀏覽器標題欄小圖標 227

第 14 章 語義化 229
14.1 語義化簡介 229
14.2 標題語義化 231
14.3 圖片語義化 232
14.3.1 alt 屬性和title 屬性 233
14.3.2 figure 元素和figcaption 元素 233
14.4 表格語義化 236
14.5 表單語義化 239
14.5.1 label 標籤 239
從0 到4 1 系列圖書 目錄
14.5.2 fieldset 標籤和legend 標籤 241
14.6 其他語義化 242
14.6.1 換行符
242
14.6.2 無序列表ul 243
14.6.3 strong 標籤和em 標籤 244
14.6.4 del 標籤和ins 標籤 245
14.6.5 img 標籤 246
14.7 語義化驗證 246
14.8 HTML5 捨棄的標籤 248
附錄2 前端面試題
選擇題 251
問答題 257