你需掌握的CSS知識都在這了（長文建議收藏，文末有福利）

時間 2019-12-08

標籤掌握 css 知識都在長文建議收藏欄目 CSS 简体版

原文原文鏈接

1.CSS盒模型，在不一樣瀏覽器的差別

css 標準盒子模型
javascript

css盒子模型又稱爲框模型（Box Model），包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。以下圖：
css

圖中的內層是content依次是padding border margin。一般咱們設置背景時就是內容、內邊距、邊框這三部分，若是border設置顏色的時候會顯示boder顏色當boder顏色是透明時會顯示background-color的顏色。而該元素的子元素的是從content開始的。而外邊距是透明的，不會遮擋其餘元素。 html

元素框的總寬度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right; 前端

元素框的總高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;
java

IE盒子模型react

IE盒子模型以下圖：webpack

圖中的內層是content依次是content padding border。一般咱們設置背景時就是內容、內邊距、邊框這三部分。而外邊距是透明的，不會遮擋其餘元素。css3

元素框的總寬度=width（padding-left+padding-right+border-left+border-right)；git

元素框的總高度=height（padding-top+padding-bottom+border-top+border-bottom）;
github

兩個模型寬度和高度的計算（是不同的）

w3c中的盒子模型的寬:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:包括border+padding+width;

上面的兩個寬度相加的屬性是同樣的。所以咱們應該選擇標準盒子模型，在網頁的頂部加上 DOCTYPE 聲明。

2.CSS全部選擇器及其優先級、使用場景，哪些能夠繼承，如何運用at規則

css選擇器種類有：

通用選擇器：*

id選擇器：#header{}

class選擇器：.header{}

元素選擇器：div{}

子選擇器：ul > li{}

後代選擇器：div p{}

僞類選擇器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}

僞元素選擇器: :after、:before等,例如：li:after

屬性選擇器: input[type="text"]

組合選擇器：E,F/E F（後代選擇器）/E>F（子元素選擇器）/E+F（直接相鄰元素選擇器----匹配以後的相鄰同級元素）/E~F（普通相鄰元素選擇器----匹配以後的同級元素）

層次選擇器：p~ul 選擇前面有p元素的每一個ul元素

css選擇器優先級：

選擇器優先級由高到低分別爲：
!important > 做爲style屬性寫在元素標籤上的內聯樣式 >id選擇器>類選擇器>僞類選擇器>屬性選擇器>標籤選擇器> 通配符選擇器（* 應少用）>瀏覽器自定義；

當比較多個相同級別的CSS選擇器優先級時，它們定義的位置將決定一切。下面從位置上將CSS優先級由高到低分爲六級：
一、位於<head/>標籤裏的<style/>中所定義的CSS擁有最高級的優先權。
二、第二級的優先屬性由位於 <style/>標籤中的 @import 引入樣式表所定義。
三、第三級的優先屬性由<link/>標籤所引入的樣式表定義。
四、第四級的優先屬性由<link/>標籤所引入的樣式表內的 @import 導入樣式表定義。
五、第五級優先的樣式有用戶設定。
六、最低級的優先權由瀏覽器默認。

使用場景：

class使用場景：須要某些特定樣式的標籤則放在同一個class中，須要此樣式的標籤可再添加此類。（class不可被javascript中的GetElementByID函數所調用）
id使用場景：一、根據提供的惟一id號快速獲取標籤對象，如：document.getElementById(id) ；二、用於充當label標籤for屬性的值：示例：<label for='userid'>用戶名：</label>，表示單擊此label標籤時，id爲userid的標籤得到焦點

CSS哪些屬性能夠繼承？
css繼承特性主要是指文本方面的繼承(好比字體、顏色、字體大小等)，盒模型相關的屬性基本沒有繼承特性。
不可繼承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
全部元素可繼承的：
visibility和cursor
終極塊級元素可繼承的：
text-indent和text-align
內聯元素可繼承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
列表元素可繼承的：
list-style、list-style-type、list-style-position、list-style-image

經常使用at規則及使用示例：

/*定義字符集*/
@charset "utf-8"    
/*導入css文件*/ 
@import "base.css"
/*自定義字體*/
@font-face {}
/*聲明CSS3 animation動畫關鍵幀*/
@keyframes fadeIn {}
/*媒體查詢*/
@media{}複製代碼

