目　錄

第 1章　概述1

1.1 CSS世界的世界觀1

1.2 世界都是創(chuàng)造出來(lái)的3

1.3 CSS完勝SVG的武器流4

1.3.1 何為流5

1.3.2　流是如何影響整個(gè)CSS世界的6

1.3.3 什么是流體布局6

1.4 CSS世界的開(kāi)啟從IE8開(kāi)始6

1.5 table自己的世界7

1.6 CSS新世界CSS37

第 2章　需提前了解的術(shù)語(yǔ)和概念8

2.1 務(wù)必了解的CSS世界的專業(yè)術(shù)語(yǔ)8

2.2 了解CSS世界中的未定義行為11

第3章　流、元素與基本尺寸13

3.1 塊級(jí)元素13

3.1.1 為什么list-item元素會(huì)出現(xiàn)項(xiàng)目符號(hào)15

3.1.2 display:inline-table的盒子是怎樣組成的16

3.1.3 width/height作用在哪個(gè)盒子上16

3.2 width/height作用的具體細(xì)節(jié)16

3.2.1 深藏不露的width:auto17

3.2.2 width值作用的細(xì)節(jié)24

3.2.3 CSS流體布局下的寬度分離原則27

3.2.4 改變width/height作用細(xì)節(jié)的box-sizing29

3.2.5 相對(duì)簡(jiǎn)單而單純的height:auto33

3.2.6 關(guān)于height:100%33

3.3 CSS min-width/max-width和min-height/max-height二三事37

3.3.1 為流體而生的min-width/max-width38

3.3.2 與眾不同的初始值38

3.3.3 超越!important39

3.3.4 任意高度元素的展開(kāi)收起動(dòng)畫技術(shù)40

3.4 內(nèi)聯(lián)元素42

3.4.1 哪些元素是內(nèi)聯(lián)元素42

3.4.2 內(nèi)聯(lián)世界深入的基礎(chǔ)內(nèi)聯(lián)盒模型42

3.4.3 幽靈空白節(jié)點(diǎn)44

第4章　盒尺寸四大家族45

4.1 深入理解content45

4.1.1 content與替換元素45

4.1.2 content內(nèi)容生成技術(shù)57

4.2 溫和的padding屬性73

4.2.1 padding與元素的尺寸73

4.2.2 padding的百分比值77

4.2.3 標(biāo)簽元素內(nèi)置的padding79

4.2.4 padding與圖形繪制80

4.3 激進(jìn)的margin屬性81

4.3.1 margin與元素尺寸以及相關(guān)布局82

4.3.2 margin的百分比值87

4.3.3 正確看待CSS世界里的margin合并87

4.3.4 深入理解CSS中的margin:auto94

4.3.5 margin無(wú)效情形解析97

4.4 border屬性100

4.4.1 為什么border-width不支持百分比值100

4.4.2 了解各種border-style類型101

4.4.3 border-color和color105

4.4.4 border與透明邊框技巧106

4.4.5 border與圖形構(gòu)建108

4.4.6 border等高布局技術(shù)109

第5章　內(nèi)聯(lián)元素與流111

5.1 字母xCSS世界中隱匿的舉足輕重的角色111

5.1.1 字母x與CSS世界的基線111

5.1.2 字母x與CSS中的x-height112

5.1.3 字母x與CSS中的ex113

5.2 內(nèi)聯(lián)元素的基石line-height114

5.2.1 內(nèi)聯(lián)元素的高度之本line-height114

5.2.2 為什么line-height可以讓內(nèi)聯(lián)元素垂直居中119

5.2.3 深入line-height的各類屬性值121

5.2.4 內(nèi)聯(lián)元素line-height的大值特性124

5.3 line-height的好朋友vertical-align126

5.3.1 vertical-align家族基本認(rèn)識(shí)127

5.3.2 vertical-align作用的前提129

5.3.3 vertical-align和line-height之間的關(guān)系131

5.3.4 深入理解vertical-align線性類屬性值135

5.3.5 深入理解vertical-align文本類屬性值141

5.3.6 簡(jiǎn)單了解vertical-align上標(biāo)下標(biāo)類屬性值142

5.3.7 無(wú)處不在的vertical-align143

5.3.8 基于vertical-align屬性的水平垂直居中彈框144

第6章　流的破壞與保護(hù)147

6.1 魔鬼屬性float147

6.1.1 float的本質(zhì)與特性147

6.1.2 float的作用機(jī)制151

6.1.3 float更深入的作用機(jī)制154

6.1.4 float與流體布局155

6.2 float的天然克星clear157

6.2.1 什么是clear屬性157

6.2.2 成事不足敗事有余的clear158

6.3 CSS世界的結(jié)界BFC160

6.3.1 BFC的定義160

6.3.2 BFC與流體布局160

6.4 結(jié)界overflow164

6.4.1 overflow剪裁界線border box165

6.4.2 了解overflow-x和overflow-y166

6.4.3 overflow與滾動(dòng)條166

6.4.4 依賴overflow的樣式表現(xiàn)169

6.4.5 overflow與錨點(diǎn)定位170

6.5 float的兄弟position:absolute177

6.5.1 absolute的包含塊178

6.5.2 具有相對(duì)特性的無(wú)依賴absolute定位184

6.5.3 absolute與text-align191

6.6 absolute與overflow193

6.7 absolute與clip195

