內容介紹
本書從前端開發人員的需求齣發,以“流”為綫索,從結構、內容到美化裝飾等方麵,全麵且深入地講解前端開發人員必須瞭解和掌握的大量的CSS知識點。同時,作者結閤多年的從業經驗,通過大量的實戰案例,詳盡解析CSS的相關知識與常見問題。作者還為本書開發瞭專門的配套網站,進行實例展示、問題答疑。
作為一本CSS深度學習的書,書中介紹大量許多前端開發人員都不知道的CSS知識點。通過閱讀本書,讀者會對CSS世界的深度和廣度有一個全新的認識。
作者介紹
張鑫旭,前端開發工程師,國內知名前端博客“鑫空間-鑫生活”博主,目前就職於閱文集團用戶體驗設計部(YUX),擔任技術經理。2007年開始接觸前端,10年來一直工作在前端開發一綫,在HTML/CSS等與交互體驗關係密切的領域花瞭大量的時間學習和研究,有比較多的心得體會。
賣點推薦
作者張鑫旭,前端開發工程師,國內知名前端博客“鑫空間-鑫生活”博主。
-茫茫星海中鯨魚永不犯錯的航行,
-那是因為有星辰的指引;
-蕓蕓CSS世界中想要不斷突破瓶頸,
-需要有本書的指引。
CSS入門簡單深入難,無數人遇到“天花闆”,本書是打破能力上升瓶頸之作。
前端開發行業潛心近10年一直研究看似簡單的CSS的人可謂是鳳毛麟角,作者從2009年開始寫原創技術文章,現在其博客已經成為國內訪問量巨大的個人前端博客之一,可以說眾多前端初學者是看著作者的博客成長的。
本書幾乎所有內容都是經過作者自我思考和認知提煉後的産物,都是其他地方難得一見的“乾貨”。本書不會像傳統書籍一樣,一個知識點就是一節,因為CSS的各個屬性的錶現和行為相互間是參雜在一起的,很難一個一個分開,為瞭把錯綜復雜的CSS知識點講好,本書以獨特的“世界觀”的視角去看待CSS。
為瞭拓展和更直觀演示各個特性的效果,書中每個案例都有對應的在綫demo演示頁麵,以二維碼形式放在書中,方便讀者掃碼查看,快速體驗。
目錄
目 錄
第 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新世界—CSS37
第 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:auto17
3.2.2 width值作用的細節24
3.2.3 CSS流體布局下的寬度分離原則27
3.2.4 改變width/height作用細節的box-sizing29
3.2.5 相對簡單而單純的height:auto33
3.2.6 關於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 任意高度元素的展開收起動畫技術40
3.4 內聯元素42
3.4.1 哪些元素是內聯元素42
3.4.2 內聯世界深入的基礎—內聯盒模型42
3.4.3 幽靈空白節點44
第4章 盒尺寸四大傢族45
4.1 深入理解content45
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 標簽元素內置的padding79
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:auto94
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和color105
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-height112
5.1.3 字母x與CSS中的ex113
5.2 內聯元素的基石line-height114
5.2.1 內聯元素的高度之本—line-height114
5.2.2 為什麼line-height可以讓內聯元素“垂直居中”119
5.2.3 深入line-height的各類屬性值121
5.2.4 內聯元素line-height的“大值特性”124
5.3 line-height的好朋友vertical-align126
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-align143
5.3.8 基於vertical-align屬性的水平垂直居中彈框144
第6章 流的破壞與保護147
6.1 魔鬼屬性float147
6.1.1 float的本質與特性147
6.1.2 float的作用機製151
6.1.3 float更深入的作用機製154
6.1.4 float與流體布局155
6.2 float的天然剋星clear157
6.2.1 什麼是clear屬性157
6.2.2 成事不足敗事有餘的clear158
6.3 CSS世界的結界—BFC160
6.3.1 BFC的定義160
6.3.2 BFC與流體布局160
6.4 結界overflow164
6.4.1 overflow剪裁界綫border box165
6.4.2 瞭解overflow-x和overflow-y166
6.4.3 overflow與滾動條166
6.4.4 依賴overflow的樣式錶現169
6.4.5 overflow與錨點定位170
6.5 float的兄弟177
6.5.1 absolute的包含塊178
6.5.2 具有相對特性的無依賴absolute定位184
6.5.3 absolute與text-align191
6.6 absolute與overflow193
6.7 absolute與clip195
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 強悍的固定定位207
6.10.1 不一樣的“包含塊”207
6.10.2 的absolute模擬208
6.10.3 與背景鎖定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-size225
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-family232
8.2.1 瞭解襯綫字體和無襯綫字體233
8.2.2 等寬字體的實踐價值234
8.2.3 中文字體和英文名稱236
8.2.4 一些補充說明237
8.3 字體傢族其他成員238
8.3.1 貌似粗獷、實則精細無比的font-weight238
8.3.2 具有近似姐妹花屬性值的font-style241
8.3.3 不適閤國情的font-variant242
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:fixed288
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:collapse301
第 11章 用戶界麵樣式302
11.1 和border形似的outline屬性302
11.1.1 萬萬不可在全局設置outline:0 none302
11.1.2 真正的不占據空間的outline及其應用304
11.2 光標屬性cursor307
11.2.1 琳琅滿目的cursor屬性值307
11.2.2 自定義光標314
第 12章 流嚮的改變315
12.1 改變水平流嚮的direction315
12.1.1 direction簡介315
12.1.2 direction的黃金搭檔unicode-bidi318
12.2 改變CSS世界縱橫規則的writing-mode320
12.2.1 writing-mode原本的作用321
12.2.2 writing-mode不經意改變瞭哪些規則324
12.2.3 writing-mode和direction的關係328
官方正版 CSS世界 CSS3進階 HTML5 JavaScript 網頁製作 epub pdf mobi txt 電子書 下載 2024
官方正版 CSS世界 CSS3進階 HTML5 JavaScript 網頁製作 下載 epub mobi pdf txt 電子書