3.CSS僞類和僞元素有哪些，它們的區別和實際應用

僞類的例子有：

:hover

:active

:first-child

:visited

等。

僞元素的例子有：

:first-line

:first-letter

:after

:before

僞類和僞元素的根本區別在於：

它們是否創造了新的元素(抽象)。從咱們模仿其意義的角度來看，若是須要添加新元素加以標識的，就是僞元素，反之，若是隻須要在既有元素上添加類別的，就是僞類。

僞元素在一個選擇器裏只能出現一次，而且只能出如今末尾;

僞類則是像真正的類同樣發揮着類的做用，沒有數量上的限制，只要不是相互排斥的僞類，也能夠同時使用在相同的元素上。

實際使用：

僞類用一個冒號表示 :first-child
僞元素則使用兩個冒號表示 ::first-line

4.CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理

1）、static定位(普通流定位) -------------- 默認定位

2）、float定位(浮動定位) 例：float:left;

有兩個取值：left(左浮動)和right(右浮動)。浮動元素會在沒有浮動元素的上方，效果上看是遮擋住了沒有浮動的元素，有float樣式規則的元素是脫離文檔流的，它的父元素的高度並不能有它撐開。

3）、relative定位(相對定位) position:relative;

相對本元素的左上角進行定位，top,left,bottom,right均可以有值。雖然通過定位後，位置可能會移動，可是本元素並無脫離文檔流，還佔有原來的頁面空間。能夠設置z-index。使本元素相對於文檔流中的元素，或者脫離文檔流可是z-index的值比本元素的值要小的元素更加靠近用戶的視線。

相對定位最大的做用是爲了實現某個元素相對於本元素的左上角絕對定位，本元素須要設置position爲relative。

4）、absolute定位(絕對定位) position:absolute;

相對於祖代中有relative(相對定位)而且離本元素層級關係上是最近的元素的左上角進行定位，若是在祖代元素中沒有有relative定位的，就默認相對於body進行定位。

絕對定位是脫離文檔流的，與浮動定位是同樣的效果，會壓在非定位元素的上方。能夠設置z-index屬性。

雪碧圖實現原理：

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。

5.寫出儘量多的水平垂直居中的方案並對比它們的優缺點

行內元素水平居中：

首先看它的父元素是否是塊級元素，若是是，則直接給父元素設置 text-align: center;

若是不是，則先將其父元素設置爲塊級元素，再給父元素設置 text-align: center;

塊級元素水平居中(定寬度)：

1）須要誰居中，給其設置 margin: 0 auto; （做用：使盒子本身居中）

2) 首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；

設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置transform: translateX(-50%);

塊級元素水平居中(不寬度)：

1) 默認子元素的寬度和父元素同樣，這時須要設置子元素爲display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設置 text-align: center;

2) 首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；

利用css3新增屬性transform: translateX(-50%);

使用flexbox佈局實現水平居中（寬度定不定均可以）:

使用flexbox佈局，只須要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

單行的行內元素垂直居中:

只須要設置單行行內元素的"行高等於盒子的高"便可；

多行的行內元素垂直居中:

使用給父元素設置display:table-cell;和vertical-align: middle;屬便可；

塊級元素垂直居中方法一：使用定位

首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中；

定高度：設置絕對子元素的 margin-top: -元素高度的一半px; 或者設置transform: translateY(-50%);

不定高度：利用css3新增屬性transform: translateY(-50%);

塊級元素垂直居中方法二：使用flexbox佈局實現（高度定不定均可以）

使用flexbox佈局，只須要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

水平垂直居中-已知高度和寬度的元素：

方法一：

設置父元素爲相對定位，給子元素設置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

設置父元素爲相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;

水平垂直居中-未知高度和寬度的元素：

方法一：使用定位屬性

設置父元素爲相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方案二：使用flex佈局實現

設置父元素爲flex定位，justify-content: center; align-items: center;

6.BFC的佈局規則，實現原理，能夠解決的問題

BFC直譯爲 塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了 內部的Block-level Box如何佈局，而且與外部絕不相干。
注意：能夠把BFC理解爲一個大的盒子，其內部是由Block-level box組成的

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

