CSS核心技术详解

　　实用性强：讲解实际开发中遇到的问题，以及常用的各种CSS技巧。

　　技术前沿：剖析CSS3核心技术，提高CSS开发水平。

　　结合实例：每一个代码片段都包含一些案例，让阅读更加轻松。

　　由浅入深：分析CSS技术难点，并进行相应知识扩展。

　　本书共分13章，第1章主要解答CSS中常见的问题，以及常用的技巧。第2～6章讲解了CSS的核心技术，其中第2章是核心的内容，相对于其他章节理解起来会比较难一点。第3～6章主要介绍案例，配合第2章阅读会轻松很多。本书每个章节都是独立的，因此如果某些章节看不懂，可以暂且跳过，先阅读其他章节。第7～13章讲解关于CSS3的内容。

　　本书内容精练、实例丰富、通俗易懂，可作为广大CSS设计人员和前端开发人员的参考书，同时也非常适合大中专院校师生学习阅读。

肖志华，毕业于福建教育学院，前端工程师，工作单位：云上云下科技有限公司。

第1章 遇见未知的CSS / 1

1.1 在CSS中会遇到的问题 / 1

1.1.1 CSS层叠规则 / 3

1.1.2 CSS的命名 / 5

1.2 CSS的一些技巧 / 6

1.2.1 使用pointer-events控制鼠标事件 / 6

1.2.2 玩转CSS选择器 / 8

1.2.3 利用padding实现元素等比例缩放 / 11

1.2.4 calc函数 / 14

1.3 隐藏元素 / 18

第2章 CSS核心概念 / 23

2.1 CSS解析规则 / 23

2.2 替换元素与非替换元素 / 28

2.3 属性值的计算规则 / 28

2.4 可视化格式模型 / 30

2.5 包含块 / 31

2.6 控制框 / 38

2.7 格式化上下文BFC、IFC / 40

2.7.1 从overflow清除浮动看BFC（块格式化上下文） / 40

2.7.2 块级格式化上下文BFC / 45

2.7.3 折叠外边距 / 54

2.7.4 行内格式化上下文IFC / 58

2.7.5 行高的计算 / 61

第3章 CSS单位究竟来自何方 / 67

3.1 百分比究竟为谁 / 67

3.2 探索auto密码 / 82

3.3 设计响应式网页rem / 93

3.4 vw、vh、vmin、vmax基于视口单位 / 97

3.5 什么是ch / 102

3.6 min、max的巧妙运用 / 104

3.7 一个none引出的大学问 / 106

第4章 那些年我们一起定位过的元素 / 108

4.1 定位的特点 / 108

4.1.1 定位之absolute篇 / 109

4.1.2 定位之relative篇 / 113

4.1.3 当定位遇到定位 / 117

4.1.4 定位之fixed篇 / 121

4.1.5 偶遇定位bug，才知定位的真理 / 122

4.1.6 定位之static篇 / 129

4.2 透彻研究定位隐藏的秘密 / 130

4.3 总结 / 140

第5章 元素的七十二变——元素转换 / 142

5.1 display介绍 / 142

5.2 大块头——block / 142

5.3 我们一起站一排——inline / 143

5.4 inline和block的结合体——inline-block / 149

5.5 行内和块的烦恼 / 152

5.6 dispaly的一些其他属性 / 155

5.7 总结 / 159

第6章 浮动趣事 / 160

6.1 浮动简介 / 160

6.2 浮动的特点 / 161

6.3 浮动的秘密 / 167

6.4 实现任意形状的文字环绕 / 173

6.5 总结 / 188

第7章 再不学这些选择器就老了 / 189

7.1 那些被遗忘的选择器 / 189

7.1.1 相邻兄弟选择器 / 189

7.1.2 利用hover实现一个下拉菜单 / 192

7.1.3 利用active做一个集能量 / 194

7.1.4 用first-letter选中第一个字 / 195

7.1.5 用first-line选择首行文字 / 197

7.2 模拟父级选择器 / 199

7.3 强大的新选择器 / 200

第8章 CSS图标制作 / 210

8.1 隐藏在边框中的秘密 / 210

8.2 边框的烦恼 / 212

8.3 边框的孪生兄弟——outline / 215

8.4 纯CSS图标制作 / 220

第9章 你今天换背景了吗 / 232

9.1 对背景属性的深入探索 / 232

