掃一掃
關(guān)注中圖網(wǎng)
官方微博
CSS世界 版權(quán)信息
- ISBN：9787115470669
- 條形碼：9787115470669 ; 978-7-115-47066-9
- 裝幀：暫無
- 冊數(shù)：暫無
- 重量：暫無
- 所屬分類：>>
CSS世界 本書特色
本書從前端開發(fā)人員的需求出發(fā)，以“流”為線索，從結(jié)構(gòu)、內(nèi)容到美化裝飾等方面，全面且深入地講解前端開發(fā)人員必須了解和掌握的大量的CSS知識點(diǎn)。同時(shí)，作者結(jié)合多年的從業(yè)經(jīng)驗(yàn)，通過大量的實(shí)戰(zhàn)案例，詳盡解析CSS的相關(guān)知識與常見問題。作者還為本書開發(fā)了專門的配套網(wǎng)站，進(jìn)行實(shí)例展示、問題答疑。 作為一本CSS深度學(xué)習(xí)的書，書中介紹大量許多前端開發(fā)人員都不知道的CSS知識點(diǎn)。通過閱讀本書，讀者會(huì)對CSS世界的深度和廣度有一個(gè)全新的認(rèn)識。
CSS世界 內(nèi)容簡介
- 茫茫星海中鯨魚永不犯錯(cuò)的航行， - 那是因?yàn)橛行浅降闹敢?- 蕓蕓CSS世界中想要不斷突破瓶頸， - 需要有本書的指引。 CSS入門簡單深入難，無數(shù)人遇到“天花板”，本書是打破能力上升瓶頸之作。 前端開發(fā)行業(yè)潛心近10年一直研究看似簡單的CSS的人可謂是鳳毛麟角，作者從2009年開始寫原創(chuàng)技術(shù)文章，現(xiàn)在其博客已經(jīng)成為國內(nèi)訪問量巨大的個(gè)人前端博客之一，可以說眾多前端初學(xué)者是看著作者的博客成長的。 本書幾乎所有內(nèi)容都是經(jīng)過作者自我思考和認(rèn)知提煉后的產(chǎn)物，都是其他地方難得一見的“干貨”。本書不會(huì)像傳統(tǒng)書籍一樣，一個(gè)知識點(diǎn)就是一節(jié)，因?yàn)镃SS的各個(gè)屬性的表現(xiàn)和行為相互間是參雜在一起的，很難一個(gè)一個(gè)分開，為了把錯(cuò)綜復(fù)雜的CSS知識點(diǎn)講好，本書以獨(dú)特的“世界觀”的視角去看待CSS。 為了拓展和更直觀演示各個(gè)特性的效果，書中每個(gè)案例都有對應(yīng)的在線demo演示頁面，以二維碼形式放在書中，方便讀者掃碼查看，快速體驗(yàn)。
CSS世界 目錄
目 錄
第 1章 概述 1
1.1 CSS世界的“世界觀” 1
1.2 世界都是創(chuàng)造出來的 3
1.3 CSS完勝SVG的武器—流 4
1.3.1 何為“流” 5
1.3.2 流是如何影響整個(gè)CSS世界的 6
1.3.3 什么是流體布局 6
1.4 CSS世界的開啟從IE8開始 6
1.5 table自己的世界 7
1.6 CSS新世界—CSS3 7
第 2章 需提前了解的術(shù)語和概念 8
2.1 務(wù)必了解的CSS世界的專業(yè)術(shù)語 8
2.2 了解CSS世界中的“未定義行為” 11
第3章 流、元素與基本尺寸 13
3.1 塊級元素 13
3.1.1 為什么list-item元素會(huì)出現(xiàn)項(xiàng)目符號 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:auto 17
3.2.2 width值作用的細(xì)節(jié) 24
3.2.3 CSS流體布局下的寬度分離原則 27
3.2.4 改變width/height作用細(xì)節(jié)的box-sizing 29
3.2.5 相對簡單而單純的height:auto 33
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-width 38
3.3.2 與眾不同的初始值 38
3.3.3 超越!important 39
3.3.4 任意高度元素的展開收起動(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 深入理解content 45
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)置的padding 79
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: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與圖形構(gòu)建 108
4.4.6 border等高布局技術(shù) 109
第5章 內(nèi)聯(lián)元素與流 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 內(nèi)聯(lián)元素的基石line-height 114
5.2.1 內(nèi)聯(lián)元素的高度之本—line-height 114
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-align 126
5.3.1 vertical-align家族基本認(rèn)識 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 簡單了解vertical-align上標(biāo)下標(biāo)類屬性值 142
5.3.7 無處不在的vertical-align 143
5.3.8 基于vertical-align屬性的水平垂直居中彈框 144
第6章 流的破壞與保護(hù) 147
6.1 魔鬼屬性float 147
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的天然克星clear 157
6.2.1 什么是clear屬性 157
6.2.2 成事不足敗事有余的clear 158
6.3 CSS世界的結(jié)界—BFC 160
6.3.1 BFC的定義 160
6.3.2 BFC與流體布局 160
6.4 結(jié)界overflow 164
6.4.1 overflow剪裁界線border box 165
6.4.2 了解overflow-x和overflow-y 166
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: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 重新認(rèn)識的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對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-size 225
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 字體屬性家族的大家長font-family 232
8.2.1 了解襯線字體和無襯線字體 233
8.2.2 等寬字體的實(shí)踐價(jià)值 234
8.2.3 中文字體和英文名稱 236
8.2.4 一些補(bǔ)充說明 237
8.3 字體家族其他成員 238
8.3.1 貌似粗獷、實(shí)則精細(xì)無比的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 使用關(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與元素對齊 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偽元素及其實(shí)例 274
8.7.2 故事相對較少的: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:fixed 288
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 不僅僅是保留空間這么簡單 296
10.2.2 了解visibility:collapse 301
第 11章 用戶界面樣式 302
11.1 和border形似的outline屬性 302
11.1.1 萬萬不可在全局設(shè)置outline:0 none 302
11.1.2 真正的不占據(jù)空間的outline及其應(yīng)用 304
11.2 光標(biāo)屬性cursor 307
11.2.1 琳瑯滿目的cursor屬性值 307
11.2.2 自定義光標(biāo) 314
第 12章 流向的改變 315
12.1 改變水平流向的direction 315
12.1.1 direction簡介 315
12.1.2 direction的黃金搭檔unicode-bidi 318
12.2 改變CSS世界縱橫規(guī)則的writing-mode 320
12.2.1 writing-mode原本的作用 321
12.2.2 writing-mode不經(jīng)意改變了哪些規(guī)則 324
12.2.3 writing-mode和direction的關(guān)系 328
第 1章 概述 1
1.1 CSS世界的“世界觀” 1
1.2 世界都是創(chuàng)造出來的 3
1.3 CSS完勝SVG的武器—流 4
1.3.1 何為“流” 5
1.3.2 流是如何影響整個(gè)CSS世界的 6
1.3.3 什么是流體布局 6
1.4 CSS世界的開啟從IE8開始 6
1.5 table自己的世界 7
1.6 CSS新世界—CSS3 7
第 2章 需提前了解的術(shù)語和概念 8
2.1 務(wù)必了解的CSS世界的專業(yè)術(shù)語 8
2.2 了解CSS世界中的“未定義行為” 11
第3章 流、元素與基本尺寸 13
3.1 塊級元素 13
3.1.1 為什么list-item元素會(huì)出現(xiàn)項(xiàng)目符號 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:auto 17
3.2.2 width值作用的細(xì)節(jié) 24
3.2.3 CSS流體布局下的寬度分離原則 27
3.2.4 改變width/height作用細(xì)節(jié)的box-sizing 29
3.2.5 相對簡單而單純的height:auto 33
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-width 38
3.3.2 與眾不同的初始值 38
3.3.3 超越!important 39
3.3.4 任意高度元素的展開收起動(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 深入理解content 45
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)置的padding 79
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: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與圖形構(gòu)建 108
4.4.6 border等高布局技術(shù) 109
第5章 內(nèi)聯(lián)元素與流 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 內(nèi)聯(lián)元素的基石line-height 114
5.2.1 內(nèi)聯(lián)元素的高度之本—line-height 114
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-align 126
5.3.1 vertical-align家族基本認(rèn)識 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 簡單了解vertical-align上標(biāo)下標(biāo)類屬性值 142
5.3.7 無處不在的vertical-align 143
5.3.8 基于vertical-align屬性的水平垂直居中彈框 144
第6章 流的破壞與保護(hù) 147
6.1 魔鬼屬性float 147
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的天然克星clear 157
6.2.1 什么是clear屬性 157
6.2.2 成事不足敗事有余的clear 158
6.3 CSS世界的結(jié)界—BFC 160
6.3.1 BFC的定義 160
6.3.2 BFC與流體布局 160
6.4 結(jié)界overflow 164
6.4.1 overflow剪裁界線border box 165
6.4.2 了解overflow-x和overflow-y 166
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: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 重新認(rèn)識的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對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-size 225
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 字體屬性家族的大家長font-family 232
8.2.1 了解襯線字體和無襯線字體 233
8.2.2 等寬字體的實(shí)踐價(jià)值 234
8.2.3 中文字體和英文名稱 236
8.2.4 一些補(bǔ)充說明 237
8.3 字體家族其他成員 238
8.3.1 貌似粗獷、實(shí)則精細(xì)無比的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 使用關(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與元素對齊 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偽元素及其實(shí)例 274
8.7.2 故事相對較少的: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:fixed 288
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 不僅僅是保留空間這么簡單 296
10.2.2 了解visibility:collapse 301
第 11章 用戶界面樣式 302
11.1 和border形似的outline屬性 302
11.1.1 萬萬不可在全局設(shè)置outline:0 none 302
11.1.2 真正的不占據(jù)空間的outline及其應(yīng)用 304
11.2 光標(biāo)屬性cursor 307
11.2.1 琳瑯滿目的cursor屬性值 307
11.2.2 自定義光標(biāo) 314
第 12章 流向的改變 315
12.1 改變水平流向的direction 315
12.1.1 direction簡介 315
12.1.2 direction的黃金搭檔unicode-bidi 318
12.2 改變CSS世界縱橫規(guī)則的writing-mode 320
12.2.1 writing-mode原本的作用 321
12.2.2 writing-mode不經(jīng)意改變了哪些規(guī)則 324
12.2.3 writing-mode和direction的關(guān)系 328
展開全部
CSS世界 作者簡介
張鑫旭，前端開發(fā)工程師，國內(nèi)知名前端博客“鑫空間-鑫生活”博主，目前就職于閱文集團(tuán)用戶體驗(yàn)設(shè)計(jì)部（YUX），擔(dān)任技術(shù)經(jīng)理。2007年開始接觸前端，10年來一直工作在前端開發(fā)一線，在HTML/CSS等與交互體驗(yàn)關(guān)系密切的領(lǐng)域花了大量的時(shí)間學(xué)習(xí)和研究，有比較多的心得體會(huì)。
書友推薦
- >
中國人在烏蘇里邊疆區(qū):歷史與人類學(xué)概述
- >
二體千字文
- >
伯納黛特,你要去哪(2021新版)
- >
伊索寓言-世界文學(xué)名著典藏-全譯本
- >
上帝之肋:男人的真實(shí)旅程
- >
莉莉和章魚
- >
巴金－再思錄
- >
推拿
本類暢銷