BFC的做用及原理：

1. 自適應兩欄佈局

2. 清除內部浮動

3. 防止垂直 margin 重疊

BFC內部的元素和外部的元素絕對不會互相影響，所以，當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

7.CSS函數有哪些？

根據w3cplus中能夠劃分爲如下幾類：

屬性函數：attr()；

背景圖片函數：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；

顏色函數：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

圖形函數：circle()、ellipse()、inset()、polygon()、path()

濾鏡函數：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

轉換函數：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

數學函數：calc()、min()、max()、mixmax()、repeat()；

緩動函數：cubic-bezier()、steps()；

其餘函數：counter()、counters()、toggle()、var()、 symbols()。

8.PostCSS、Sass、Less的異同，以及使用配置，至少掌握一種

● 編譯環境不同，Sass的安裝須要Ruby環境，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出css到瀏覽器，也能夠在開發環節使用Less，而後編譯成css文件，直接放到項目中；

● 變量符號不同，Less是@，而Scss是$；

● 輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded；

● 處理條件語句，Sass支持條件語句，可使用if{}else{},for{}循環等等。 LESS的條件語句使用有些另類，他不是咱們常見的關鍵詞if和else if之類，而其實現方式是利用關鍵詞「when」；

● 引用外部文件，文件名若是如下劃線_開頭的話，Sass會認爲該文件是一個引用文件，不會將其編譯爲css文件，ess引用外部文件和css中的@import沒什麼差別；

● 工具庫的不一樣，Sass有工具庫Compass, 簡單說，Sass和Compass的關係有點像Javascript和jQuery的關係,Compass在Sass的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是採用Less語法編寫。

● PostCSS介紹：

PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 能夠操做的 AST，第二個就是調用插件來處理 AST 並獲得結果。所以，不能簡單的把 PostCSS 歸類成 CSS 預處理或後處理工具。PostCSS 所能執行的任務很是多，同時涵蓋了傳統意義上的預處理和後處理。

● PostCSS使用

PostCSS 通常不單獨使用，而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 均可以進行集成。完成集成以後，選擇知足功能需求的 PostCSS 插件並進行配置。如今常常用到的是基於PostCSS的Autoprefixer插件，使用方式能夠在官網的插件庫進行查詢。下面是官網地址：

PostCSS官網地址

9.CSS模塊化方案有哪些？

css的模塊化方案可能和js的同樣多，下面簡單介紹幾種主要的模塊方案。

oocss

面對對象的規則，主要的原則是兩種：分離結構和外觀，分離容器和內容。

名詞解釋

分離結構和外觀：增長可重複的設計單元，同時去推動產品和ui對這方面的思考，好比下面的css使用時對象模式的命名和模塊化規則。

分離容器和內容：指的是樣式的使用不以元素位置惟一匹配，在任何位置你均可以使用這個樣式，若是你不適用這個樣式，會保持默認的樣式。

實例

// dom結構<div class="toogle simple">  <div class="toogle-control open">    <div class="toogle-tittle">標題</div>  </div>  <div class="toogle-details "></div></div>複製代碼

// 模塊的標記 惟一標識.toggle{}// 皮膚樣式的寫法，若是基本結構是同樣的，你能夠用complex的一個輔助樣式.toggle.simple{}// 是否作嵌套寫法 相信不少預處理器的部分會支持嵌套 而後不少人會這樣寫,不被推薦的.toogle{ .toogle-control{ } .toogle-details{ }}// 其實你會這樣組織麼 不是很建議 這樣會下降查詢效率 若是能確認惟一性的時候 其實直接寫子便可.toogle{}.toogle-control{}.toogle-details{}複製代碼

smacss

sma和oocss有不少相似之處，但區分的地方有不少，主要是對樣式的分類。分別是：基礎、佈局、模塊、狀態、主題

基礎

能夠適用於任何位置，我也稱全局樣式

佈局

主要是用來實現不一樣的特點佈局，提升佈局的複用率，

模塊

設計中的模塊化，可重複使用的一個單元，通常是dom+css的耦合綁定。

狀態