6.7.1 重新認(rèn)識(shí)的clip屬性196

6.7.2 深入了解clip的渲染198

6.8 absolute的流體特性199

6.8.1 當(dāng)absolute遇到left/top/right/bottom屬性199

6.8.2 absolute的流體特性200

6.8.3 absolute的margin:auto居中202

6.9 position:relative才是大哥202

6.9.1 relative對(duì)absolute的限制203

6.9.2 relative與定位203

6.9.3 relative的zui小化影響原則206

6.10 強(qiáng)悍的position:fixed固定定位207

6.10.1 position:fixed不一樣的包含塊207

6.10.2 position:fixed的absolute模擬208

6.10.3 position:fixed與背景鎖定209

第7章　CSS世界的層疊規(guī)則211

7.1 z-index只是CSS層疊規(guī)則中的一葉小舟211

7.2 理解CSS世界的層疊上下文和層疊水平212

7.2.1 什么是層疊上下文212

7.2.2 什么是層疊水平212

7.3 理解元素的層疊順序212

7.4 務(wù)必牢記的層疊準(zhǔn)則214

7.5 深入了解層疊上下文214

7.5.1 層疊上下文的特性214

7.5.2 層疊上下文的創(chuàng)建214

7.5.3 層疊上下文與層疊順序217

7.6 z-index負(fù)值深入理解219

7.7 z-index不犯二準(zhǔn)則223

第8章　強(qiáng)大的文本處理能力225

8.1 line-height的另外一個(gè)朋友font-size225

8.1.1 font-size和vertical-align的隱秘故事225

8.1.2 理解font-size與ex、em和rem的關(guān)系227

8.1.3 理解font-size的關(guān)鍵字屬性值229

8.1.4 font-size:0與文本的隱藏231

8.2 字體屬性家族的大家長(zhǎng)font-family232

8.2.1 了解襯線字體和無(wú)襯線字體233

8.2.2 等寬字體的實(shí)踐價(jià)值234

8.2.3 中文字體和英文名稱236

8.2.4 一些補(bǔ)充說(shuō)明237

8.3 字體家族其他成員238

8.3.1 貌似粗獷、實(shí)則精細(xì)無(wú)比的font-weight238

8.3.2 具有近似姐妹花屬性值的font-style241

8.3.3 不適合國(guó)情的font-variant242

8.4 font屬性242

8.4.1 作為縮寫的font屬性242

8.4.2 使用關(guān)鍵字值的font屬性243

8.4.3 font關(guān)鍵字屬性值的應(yīng)用價(jià)值246

8.5 真正了解@font face規(guī)則247

8.5.1 @font face的本質(zhì)是變量247

8.5.2 @font face與字體圖標(biāo)技術(shù)255

8.6 文本的控制258

8.6.1 text-indent與內(nèi)聯(lián)元素縮進(jìn)258

8.6.2 letter-spacing與字符間距261

8.6.3 word-spacing與單詞間距263

8.6.4 了解word-break和word-wrap的區(qū)別264

8.6.5 white-space與換行和空格的控制265

8.6.6 text-align與元素對(duì)齊267

8.6.7 如何解決text-decoration下劃線和文本重疊的問(wèn)題271

8.6.8 一本萬(wàn)利的text-transform字符大小寫273

8.7 了解:first-letter/:first-line偽元素274

8.7.1 深入:first-letter偽元素及其實(shí)例274

8.7.2 故事相對(duì)較少的:first-line偽元素277

第9章　元素的裝飾與美化280

9.1 CSS世界的color很單調(diào)280

9.1.1 少得可憐的顏色關(guān)鍵字280

9.1.2 不支持的transparent關(guān)鍵字282

9.1.3 不支持的currentColor變量282

9.1.4 不支持的rgba顏色和hsla顏色282

9.1.5 支持卻雞肋的系統(tǒng)顏色283

9.2 CSS世界的background很單調(diào)285

9.2.1 隱藏元素的background-image到底加不加載285

9.2.2 與眾不同的background-position百分比計(jì)算方式286

9.2.3 background-repeat與渲染性能287

9.2.4 外強(qiáng)中干的background-attachment:fixed288

9.2.5 background-color背景色永遠(yuǎn)是很低的289

9.2.6 利用多背景的屬性hack小技巧290

9.2.7 漸變背景和rgba背景色的兼容處理290

第 10章　元素的顯示與隱藏292

10.1 display與元素的顯隱294

10.2 visibility與元素的顯隱296

10.2.1 不僅僅是保留空間這么簡(jiǎn)單296

10.2.2 了解visibility:collapse301

第 11章　用戶界面樣式302

11.1 和border形似的outline屬性302

11.1.1 萬(wàn)萬(wàn)不可在全局設(shè)置outline:0 none302

11.1.2 真正的不占據(jù)空間的outline及其應(yīng)用304

11.2 光標(biāo)屬性cursor307

11.2.1 琳瑯滿目的cursor屬性值307

11.2.2 自定義光標(biāo)314

第 12章　流向的改變315

12.1 改變水平流向的direction315

12.1.1 direction簡(jiǎn)介315

12.1.2 direction的黃金搭檔unicode-bidi318

12.2 改變CSS世界縱橫規(guī)則的writing-mode320

12.2.1 writing-mode原本的作用321

12.2.2 writing-mode不經(jīng)意改變了哪些規(guī)則324

12.2.3 writing-mode和direction的關(guān)系328