《CSS世界》電子書,建議儲存下來

書籍簡介

《CSS世界》電子書,建議儲存下來

CSS世界

作者

: 張鑫旭

出版社:

人民郵電出版社

出版年:

2017-12

頁數:

328

定價:

CNY 69。00

裝幀:

平裝

ISBN:

9787115470669

獲取方法

關注微信公眾號:

申霖

,傳送:

0929

目錄· · · · · ·

第 1章概述 1

1.1 CSS世界的“世界觀” 1

1.2 世界都是創造出來的 3

1.3 CSS完勝SVG的武器—流 4

1.3.1 何為“流” 5

1.3.2流是如何影響整個CSS世界的 6

1.3.3 什麼是流體佈局 6

1.4 CSS世界的開啟從IE8開始 6

1.5 table自己的世界 7

1.6 CSS新世界—CSS3 7

第 2章需提前瞭解的術語和概念 8

2.1 務必瞭解的CSS世界的專業術語 8

2.2 瞭解CSS世界中的“未定義行為” 11

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

3.1 塊級元素 13

3.1.1 為什麼list-item元素會出現專案符號 15

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

3.1.3 width/height作用在哪個盒子上 16

3.2 width/height作用的具體細節 16

3.2.1 深藏不露的width:auto 17

3.2.2 width值作用的細節 24

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

3.2.4 改變width/height作用細節的box-sizing 29

3.2.5 相對簡單而單純的height:auto 33

3.2.6 關於height:100% 33

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

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

3.3.2 與眾不同的初始值 38

3.3.3 超越!important 39

3.3.4 任意高度元素的展開收起動畫技術 40

3.4 內聯元素 42

3.4.1 哪些元素是內聯元素 42

3.4.2 內聯世界深入的基礎—內聯盒模型 42

3.4.3 幽靈空白節點 44

第4章盒尺寸四大家族 45

4.1 深入理解content 45

4.1.1 content與替換元素 45

4.1.2 content內容生成技術 57

4.2 溫和的padding屬性 73

4.2.1 padding與元素的尺寸 73

4.2.2 padding的百分比值 77

4.2.3 標籤元素內建的padding 79

4.2.4 padding與圖形繪製 80

4.3 激進的margin屬性 81

4.3.1 margin與元素尺寸以及相關佈局 82

4.3.2 margin的百分比值 87

4.3.3 正確看待CSS世界裡的margin合併 87

4.3.4 深入理解CSS中的margin:auto 94

4.3.5 margin無效情形解析 97

4.4 border屬性 100

4.4.1 為什麼border-width不支援百分比值 100

4.4.2 瞭解各種border-style型別 101

4.4.3 border-color和color 105

4.4.4 border與透明邊框技巧 106

4.4.5 border與圖形構建 108

4.4.6 border等高佈局技術 109

第5章內聯元素與流 111

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

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

5.1.2 字母x與CSS中的x-height 112

5.1.3 字母x與CSS中的ex 113

5.2 內聯元素的基石line-height 114

5.2.1 內聯元素的高度之本—line-height 114

5.2.2 為什麼line-height可以讓內聯元素“垂直居中” 119

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

5.2.4 內聯元素line-height的“大值特性” 124

5.3 line-height的好朋友vertical-align 126

5.3.1 vertical-align家族基本認識 127

5.3.2 vertical-align作用的前提 129

5.3.3 vertical-align和line-height之間的關係 131

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

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

5.3.6 簡單瞭解vertical-align上標下標類屬性值 142

5.3.7 無處不在的vertical-align 143

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

第6章流的破壞與保護 147

6.1 魔鬼屬性float 147

6.1.1 float的本質與特性 147

6.1.2 float的作用機制 151

6.1.3 float更深入的作用機制 154

6.1.4 float與流體佈局 155

6.2 float的天然剋星clear 157

6.2.1 什麼是clear屬性 157

6.2.2 成事不足敗事有餘的clear 158

6.3 CSS世界的結界—BFC 160

6.3.1 BFC的定義 160

6.3.2 BFC與流體佈局 160

6.4 結界overflow 164

6.4.1 overflow剪裁界線border box 165

6.4.2 瞭解overflow-x和overflow-y 166

