《CSS世界》配套资源

编辑推荐

-茫茫星海中鲸鱼永不犯错的航行，
-那是因为有星辰的指引；
-芸芸CSS世界中想要不断突破瓶颈，
-需要有本书的指引。
CSS入门简单深入难，无数人遇到“天花板”，本书是打破能力上升瓶颈之作。
前端开发行业潜心近10年一直研究看似简单的CSS的人可谓是凤毛麟角，作者从2009年开始写原创技术文章，现在其博客已经成为国内访问量巨大的个人前端博客之一，可以说众多前端初学者是看着作者的博客成长的。
本书几乎所有内容都是经过作者自我思考和认知提炼后的产物，都是其他地方难得一见的“干货”。本书不会像传统书籍一样，一个知识点就是一节，因为CSS的各个属性的表现和行为相互间是参杂在一起的，很难一个一个分开，为了把错综复杂的CSS知识点讲好，本书以独特的“世界观”的视角去看待CSS。
为了拓展和更直观演示各个特性的效果，书中每个案例都有对应的在线demo演示页面，以二维码形式放在书中，方便读者扫码查看，快速体验。

内容简介

本书从前端开发人员的需求出发，以“流”为线索，从结构、内容到美化装饰等方面，全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时，作者结合多年的从业经验，通过大量的实战案例，详尽解析CSS的相关知识与常见问题。作者还为本书开发了专门的配套网站，进行实例展示、问题答疑。

作为一本CSS深度学习的书，书中介绍大量许多前端开发人员都不知道的CSS知识点。通过阅读本书，读者会对CSS世界的深度和广度有一个全新的认识。

作者简介

张鑫旭，前端开发工程师，国内知名前端博客“鑫空间-鑫生活”博主，目前就职于阅文集团用户体验设计部（YUX），担任技术经理。2007年开始接触前端，10年来一直工作在前端开发一线，在HTML/CSS等与交互体验关系密切的领域花了大量的时间学习和研究，有比较多的心得体会。

目录

• 第 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-alig126
• 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-alig143
• 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-alig191
• 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 改变水平流向的directio315
• 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