【现货速发】CSS核心技术详解肖志华　著电子工业出版社

前言

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

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

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

    本书的第1章主要解答一些在CSS中常见的问题，以及常用的CSS技巧。第2~6章讲解了CSS的核心技术，其中第2章是为核心的内容，所以相对于其他章节理解起来会比较难一点。第3~6章主要介绍案例，每个代码片段都有一些案例，配合第2章阅读会轻松很多。本书每个章节都是独立的，因此如果某些章节看不懂，可以跳过去，先看其他章节。第7~13章讲解的是关于CSS 3的内容。虽然本书讲述的是CSS的核心基础内容，但并不代表基础的内容就容易理解，因为都是CSS中核心的技术，用于提高CSS开发水平。

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

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

肖志华
2017年3月28日

13122为内容32些章节看不懂，可以暂且跳过先阅读其他章节。第7～13CSS 3

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  

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

13122为内容32些章节看不懂，可以暂且跳过先阅读其他章节。第7～13CSS 3

CSS