CSS核心技術詳解

CSS核心技術詳解

《CSS核心技術詳解》 一書作者肖志華,電子工業出版社2017年6月出版

內容提要

《CSS核心技術詳解》共分13章,第1章主要解答CSS中常見的問題,以及常用的技巧。第2~6章講解了CSS的核心技術,其中第2章是最為核心的內容,相對於其他章節理解起來會比較難一點。第3~6章主要介紹案例,配合第2章閱讀會輕鬆很多。《CSS核心技術詳解》每個章節都是獨立的,因此如果某些章節看不懂,可以暫且跳過,先閱讀其他章節。第7~13章講解關於CSS 3的內容。

《CSS核心技術詳解》內容精練、實例豐富、通俗易懂,可作為廣大CSS設計人員和前端開發人員的參考書,同時也非常適合大中專院校師生學習閱讀。

目錄

第1章 遇見未知的CSS / 1

1.1 在CSS中會遇到的問題 / 1

1.1.1 CSS層疊規則 / 3

1.1.2 CSS的命名 / 5

1.2 CSS的一些技巧 / 6

1.2.1 使用pointer-events控制滑鼠事件 / 6

1.2.2 玩轉CSS選擇器 / 8

1.2.3 利用padding實現元素等比例縮放 / 11

1.2.4 calc函式 / 14

1.3 隱藏元素 / 18

第2章 CSS核心概念 / 23

2.1 CSS解析規則 / 23

2.2 替換元素與非替換元素 / 28

2.3 屬性值的計算規則 / 28

2.4 可視化格式模型 / 30

2.5 包含塊 / 31

2.6 控制框 / 38

2.7 格式化上下文BFC、IFC / 40

2.7.1 從overflow清除浮動看BFC(塊格式化上下文) / 40

2.7.2 塊級格式化上下文BFC / 45

2.7.3 摺疊外邊距 / 54

2.7.4 行內格式化上下文IFC / 58

2.7.5 行高的計算 / 61

第3章 CSS單位究竟來自何方 / 67

3.1 百分比究竟為誰 / 67

3.2 探索auto密碼 / 82

3.3 設計回響式網頁rem / 93

3.4 vw、vh、vmin、vmax基於視口單位 / 97

3.5 什麼是ch / 102

3.6 min、max的巧妙運用 / 104

3.7 一個none引出的大學問 / 106

第4章 那些年我們一起定位過的元素 / 108

4.1 定位的特點 / 108

4.1.1 定位之absolute篇 / 109

4.1.2 定位之relative篇 / 113

4.1.3 當定位遇到定位 / 117

4.1.4 定位之fixed篇 / 121

4.1.5 偶遇定位bug,才知定位的真理 / 122

4.1.6 定位之static篇 / 129

4.2 透徹研究定位隱藏的秘密 / 130

4.3 總結 / 140

第5章 元素的七十二變——元素轉換 / 142

5.1 display介紹 / 142

5.2 大塊頭——block / 142

5.3 我們一起站一排——inline / 143

5.4 inline和block的結合體——inline-block / 149

5.5 行內和塊的煩惱 / 152

5.6 dispaly的一些其他屬性 / 155

5.7 總結 / 159

第6章 浮動趣事 / 160

6.1 浮動簡介 / 160

6.2 浮動的特點 / 161

6.3 浮動的秘密 / 167

6.4 實現任意形狀的文字環繞 / 173

6.5 總結 / 188

第7章 再不學這些選擇器就老了 / 189

7.1 那些被遺忘的選擇器 / 189

7.1.1 相鄰兄弟選擇器 / 189

7.1.2 利用hover實現一個下拉選單 / 192

7.1.3 利用active做一個集能量 / 194

7.1.4 用first-letter選中第一個字 / 195

7.1.5 用first-line選擇首行文字 / 197

7.2 模擬父級選擇器 / 199

7.3 強大的新選擇器 / 200

第8章 CSS圖示製作 / 210

8.1 隱藏在框線中的秘密 / 210

8.2 框線的煩惱 / 212

8.3 框線的孿生兄弟——outline / 215

8.4 純CSS圖示製作 / 220

第9章 你今天換背景了嗎 / 232

9.1 對背景屬性的深入探索 / 232

9.2 新增的背景功能 / 237

9.2.1 改變背景原點——background-origin / 237

9.2.2 背景裁剪——background-clip / 239

9.2.3 設定背景圖片大小——background-size / 243

9.3 總結 / 245

第10章 讓文字更美一些 / 246

10.1 製作非主流文字 / 247

10.2 新增的文字對齊屬性 / 250

10.2.1 文字兩端對齊 / 250

10.2.2 末尾文本對齊 / 252

10.2.3 文本書寫模式 / 257

10.3 關於文字的一些其他屬性 / 259

10.3.1 將超出寬度的文字隱藏 / 259

10.3.2 字母轉換大小寫 / 262

10.4 總結 / 263

第11章 內容生成技術——用CSS來計數 / 264

11.1 偽元素 / 264

11.2 CSS計數器 / 265

11.3 content的其他用途 / 272

11.4 總結 / 273

第12章 解決讓人頭疼的布局 / 274

12.1 製作可自適應的布局 / 274

12.1.1 左側固定、右側自適應的布局 / 274

12.1.2 右側固定、左側自適應的布局 / 276

12.1.3 多列文字垂直居中 / 278

12.2 利用伸縮盒模型進行布局 / 283

12.2.1 伸縮盒模型基礎 / 285

12.2.2 伸縮盒模型進階 / 296

12.2.3 伸縮盒模型實戰 / 299

第13章 飛越CSS / 303

13.1 CSS最佳實踐 / 303

13.2 純CSS的世界 / 307

13.2.1 利用checked選擇器實現tab切換 / 308

13.2.2 利用:target選擇器實現遮罩層效果 / 310

13.2.3 scaleY配合animation製作loading / 311

13.2.4 利用hover實現手風琴效果 / 313

13.2.5 利用checked選擇器製作星星評分 / 314

13.2.6 使用flex伸縮盒模型實現瀑布流布局 / 316

13.3 結束語 / 318

相關詞條

熱門詞條

聯絡我們