流版。

CSS3的新特性，这个东西就太多了，我得看下答案。选择器这有点太具体了，六大类，我比较倾向于分类的方式去描述，但是它还是没有解释CSS3。

直接看官方文档，这里有样式表的准确的描述，但它只写了CSS1和CSS23，它应该是以2.1为核心做的一个增量包。w2一应该是一个独立的文档，w2是一份目录，然后再加多份文档的描述方式。3就是2.1的一个核心包，再加上未来的所有的补充的核心包，类似于plugin插件组成了3这种形式。

所以理论上是没有CSS4的。比如这里是所有的CSS的文档，这些是全量的，下面就是增量的包，每年都会有一些直接看全量包就行了。最新的是2017年的CSS1，是一个全量的文档，2是多章节的文档。

定义2.1以后采用的是模块化的方法。在这里，CSS3是在CSS2的基础上，以2.1为核心进行的功能的添加和替换。所以如果要介绍CSS3，主要就是介绍这一部分，2.1的基础文档和这些动态添加的一个部分。

CSS解析包这块不是处理ast，比如babel插件或者是HTML解析。写爬虫类似于这些，看他们是具体解析可能会参照这些文档，但如果不是，这也没啥用，样式属性，这个没啥用，媒体查询多了些媒体，反正我也用不到。

选择器级别，这个经常说，直接找区别和变化。添加了伪元素和新的组合，后继兄弟组合器，前朝的遗老遗少，遇见这种东西不一定会用。一个是CSS写的少，还有种情况是可能会用老的方式去实现，会有那种惯性在里面。

所以有些新特性不一定会介绍，不一定敢介绍，但是伪元素是可以去介绍的。伪类跟伪元素的区别，命名空间，SVG用的吧，这个没什么用。级联继承，级联应该是默认值，就直接看CSS2的新增变化就行了。

初始化属性未设置关键值，动画与过渡合并到级联当中，没什么内容变量模块，可能会比较重要。"写样式库的时候会用到这个东西，这个我就不详细看了。写作模式应该比较重要。以前有段时间做国际化，国际化不光是中英文切换，它还会包含从左往右，从上往下的读取方式。

举个例子，比如我有一个弹框，它包含了确定和取消两个按钮。弹框的确定和按钮的一个方向，忽然要求你去进行一个改变，有的项目中取消在左边，确定在右边，可以使用这个方式来去改变。但它的问题就是应该能看到，它是基于从上往下，从左往右的一个方式来去处理的，非要用留的方式去处理，然后再看就没有问题了。

这一块是流布局，如果去看和模型里面的答案，margin一定是从左往右[固定方向]进行一个处理的。而2.1以后确定了这种流读取[自定义方向]的方式，所以在用的时候，就不一定会用到这种使用的方式。

当然这个具体的属性好像不是在弹性盒子内张，也可以当做CSS3的特性在里面。比如写入模块就有提到了这个方向，它的一个读取方向。两个布局，CSS1的时候是没有布局的概念的，它是块布局，或者是BFC从上往右，从左往右的一个读取方式。

光标溢出盒模型的补充，然后是动画特效，动画特效我用的就比较少了，简述成动画一般都会把它交给实习生去做，不是说欺负实习生。如果动画特效这一块没有实现的话，跟产品撒撒娇也是可以上线的。大家都是打工的，互相理解一下，关系处好的话就没问题。

但你要是功能没有实现，那关系再好都没有用。所以动画这一块，或者说CSS这一块，越往后就越不怎么在乎。下面是一些稳定，但没有收入的一些模块，这个我就不看了。CSS3这一块如果让我回答CSS是层叠式，样式在一当中是由一个文档全面的进行描述。2的时候是由一个文档加多张多段落的方式进行描述。

在2.1的时候使用了核心包加上补丁包的方式，将2.1加上补丁包统一称为CSS3。目前覆盖的功能包括解析、选择器、初始化、属性、变量、动画和布局等方面，我比较关注的是布局。然后就是flex包括哪些内容。

讲一下CSS3布局的历史和发展，讲一下CSS3布局的方式，说一下和模型大概就这个思路。只要真问到CSS3，某些具体的属性是如何使用的，我估计我得挂。扛不住。

CSS硬件加速就是浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速

- webkit-transform: translateZ(0);
- moz-transform: translateZ(0);
- ms-transform: translateZ(0);
- o-transform: translateZ(0);
- transform: translateZ(0);

-webkit-overflow-scrolling: touch
通过开启硬件加速解决了某些页面在IOS上滑动不流畅的问题
注意事项

text-transform
- capitalize 首字母大写
- lowercase 全部小写
- uppercase 全部大写

所有浏览器都支持该属性

direction
- ltr 默认值，表示left-to-right
- rtl 表示right-to-left

Chrome2.0+
FireFox任意版本
Safari1.3+
IE5.5+
Android任意版本
IOS3.1+ 

direction参数只能满足图片或者按钮的排列顺序，但是如果我们需要改变字符的内容的排列顺序时候，似乎起不到我们想要的效果，这个时候就可以通过unicode-bidi来达到我们的需求
unicode-bidi
- normal 默认值，正常排列
- embed 内联元素按照direction的设置进行排列，只能作用于内联元素
- bidi-override 强制所以的字符按照direction的设置进行排列

writing-mode
- lr-tb | tb-rl | tb-lr (IE8+)
- horizontal-tb | vertical-rl | vertical-lr 
- 分别对应值
- IE私有属性
- lr-tb 内容从左往右，从上往下
- tb-rl 内容从上往下，从右往左
- tb-lr 内容从上往下，从左往右
- CSS3语法
- horizontal-tb 默认值 
- vertical-rl 垂直展示，阅读顺序从右往左
- vertical-lr 垂直展示，阅读顺序从左往右

语法：linear-gradient(方向,颜色 位置,颜色 位置);
示例： background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
参数解析： 其中位置的百分比指的是颜色结束渐变的面积。
方向取值：top，bottom left等／0deg
（如果不写方向默认为180deg／top），方向前面不要加to。

向参数：【角度参数】

我们以红色向黄色渐变为例子：

实际显示图片如下：

给出案例：提出两个问题来理解角度

下图描述红色向绿色渐变过程，请注意两个问题

第一：角度为何是负的，代表什么含义？

第二：百分比代表什么呢？

第三：角度永远开始于渐变线，终止于水平线；顺时针为负（有点反人类）

给出3个案例进一步理解角度问题

角度的正负其表现形式就是，渐变颜色的方向问题，就是从哪个颜色到哪个颜色的问题；

角度45 颜色A，颜色B， 实际效果我们从左向右阅读（习惯问题，其实计算机解码也是这个方向），就是先A这个颜色，然后再B这个颜色；

如果是负呢？角度-45 颜色A，颜色B，就是先B这个颜色，然后再A这个颜色；

位置参数，就是面积概念这个要理解透彻

案例：我们来看看一个30*30的棋盘案例

这个案例网上一大堆，我们今天进它的原理，原理不清楚啥也干不了，请千万不要抄代码，而不懂原理，否则你是不会进步的的；

下面图片的第一个红框 请注意，任何复杂的图片都是由简单的可重复图片构成，棋盘格就是由这个红框重复组成的；

我们再思考一个问题？红框如何组成的能？ 一个白色背景，两个黑色块；我们重点关注两个黑色块如何完成，问题就解决了。