6.4.3 overflow與捲軸 166

6.4.4 依賴overflow的樣式表現 169

6.4.5 overflow與錨點定位 170

6.5 float的兄弟position:absolute 177

6.5.1 absolute的包含塊 178

6.5.2 具有相對特性的無依賴absolute定位 184

6.5.3 absolute與text-align 191

6.6 absolute與overflow 193

6.7 absolute與clip 195

6.7.1 重新認識的clip屬性 196

6.7.2 深入瞭解clip的渲染 198

6.8 absolute的流體特性 199

6.8.1 當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對absolute的限制 203

6.9.2 relative與定位 203

6.9.3 relative的zui小化影響原則 206

6.10 強悍的position:fixed固定定位 207

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

6.10.2 position:fixed的absolute模擬 208

6.10.3 position:fixed與背景鎖定 209

第7章CSS世界的層疊規則 211

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

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

7.2.1 什麼是層疊上下文 212

7.2.2 什麼是層疊水平 212

7.3 理解元素的層疊順序 212

7.4 務必牢記的層疊準則 214

7.5 深入瞭解層疊上下文 214

7.5.1 層疊上下文的特性 214

7.5.2 層疊上下文的建立 214

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

7.6 z-index負值深入理解 219

7.7 z-index“不犯二”準則 223

第8章強大的文字處理能力 225

8.1 line-height的另外一個朋友font-size 225

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

8.1.2 理解font-size與ex、em和rem的關係 227

8.1.3 理解font-size的關鍵字屬性值 229

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

8.2 字型屬性家族的大家長font-family 232

8.2.1 瞭解襯線字型和無襯線字型 233

8.2.2 等寬字型的實踐價值 234

8.2.3 中文字型和英文名稱 236

8.2.4 一些補充說明 237

8.3 字型家族其他成員 238

8.3.1 貌似粗獷、實則精細無比的font-weight 238

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

8.3.3 不適合國情的font-variant 242

8.4 font屬性 242

8.4.1 作為縮寫的font屬性 242

8.4.2 使用關鍵字值的font屬性 243

8.4.3 font關鍵字屬性值的應用價值 246

8.5 真正瞭解@font face規則 247

8.5.1 @font face的本質是變數 247

8.5.2 @font face與字型圖示技術 255

8.6 文字的控制 258

8.6.1 text-indent與內聯元素縮排 258

8.6.2 letter-spacing與字元間距 261

8.6.3 word-spacing與單詞間距 263

8.6.4 瞭解word-break和word-wrap的區別 264

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

8.6.6 text-align與元素對齊 267

8.6.7 如何解決text-decoration下劃線和文字重疊的問題 271

8.6.8 一本萬利的text-transform字元大小寫 273

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

8.7.1 深入:first-letter偽元素及其例項 274

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

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

9.1 CSS世界的color很單調 280

9.1.1 少得可憐的顏色關鍵字 280

9.1.2 不支援的transparent關鍵字 282

9.1.3 不支援的currentColor變數 282

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

9.1.5 支援卻雞肋的系統顏色 283

9.2 CSS世界的background很單調 285

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

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

9.2.3 background-repeat與渲染效能 287

9.2.4 外強中乾的background-attachment:fixed 288

9.2.5 background-color背景色永遠是很低的 289

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

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

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

10.1 display與元素的顯隱 294

10.2 visibility與元素的顯隱 296

10.2.1 不僅僅是保留空間這麼簡單 296

10.2.2 瞭解visibility:collapse 301

第 11章使用者介面樣式 302

11.1 和border形似的outline屬性 302

11.1.1 萬萬不可在全域性設定outline:0 none 302

11.1.2 真正的不佔據空間的outline及其應用 304

11.2 游標屬性cursor 307

11.2.1 琳琅滿目的cursor屬性值 307

11.2.2 自定義游標 314

第 12章流向的改變 315

12.1 改變水平流向的direction 315

12.1.1 direction簡介 315

12.1.2 direction的黃金搭檔unicode-bidi 318

12.2 改變CSS世界縱橫規則的writing-mode 320

12.2.1 writing-mode原本的作用 321

12.2.2 writing-mode不經意改變了哪些規則 324

12.2.3 writing-mode和direction的關係 328