描述在特定狀態下的佈局或者模塊的特殊化表現，這裏我以爲要推薦下《css禪意花園》，在dom結構不變的狀況下，能夠經過css的皮膚化實現樣式的改版。

主題

與狀態相比更加定製的是，咱們會針對有些特殊的模塊，進行主題的設置，包括一系列的顏色、尺寸、交互等進行重度設計，參數化設計。

案例

// dom結構<div class="toogle toogle-simple">  <div class="toogle-control is-active">    <div class="toogle-tittle">標題</div>  </div>  <div class="toogle-details "></div></div>複製代碼

與oocss相比，其實大部分設計思路是同樣的，以一個類做爲css的做用域（做用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區別就是針對皮膚和狀態的不一樣書寫規則。

bem

bem就是塊、元素、修飾符的思惟去寫樣式。它不涉及具體的css結構，只是建議你如何命名css.

案例

// dom結構<div class="toogle toogle--simple">  <div class="toogle_control toogle_control--active">    <div class="toogle_tittle">標題</div>  </div>  <div class="toogle_details "></div></div>複製代碼

解釋

塊級：所屬組件的名稱
元素：元素在組件裏的名稱
修飾符：任何與元素修飾相關的類

style-components

完全拋棄 CSS，用 JavaScript 寫 CSS 規則,點擊style-components進入github的主頁。

CSS Modules

使用JS編譯原生的CSS文件，使其具有模塊化的能力，點擊CSS Modules進入github主頁。

這些模塊化方案都是各有優缺點，如命名約定：命名複雜、缺少擴展、 CSS Modules固然也有一些缺點(你得先學會它再去談優劣)。在衆多解決方案中，沒有絕對的優劣。仍是要結合本身的場景來決定。

10.CSS如何配置按需加載

● 使用require.js按需加載CSS

//模塊test.js
define(['css!../css/test.css'], function() { //先加載依賴樣式
    var test = {};
    return test;
});

//配置
require.config({
    map: { //map告訴RequireJS在任何模塊以前，都先載入這個模塊
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        test: 'lib/test',
    }
});

//調用
require(['test'])複製代碼

● webpack配置CSS的按需加載

這裏以ant desgin css 爲例：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    plugins: [
      ["import",{libraryName: "antd", style: 'css'}],   //只需加一行，手動劃重點antd按需加載 
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
            },
          },
        },
      ],
    ], 
    cacheDirectory: true,
    cacheCompression: isEnvProduction,
    compact: isEnvProduction,
  },
}複製代碼

11. 如何防止CSS阻塞渲染

　默認狀況下，CSS 被視爲阻塞渲染的資源，這意味着瀏覽器將不會渲染任何已處理的內容，直至 CSSOM 構建完畢。請務必精簡您的 CSS，並利用媒體類型和查詢來解除對渲染的阻塞。

咱們能夠經過 CSS「媒體類型」和「媒體查詢」來解決這類用例：

<link href="style.css" rel="stylesheet"> 
<link href="print.css" rel="stylesheet" media="print"> 
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">複製代碼

媒體查詢由媒體類型以及零個或多個檢查特定媒體特徵情況的表達式組成。

例如，上面的第一個樣式表聲明未提供任何媒體類型或查詢，所以它適用於全部狀況，也就是說，它始終會阻塞渲染。第二個樣式表則否則，它只在打印內容時適用---或許您想從新安排佈局、更改字體等等，所以在網頁首次加載時，該樣式表不須要阻塞渲染。最後，最後一個樣式表聲明提供由瀏覽器執行的「媒體查詢」：符合條件時，瀏覽器將阻塞渲染，直至樣式表下載並處理完畢。

12.熟練使用CSS(3)實現常見動畫，如漸變、移動、旋轉、縮放等等

我把一些經常使用的CSS動畫效果代碼上傳到github了，有須要的同窗能夠點擊下載，CSS經常使用動畫；

另外還有一些CSS動畫庫，好比：animate.css、magic.css、Hover.css、

13.CSS瀏覽器兼容性寫法

1. 瀏覽器CSS樣式初始化

因爲每一個瀏覽器的css默認樣式不盡相同，因此最簡單有效的方式就是對其進行初始化，相信不少朋友都寫過這樣的代碼，在全部CSS開始前，先把marin和padding都設爲0，以防不一樣瀏覽器的顯示效果不同。

