看似簡(jiǎn)單的CSS，卻暗藏玄機(jī)，那是我們摸爬滾打好長(zhǎng)時(shí)間后悟出的真理。
在很長(zhǎng)的一段時(shí)間里，我并沒有重視CSS，覺得CSS很簡(jiǎn)單，無非就是一些屬性；后來才發(fā)現(xiàn)自己小看了CSS，對(duì)CSS的了解實(shí)在是太少，尤其是對(duì)其核心概念的理解太模糊，實(shí)際上它有很多神奇的地方并不為大家所知。對(duì)于一個(gè)新手來說，只知道一些理論但在實(shí)際開發(fā)中不會(huì)使用是不行的，于是筆者萌生了寫作本書的最初想法。
市面上介紹CSS基礎(chǔ)的書已經(jīng)有很多了，已經(jīng)沒有必要再去重復(fù)，但是一些核心的內(nèi)容還是很有必要寫出來的，因?yàn)槲野l(fā)現(xiàn)很多前端朋友對(duì)CSS都不太重視。我認(rèn)為做前端的技術(shù)人員不僅要掌握好CSS的核心內(nèi)容，還要懂得怎樣把這些內(nèi)容靈活運(yùn)用到實(shí)際開發(fā)中。如果對(duì)一門技術(shù)只停留在了解的層面而不會(huì)使用，那和不會(huì)有什么區(qū)別？所以本書將實(shí)用放在第一位，大量的例子都來自于我在實(shí)際開發(fā)中所遇到的問題，將這些實(shí)際的例子拿來講解才更有說服力，同時(shí)也更易于讀者的理解。
本書共分13章，第1章主要解答CSS中常見的問題，以及常用的技巧。第2～6章講解了CSS的核心技術(shù)，其中第2章是最為核心的內(nèi)容，相對(duì)于其他章節(jié)理解起來會(huì)比較難一點(diǎn)。第3～6章主要介紹案例，每個(gè)代碼片段都有一些案例，配合第2章閱讀會(huì)輕松很多。本書每個(gè)章節(jié)都是獨(dú)立的，因此如果某些章節(jié)看不懂，可以暫且跳過，先閱讀其他章節(jié)。第7~13章講解關(guān)于CSS3的內(nèi)容。
本書舉例時(shí)用到了很多關(guān)于CSS3的屬性，所以讀者在測(cè)試時(shí)需要使用高級(jí)瀏覽器，這里推薦使用Chrome瀏覽器，書中的例子主要也是在Chrome瀏覽器中測(cè)試的。另外本書并不會(huì)過多地講解兼容性問題，因?yàn)榛ㄌ鄷r(shí)間討論兼容性是不太值得的。書中有一些個(gè)人看法，由于才疏學(xué)淺，不免會(huì)有疏漏。如果發(fā)現(xiàn)錯(cuò)誤，還請(qǐng)指出，不吝賜教，在此深表謝意，可發(fā)郵件至c776@foxmail.com郵箱，一定一一回復(fù)并樂此不疲，因?yàn)檫@是我的工作，和你們交流也是我的快樂。
本書的出版要特別感謝電子工業(yè)出版社的黃愛萍和張童編輯，感謝他們?cè)谶x題策劃和書稿編輯方面做出的大量工作，同時(shí)對(duì)伯樂在線黃利民大哥的大力支持深表謝意。
肖志華
2017年3月28日
第1章 遇見未知的CSS / 1
1.1 在CSS中會(huì)遇到的問題 / 1
1.1.1 CSS層疊規(guī)則 / 3
1.1.2 CSS的命名 / 5
1.2 CSS的一些技巧 / 6
1.2.1 使用pointer-events控制鼠標(biāo)事件 / 6
1.2.2 玩轉(zhuǎn)CSS選擇器 / 8
1.2.3 利用padding實(shí)現(xiàn)元素等比例縮放 / 11
1.2.4 calc函數(shù) / 14
1.3 隱藏元素 / 18
第2章 CSS核心概念 / 23
2.1 CSS解析規(guī)則 / 23
2.2 替換元素與非替換元素 / 28
2.3 屬性值的計(jì)算規(guī)則 / 28
2.4 可視化格式模型 / 30
2.5 包含塊 / 31
2.6 控制框 / 38
2.7 格式化上下文BFC、IFC / 40
2.7.1 從overflow清除浮動(dòng)看BFC（塊格式化上下文） / 40
2.7.2 塊級(jí)格式化上下文BFC / 45
2.7.3 折疊外邊距 / 54
2.7.4 行內(nèi)格式化上下文IFC / 58
2.7.5 行高的計(jì)算 / 61
第3章 CSS單位究竟來自何方 / 67
3.1 百分比究竟為誰 / 67
3.2 探索auto密碼 / 82
3.3 設(shè)計(jì)響應(yīng)式網(wǎng)頁rem / 93
3.4 vw、vh、vmin、vmax基于視口單位 / 97
3.5 什么是ch / 102
3.6 min、max的巧妙運(yùn)用 / 104
3.7 一個(gè)none引出的大學(xué)問 / 106
第4章 那些年我們一起定位過的元素 / 108
4.1 定位的特點(diǎn) / 108
4.1.1 定位之a(chǎn)bsolute篇 / 109
4.1.2 定位之relative篇 / 113
4.1.3 當(dāng)定位遇到定位 / 117
4.1.4 定位之fixed篇 / 121
4.1.5 偶遇定位bug，才知定位的真理 / 122
4.1.6 定位之static篇 / 129
4.2 透徹研究定位隱藏的秘密 / 130
4.3 總結(jié) / 140
第5章 元素的七十二變——元素轉(zhuǎn)換 / 142
5.1 display介紹 / 142
5.2 大塊頭——block / 142
5.3 我們一起站一排——inline / 143
5.4 inline和block的結(jié)合體——inline-block / 149
5.5 行內(nèi)和塊的煩惱 / 152
5.6 dispaly的一些其他屬性 / 155
5.7 總結(jié) / 159
第6章 浮動(dòng)趣事 / 160
6.1 浮動(dòng)簡(jiǎn)介 / 160
6.2 浮動(dòng)的特點(diǎn) / 161
6.3 浮動(dòng)的秘密 / 167
6.4 實(shí)現(xiàn)任意形狀的文字環(huán)繞 / 173
6.5 總結(jié) / 188
第7章 再不學(xué)這些選擇器就老了 / 189
7.1 那些被遺忘的選擇器 / 189
7.1.1 相鄰兄弟選擇器 / 189
7.1.2 利用hover實(shí)現(xiàn)一個(gè)下拉菜單 / 192
7.1.3 利用active做一個(gè)集能量 / 194
7.1.4 用first-letter選中第一個(gè)字 / 195
7.1.5 用first-line選擇首行文字 / 197
7.2 模擬父級(jí)選擇器 / 199
7.3 強(qiáng)大的新選擇器 / 200
第8章 CSS圖標(biāo)制作 / 210
8.1 隱藏在邊框中的秘密 / 210
8.2 邊框的煩惱 / 212
8.3 邊框的孿生兄弟——outline / 215
8.4 純CSS圖標(biāo)制作 / 220
第9章 你今天換背景了嗎 / 232
9.1 對(duì)背景屬性的深入探索 / 232
9.2 新增的背景功能 / 237
9.2.1 改變背景原點(diǎn)——background-origin / 237
9.2.2 背景裁剪——background-clip / 239
9.2.3 設(shè)置背景圖片大小——background-size / 243
9.3 總結(jié) / 245
第10章 讓文字更美一些 / 246
10.1 制作非主流文字 / 247
10.2 新增的文字對(duì)齊屬性 / 250
10.2.1 文字兩端對(duì)齊 / 250
10.2.2 末尾文本對(duì)齊 / 252
10.2.3 文本書寫模式 / 257
10.3 關(guān)于文字的一些其他屬性 / 259
10.3.1 將超出寬度的文字隱藏 / 259
10.3.2 字母轉(zhuǎn)換大小寫 / 262
10.4 總結(jié) / 263
第11章 內(nèi)容生成技術(shù)——用CSS來計(jì)數(shù) / 264
11.1 偽元素 / 264
11.2 CSS計(jì)數(shù)器 / 265
11.3 content的其他用途 / 272
11.4 總結(jié) / 273
第12章 解決讓人頭疼的布局 / 274
12.1 制作可自適應(yīng)的布局 / 274
12.1.1 左側(cè)固定、右側(cè)自適應(yīng)的布局 / 274
12.1.2 右側(cè)固定、左側(cè)自適應(yīng)的布局 / 276
12.1.3 多列文字垂直居中 / 278
12.2 利用伸縮盒模型進(jìn)行布局 / 283
12.2.1 伸縮盒模型基礎(chǔ) / 285
12.2.2 伸縮盒模型進(jìn)階 / 296
12.2.3 伸縮盒模型實(shí)戰(zhàn) / 299
第13章 飛越CSS / 303
13.1 CSS最佳實(shí)踐 / 303
13.2 純CSS的世界 / 307
13.2.1 利用checked選擇器實(shí)現(xiàn)tab切換 / 308
13.2.2 利用:target選擇器實(shí)現(xiàn)遮罩層效果 / 310
13.2.3 scaleY配合animation制作loading / 311
13.2.4 利用hover實(shí)現(xiàn)手風(fēng)琴效果 / 313
13.2.5 利用checked選擇器制作星星評(píng)分 / 314
13.2.6 使用flex伸縮盒模型實(shí)現(xiàn)瀑布流布局 / 316
13.3 結(jié)束語 / 318
新書資訊