IT工程師數位筆記本

前言

看似簡單的CSS，卻暗藏玄機，那是我們摸爬滾打好長時間后悟出的真理。

在很長的一段時間里，我并沒有重視CSS，覺得CSS很簡單，無非就是一些屬性；后來才發現自己小看了CSS，對CSS的了解實在是太少，尤其是對其核心概念的理解太模糊，實際上它有很多神奇的地方并不為大家所知。對于一個新手來說，只知道一些理論但在實際開發中不會使用是不行的，于是筆者萌生了寫作本書的最初想法。

市面上介紹CSS基礎的書已經有很多了，已經沒有必要再去重復，但是一些核心的內容還是很有必要寫出來的，因為我發現很多前端朋友對CSS都不太重視。我認為做前端的技術人員不僅要掌握好CSS的核心內容，還要懂得怎樣把這些內容靈活運用到實際開發中。如果對一門技術只停留在了解的層面而不會使用，那和不會有什么區別？所以本書將實用放在第一位，大量的例子都來自于我在實際開發中所遇到的問題，將這些實際的例子拿來講解才更有說服力，同時也更易于讀者的理解。

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

本書舉例時用到了很多關于CSS 3的屬性，所以讀者在測試時需要使用高級瀏覽器，這里推薦使用Chrome瀏覽器，書中的例子主要也是在Chrome瀏覽器中測試的。另外本書并不會過多地講解兼容性問題，因為花太多時間討論兼容性是不太值得的。書中有一些個人看法，由于才疏學淺，不免會有疏漏。如果發現錯誤，還請指出，不吝賜教，在此深表謝意，可發郵件至c776@foxmail.com郵箱，一定一一回復并樂此不疲，因為這是我的工作，和你們交流也是我的快樂。

目錄

第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

試讀

遇見未知的CSS

購買可到京東或者當當