*{ 
 margin: 0; 
 padding: 0; 
}複製代碼

關於瀏覽器CSS樣式初始化，經驗不豐富的話，可能也不知道該初始化什麼，這裏給你們推薦一個庫，Normalize.css，github star數量接近3.4萬，選取展現其中幾個樣式設置，以下：

html { 
 line-height: 1.15; /* Correct the line height in all browsers */ 
 -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */ 
} 
 
body { 
 margin: 0; 
} 
 
a { 
 background-color: transparent; /* Remove the gray background on active links in IE 10. */ 
} 
 
img { 
 border-style: none; /* Remove the border on images inside links in IE 10. */ 
}複製代碼

經過CSS樣式初始化，相信能解決很多常規的兼容性問題，接下來再看看瀏覽器的私有屬性。

2. 瀏覽器私有屬性

咱們常常會在某個CSS的屬性前添加一些前綴，好比-webkit-，-moz- ，-ms-，這些就是瀏覽器的私有屬性。

爲何會出現私有屬性呢？這是由於制定HTML和CSS標準的組織W3C動做是很慢的。

一般，有W3C組織成員提出一個新屬性，好比說圓角border-radius，你們都以爲好，但W3C制定標準，要走很複雜的程序，審查等。而瀏覽器商市場推廣時間緊，若是一個屬性已經夠成熟了，就會在瀏覽器中加入支持。

可是爲避免往後W3C公佈標準時有所變動，會加入一個私有前綴，好比-webkit-border-radius，經過這種方式來提早支持新屬性。等到往後W3C公佈了標準，border-radius的標準寫法確立以後，再讓新版的瀏覽器支持border-radius這種寫法。經常使用的前綴有：

-moz表明firefox瀏覽器私有屬性
-ms表明IE瀏覽器私有屬性
-webkit表明chrome、safari私有屬性
-o表明opera私有屬性

對於私有屬性的順序要注意，把標準寫法放到最後，兼容性寫法放到前面

-webkit-transform:rotate(-3deg); /*爲Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*爲Firefox*/ 
 -ms-transform:rotate(-3deg); /*爲IE*/ 
 -o-transform:rotate(-3deg); /*爲Opera*/ 
 transform:rotate(-3deg);複製代碼

每一個CSS屬性寫這麼一堆兼容性代碼，無疑是對生命最大的浪費，後面咱們會講一下經過自動化插件來處理這塊。

3. CSS hack

有時咱們須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，這種針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!

CSS hack的寫法大體概括爲3種：條件hack、屬性級hack、選擇符級hack。

各遊覽器經常使用兼容標記一覽表:

標記	IE6	IE7	IE8	FF	Opera	Sarari
[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}	X	X	X	X	X	√
.bb , x:-moz-any-link, x:default	X	√	X	√(ff3.5及如下)	X	X
@-moz-document url-prefix(){.bb{}}	X	X	X	√	X	X
@media all and (min-width: 0px){.bb {}}	X	X	X	√	√	√
* +html .bb {}	X	√	X	X	X	X
遊覽器內核	Trident	Trident	Trident	Gecko	Presto	WebKit

（以上 .bb 可更換爲其它樣式名）

4.自動化插件

Autoprefixer是一款自動管理瀏覽器前綴的插件，它能夠解析CSS文件而且添加瀏覽器前綴到CSS內容裏，使用Can I Use（caniuse網站）的數據來決定哪些前綴是須要的。

把Autoprefixer添加到資源構建工具（例如Grunt）後，能夠徹底忘記有關CSS前綴的東西，只需按照最新的W3C規範來正常書寫CSS便可。若是項目須要支持舊版瀏覽器，可修改browsers參數設置。

//咱們編寫的代碼 
div { 
 transform: rotate(30deg); 
} 
 
// 自動補全的代碼，具體補全哪些由要兼容的瀏覽器版本決定，能夠自行設置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}複製代碼

目前webpack、gulp、grunt都有相應的插件，若是尚未使用，那就趕忙應用到咱們的項目中吧，別再讓CSS兼容性浪費你的時間！