9.2 新增的背景功能 / 237

9.2.1 改变背景原点——background-origin / 237

9.2.2 背景裁剪——background-clip / 239

9.2.3 设置背景图片大小——background-size / 243

9.3 总结 / 245

第10章 让文字更美一些 / 246

10.1 制作非主流文字 / 247

10.2 新增的文字对齐属性 / 250

10.2.1 文字两端对齐 / 250

10.2.2 末尾文本对齐 / 252

10.2.3 文本书写模式 / 257

10.3 关于文字的一些其他属性 / 259

10.3.1 将超出宽度的文字隐藏 / 259

10.3.2 字母转换大小写 / 262

10.4 总结 / 263

第11章 内容生成技术——用CSS来计数 / 264

11.1 伪元素 / 264

11.2 CSS计数器 / 265

11.3 content的其他用途 / 272

11.4 总结 / 273

第12章 解决让人头疼的布局 / 274

12.1 制作可自适应的布局 / 274

12.1.1 左侧固定、右侧自适应的布局 / 274

12.1.2 右侧固定、左侧自适应的布局 / 276

12.1.3 多列文字垂直居中 / 278

12.2 利用伸缩盒模型进行布局 / 283

12.2.1 伸缩盒模型基础 / 285

12.2.2 伸缩盒模型进阶 / 296

12.2.3 伸缩盒模型实战 / 299

第13章 飞越CSS / 303

13.1 CSS最佳实践 / 303

13.2 纯CSS的世界 / 307

13.2.1 利用checked选择器实现tab切换 / 308

13.2.2 利用:target选择器实现遮罩层效果 / 310

13.2.3 scaleY配合animation制作loading / 311

13.2.4 利用hover实现手风琴效果 / 313

13.2.5 利用checked选择器制作星星评分 / 314

13.2.6 使用flex伸缩盒模型实现瀑布流布局 / 316

13.3 结束语 / 318

　　看似简单的CSS，却暗藏玄机，那是我们摸爬滚打好长时间后悟出的真理。

　　在很长的一段时间里，我并没有重视CSS，觉得CSS很简单，无非就是一些属性；后来才发现自己小看了CSS，对CSS的了解实在是太少，尤其是对其核心概念的理解太模糊，实际上它有很多神奇的地方并不为大家所知。对于一个新手来说，只知道一些理论但在实际开发中不会使用是不行的，于是笔者萌生了写作本书的最初想法。

　　市面上介绍CSS基础的书已经有很多了，已经没有必要再去重复，但是一些核心的内容还是很有必要写出来的，因为我发现很多前端朋友对CSS都不太重视。我认为做前端的技术人员不仅要掌握好CSS的核心内容，还要懂得怎样把这些内容灵活运用到实际开发中。如果对一门技术只停留在了解的层面而不会使用，那和不会有什么区别？所以本书将实用放在第一位，大量的例子都来自于我在实际开发中所遇到的问题，将这些实际的例子拿来讲解才更有说服力，同时也更易于读者的理解。

　　本书共分13章，第1章主要解答CSS中常见的问题，以及常用的技巧。第2～6章讲解了CSS的核心技术，其中第2章是最为核心的内容，相对于其他章节理解起来会比较难一点。第3～6章主要介绍案例，每个代码片段都有一些案例，配合第2章阅读会轻松很多。本书每个章节都是独立的，因此如果某些章节看不懂，可以暂且跳过，先阅读其他章节。第7~13章讲解关于CSS3的内容。

　　本书举例时用到了很多关于CSS3的属性，所以读者在测试时需要使用高级浏览器，这里推荐使用Chrome浏览器，书中的例子主要也是在Chrome浏览器中测试的。另外本书并不会过多地讲解兼容性问题，因为花太多时间讨论兼容性是不太值得的。书中有一些个人看法，由于才疏学浅，不免会有疏漏。如果发现错误，还请指出，不吝赐教，在此深表谢意，可发邮件至c776@foxmail.com邮箱，一定一一回复并乐此不疲，因为这是我的工作，和你们交流也是我的快乐。

　　本书的出版要特别感谢电子工业出版社的黄爱萍和张童编辑，感谢他们在选题策划和书稿编辑方面做出的大量工作，同时对伯乐在线黄利民大哥的大力支持深表谢意。

　　肖志华

　　2017年3月28日