從0到1 CSS進階之旅

《從0到1 CSS進階之旅》是2020年人民郵電出版社出版的圖書，作者是莫振傑。

基本介紹

• 中文名：從0到1 CSS進階之旅
• 作者：莫振傑
• 出版社：人民郵電出版社
• ISBN：9787115535900

內容簡介

《從0到1：CSS進階之旅》作者根據自己多年的前後端開發經驗，詳盡介紹了CSS的進階知識和高級開發技巧。

本書的正文部分共12章，分別講解了CSS的基礎知識、CSS規範、盒子模型、display屬性、文本效果、表單效果、浮動布局、定位布局、CSS圖形、性能最佳化、CSS技巧，以及CSS的一些重要概念。除了正文部分，本書還包括兩個附錄，附錄1介紹了HTML的進階知識，附錄2是作者結合實際工作和前端面試經驗，精心挑選的前端面試題。

本書還配備了所有案例的原始碼和PPT教學課件，以方便學校老師教學。本書適合作為前端開發人員的參考書，也可以作為大中專院校相關專業的教材及教學參考書。

圖書目錄

目錄

第　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