從0到1 CSS進(jìn)階之旅

目錄
第　1 章 基礎(chǔ)知識(shí)　1
1．1　CSS 進(jìn)階簡(jiǎn)介　1
1．1．1　你真的精通CSS 嗎　1
1．1．2　進(jìn)階教程簡(jiǎn)介　2
1．2　CSS 單位　3
1．2．1　絕對(duì)單位　3
1．2．2　相對(duì)單位　3
1．3　CSS 特性　11
1．3．1　繼承性　11
1．3．2　層疊性　13
1．4　CSS 優(yōu)先級(jí)　15
1．4．1　引用方式?jīng)_突　15
1．4．2　繼承方式?jīng)_突　16
1．4．3　指定樣式?jīng)_突　16
1．4．4　繼承樣式和指定樣式?jīng)_突　19
1．4．5　!important　20
1．5　CSS 引用方式　22
1．5．1　外部樣式表　23
1．5．2　內(nèi)部樣式表　23
1．5．3　行內(nèi)樣式表　24
1．6　CSS 選擇器　25
1．6．1　后代選擇器　26
1．6．2　子代選擇器　27
1．6．3　兄弟選擇器　28
1．6．4　相鄰選擇器　29
1．7?。篺irst-letter 和：first-line　32
1．7．1?。篺irst-letter 選擇器　32
1．7．2?。篺irst-line 選擇器　32
第　2 章 CSS 規(guī)范　34
2．1　CSS 規(guī)范簡(jiǎn)介　34
2．2　命名規(guī)范　34
2．2．1　CSS 文件命名　35
2．2．2　id 和class 命名　35
2．3　書寫規(guī)范　38
2．4　注釋規(guī)范　40
2．4．1　頂部注釋　40
2．4．2　模塊注釋　40
2．4．3　簡(jiǎn)單注釋　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　負(fù)margin 技術(shù)　54
3．5．1　負(fù)margin 簡(jiǎn)介　54
3．5．2　負(fù)margin 技巧　57
3．6　overflow　64
第4　章 display 屬性　67
4．1　塊元素和行內(nèi)元素　67
4．1．1　塊元素　67
4．1．2　行內(nèi)元素　68
從0　到2 1 系列圖書 目錄
4．2　display 簡(jiǎn)介　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 簡(jiǎn)介　72
4．3．2　display：none 和visibility：hidden 的
區(qū)別　73
4．4　display：table-cell　75
4．4．1　圖片垂直居中于元素　75
4．4．2　等高布局　77
4．4．3　自動(dòng)平均劃分元素　79
4．5　去除inline-block 元素間距　80
第5　章 文本效果　84
5．1　文本效果簡(jiǎn)介　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 屬性應(yīng)用　99
第6　章 表單效果　104
6．1　表單效果簡(jiǎn)介　104
6．2　深入radio 和checkbox　105
6．3　深入textarea　106
6．3．1　固定大小，禁用拖動(dòng)　106
6．3．2　在Chrome（或Firefox）和IE 中
實(shí)現(xiàn)相同的外觀　109
6．4　表單對(duì)齊　110
第7　章 浮動(dòng)布局　113
7．1　正常文檔流和脫離文檔流　113
7．1．1　正常文檔流　113
7．1．2　脫離文檔流　114
7．2　深入浮動(dòng)　116
7．3　浮動(dòng)的影響　118
7．3．1　對(duì)自身的影響　119
7．3．2　對(duì)父元素的影響　119
7．3．3　對(duì)兄弟元素的影響　121
7．3．4　對(duì)子元素的影響　125
7．4　浮動(dòng)的副作用　126
7．5　清除浮動(dòng)　128
7．5．1　clear：both　128
7．5．2　overflow：hidden　130
7．5．3?。海篴fter 偽元素　131
第8　章 定位布局　133
8．1　深入定位　133
8．1．1　子元素相對(duì)父元素定位　133
8．1．2　子元素相對(duì)祖先元素定位　136
8．2　z-index 屬性　138
第9　章 CSS 圖形　141
9．1　CSS 圖形簡(jiǎn)介　141
9．2　三角形　142
9．2．1　CSS 實(shí)現(xiàn)三角形的原理　142
9．2．2　帶邊框的三角形　145
9．3　圓角與圓　148
9．3．1　border-radius 實(shí)現(xiàn)圓角　148
9．3．2　border-radius 實(shí)現(xiàn)半圓和圓　152
9．3．3　border-radius 的派生子屬性　154
9．4　橢圓　155
9．5　圖標(biāo)制作　156
第　10 章 性能優(yōu)化　164
10．1　CSS 優(yōu)化簡(jiǎn)介　164
從0 到1 系列圖書 目錄　3
10．2　屬性簡(jiǎn)寫　165
10．2．1　盒模型簡(jiǎn)寫　165
10．2．2　背景簡(jiǎn)寫　167
10．2．3　字體簡(jiǎn)寫　168
10．2．4　顏色值簡(jiǎn)寫　168
10．3　語(yǔ)法壓縮　169
10．3．1　空白符　169
10．3．2　結(jié)尾分號(hào)　169
10．3．3　url() 的引號(hào)　170
10．3．4　屬性值為0　170
10．3．5　屬性值為“以0 開頭的小數(shù)”　171
10．3．6　合并相同的定義　171
10．3．7　利用繼承進(jìn)行合并　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 圖標(biāo)　192
11．4．1　iconfont 網(wǎng)站　193
11．4．2　iconfont 技術(shù)　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　什么是層疊級(jí)別　207
12．3．3　層疊上下文的特點(diǎn)　208
12．4　BFC 和IFC　210
12．4．1　基本概念　210
12．4．2　什么是BFC　211
12．4．3　BFC 的用途　213
附錄1　HTML 進(jìn)階
第１3　章 基礎(chǔ)知識(shí)　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　瀏覽器標(biāo)題欄小圖標(biāo)　227
第　14 章 語(yǔ)義化　229
14．1　語(yǔ)義化簡(jiǎn)介　229
14．2　標(biāo)題語(yǔ)義化　231
14．3　圖片語(yǔ)義化　232
14．3．1　alt 屬性和title 屬性　233
14．3．2　figure 元素和figcaption 元素　233
14．4　表格語(yǔ)義化　236
14．5　表單語(yǔ)義化　239
14．5．1　label 標(biāo)簽　239
從0　到4 1 系列圖書 目錄
14．5．2　fieldset 標(biāo)簽和legend 標(biāo)簽　241
14．6　其他語(yǔ)義化　242
14．6．1　換行符
　242
14．6．2　無序列表ul　243
14．6．3　strong 標(biāo)簽和em 標(biāo)簽　244
14．6．4　del 標(biāo)簽和ins 標(biāo)簽　245
14．6．5　img 標(biāo)簽　246
14．7　語(yǔ)義化驗(yàn)證　246
14．8　HTML5 舍棄的標(biāo)簽　248
附錄2　前端面試題
選擇題　251
問答題　257