流版。

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的棋盤案例

這個案例網上一大堆，我們今天進它的原理，原理不清楚啥也干不了，請千萬不要抄代碼，而不懂原理，否則你是不會進步的的；

下面圖片的第一個紅框 請注意，任何復雜的圖片都是由簡單的可重復圖片構成，棋盤格就是由這個紅框重復組成的；

我們再思考一個問題？紅框如何組成的能？ 一個白色背景，兩個黑色塊；我們重點關注兩個黑色塊如何完成，問題就解決了。