前面的话

　　CSS 是前端工程师的基本功，但好多执迷于学习 javascript 的人的基本功并不扎实。可能一些人从 w3school 网站匆匆过了一遍，只是对 CSS 常用概念有一些表面上的理解，就一头扎进 javascript 的深坑里跳不出来。实际上，javascript 中比较复杂的逻辑很有可能使用 CSS 几行样式就能解决问题，而且性能还好。

　　CSS 之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从CSS 禅意花园开始，写 CSS 成为一种艺术。从 CSS2.1 到 3 再到 4，CSS 所涵盖的内容及可实现的功能得到了极大的丰富，使得 CSS 的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白。

　　小火柴将 CSS 的知识体系进行了梳理和归纳，总结成以下目录

基础

基础语法

　　引入 CSS

　　选择器

　　选择器新用法

　　层叠

　　单位

　　样式关键字

　　calc()

　　默认可继承样式

　　CSS Why

　　变量 Variable

　　属性速查表

兼容

　　CSS Hack

　　CSS 兼容性详解

　　haslayout

伪类伪元素

　　伪元素

　　计数器

　　伪类

规范

　　CSS reset

　　CSS 命名实践

　　CSS 规范

　　命名规范

　　CSS 编码技巧　　

布局

盒模型

【盒子尺寸】

　　盒模型

　　四个自适应宽高关键字

　　边框和阴影

　　margin 要点

　　margin 负值

　　轮廓 outline

【弹性盒模型】

　　弹性盒模型 flex

　　旧版 flex 及兼容

　　flex 布局应用

【盒子显示】

　　溢出 overflow

　　裁剪 clip

　　拉伸 resize

　　滚动条

　　可见性 visibility

普通流

　　display

　　haslayout

　　BFC

　　视觉格式化

　　文本方向

浮动和定位

【浮动】

　　浮动

　　清浮动

【定位】

　　定位中的偏移

　　定位中的堆叠 z-index

　　绝对定位

　　绝对定位应用

　　相对定位和固定定位

布局方式

【布局系统】

　　Media 媒体查询

　　多列布局

　　grid 栅格布局

　　移动优先的响应式布局

【居中布局】

　　水平居中

　　垂直居中

　　水平垂直居中

【常见布局】

　　两端对齐

　　单列定宽单列自适应布局

　　两列自适应布局

　　三列布局

　　三栏式布局 (所谓的圣杯和双飞翼布局)

　　等分布局

　　等高布局

　　全屏布局

　　sticky-footer 布局

渲染

字体和文本

　　字体

 　  基础文本样式

　　行高与垂直对齐

　　换行和空白符

　　文本溢出和文本阴影

颜色和背景

　　颜色模式

　　颜色模式转换器

　　前景色和透明度

　　背景

　　光标

变形和动画

　　过渡 transition

　　变形 transform(2d)

　　变形 transform(3d)

　　变形 transform 的副作用

　　线性渐变

　　径向渐变

　　动画 animation

　　动画 animation 的三个应用 (漂浮的白云、旋转的星球和正方体合成)

　　animate.css 的使用

渲染属性

　　混合模式

　　滤镜

　　倒影

　　页面渲染优化属性 will-change

　　遮罩 mask

　　路径裁剪 clip-path

效果

　　元素显示隐藏的 9 种思路

　　实现滑动门的 3 种方法

　　CSS 以图换字的 9 种方法

　　导航条 Tab 切换

　　CSS 画出的图

　　纹理文本

　　CSS 文本效果

　　CSS 边框效果

　　CSS 背景效果

　　CSS 遮罩和毛玻璃效果