1.CSS盒模型杖狼，在不同瀏覽器的差異

css 標準盒子模型

css盒子模型 又稱為框模型（Box Model）炼蛤，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）蝶涩、邊框（border）理朋、外邊距（margin）幾個要素。如下圖：

圖中的內(nèi)層是content依次是padding border margin绿聘。通常我們設(shè)置背景時就是內(nèi)容嗽上、內(nèi)邊距、邊框這三部分熄攘，如果border設(shè)置顏色的時候會顯示boder顏色當boder顏色是透明時會顯示background-color的顏色兽愤。而該元素的子元素的是從content開始的。而外邊距是透明的挪圾，不會遮擋其他元素烹看。?

元素框的總寬度=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;?

IE盒子模型

IE盒子模型如下圖：

圖中的內(nèi)層是content依次是content padding border。通常我們設(shè)置背景時就是內(nèi)容洛史、內(nèi)邊距惯殊、邊框這三部分。而外邊距是透明的也殖，不會遮擋其他元素土思。

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

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

兩個模型寬度和高度的計算（是不一樣的）?

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;

上面的兩個寬度相加的屬性是一樣的忆嗜。因此我們應(yīng)該選擇標準盒子模型己儒，在網(wǎng)頁的頂部加上 DOCTYPE 聲明。

2.CSS所有選擇器及其優(yōu)先級捆毫、使用場景闪湾，哪些可以繼承，如何運用at規(guī)則

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（直接相鄰元素選擇器----匹配之后的相鄰?fù)壴兀?E~F（普通相鄰元素選擇器----匹配之后的同級元素）

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

css選擇器優(yōu)先級：

選擇器優(yōu)先級由高到低分別為：

!important > 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式 >id選擇器>類選擇器>偽類選擇器>屬性選擇器>標簽選擇器> 通配符選擇器（* 應(yīng)少用）>瀏覽器自定義；

當比較多個相同級別的CSS選擇器優(yōu)先級時宏胯，它們定義的位置將決定一切羽嫡。下面從位置上將CSS優(yōu)先級由高到低分為六級：

1、位于<head/>標簽里的<style/>中所定義的CSS擁有最高級的優(yōu)先權(quán)肩袍。

2厂僧、第二級的優(yōu)先屬性由位于 <style/>標簽中的 @import 引入樣式表所定義。

3了牛、第三級的優(yōu)先屬性由<link/>標簽所引入的樣式表定義。

4辰妙、第四級的優(yōu)先屬性由<link/>標簽所引入的樣式表內(nèi)的 @import 導(dǎo)入樣式表定義鹰祸。

5、第五級優(yōu)先的樣式有用戶設(shè)定密浑。

6蛙婴、最低級的優(yōu)先權(quán)由瀏覽器默認。

使用場景：

class使用場景：需要某些特定樣式的標簽則放在同一個class中尔破，需要此樣式的標簽可再添加此類街图。（class不可被javascript中的GetElementByID函數(shù)所調(diào)用）

id使用場景：1、根據(jù)提供的唯一id號快速獲取標簽對象懒构，如：document.getElementById(id) 餐济；2、用于充當label標簽for屬性的值：示例：<label for='userid'>用戶名：</label>胆剧，表示單擊此label標簽時絮姆，id為userid的標簽獲得焦點

CSS哪些屬性可以繼承？

css繼承特性主要是指文本方面的繼承(比如字體秩霍、顏色篙悯、字體大小等)，盒模型相關(guān)的屬性基本沒有繼承特性铃绒。

不可繼承的：

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

內(nèi)聯(lián)元素可繼承的：

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規(guī)則及使用示例：

@charset

@import

@namespace

@document

@font-face

@keyframes

@media

@page

@supports

/*定義字符集*/@charset "utf-8"/*導(dǎo)入css文件*/@import "base.css"/*自定義字體*/@font-face {}/*聲明CSS3 animation動畫關(guān)鍵幀*/@keyframes fadeIn {}/*媒體查詢*/@media{}

3.CSS偽類和偽元素有哪些获印，它們的區(qū)別和實際應(yīng)用

偽類的例子有：

:hover

:active

:first-child

:visited

等。

偽元素的例子有：

:first-line

:first-letter

:after

:before

偽類和偽元素的根本區(qū)別在于：

它們是否創(chuàng)造了新的元素(抽象)街州。從我們模仿其意義的角度來看兼丰，如果需要添加新元素加以標識的，就是偽元素唆缴，反之鳍征，如果只需要在既有元素上添加類別的，就是偽類面徽。

偽元素在一個選擇器里只能出現(xiàn)一次艳丛，并且只能出現(xiàn)在末尾;

偽類則是像真正的類一樣發(fā)揮著類的作用匣掸，沒有數(shù)量上的限制，只要不是相互排斥的偽類氮双，也可以同時使用在相同的元素上碰酝。

實際使用：

偽類用一個冒號表示 :first-child

偽元素則使用兩個冒號表示 ::first-line?

4.CSS幾種定位的規(guī)則、定位參照物戴差、對文檔流的影響送爸，如何選擇最好的定位方式，雪碧圖實現(xiàn)原理

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

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

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

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

相對本元素的左上角進行定位蚓让，top,left,bottom,right都可以有值乾忱。雖然經(jīng)過定位后，位置可能會移動历极，但是本元素并沒有脫離文檔流窄瘟，還占有原來的頁面空間√诵叮可以設(shè)置z-index蹄葱。使本元素相對于文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近用戶的視線锄列。

相對定位最大的作用是為了實現(xiàn)某個元素相對于本元素的左上角絕對定位图云，本元素需要設(shè)置position為relative。

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

相對于祖代中有relative(相對定位)并且離本元素層級關(guān)系上是最近的元素的左上角進行定位竣况，如果在祖代元素中沒有有relative定位的，就默認相對于body進行定位筒严。

絕對定位是脫離文檔流的丹泉，與浮動定位是一樣的效果，會壓在非定位元素的上方鸭蛙∧『蓿可以設(shè)置z-index屬性。

雪碧圖實現(xiàn)原理：

CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中娶视，從而減少你的網(wǎng)站的HTTP請求數(shù)量晒哄。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復(fù)雜了，圖片是在CSS中定義揩晴，而非<img>標簽勋陪。

5.寫出盡可能多的水平垂直居中的方案并對比它們的優(yōu)缺點

行內(nèi)元素水平居中：

首先看它的父元素是不是塊級元素，如果是硫兰，則直接給父元素設(shè)置?text-align: center;?

如果不是诅愚，則先將其父元素設(shè)置為塊級元素，再給父元素設(shè)置?text-align: center;

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

1）需要誰居中劫映，給其設(shè)置 margin: 0 auto; （作用：使盒子自己居中）

2)? 首先設(shè)置父元素為相對定位违孝，再設(shè)置子元素為絕對定位，設(shè)置子元素的left:50%泳赋，即讓子元素的左上角水平居中雌桑；

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

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

1) 默認子元素的寬度和父元素一樣，這時需要設(shè)置子元素為display: inline-block; 或 display: inline;即將其轉(zhuǎn)換成行內(nèi)塊級/行內(nèi)元素祖今，給父元素設(shè)置 text-align: center;

2) 首先設(shè)置父元素為相對定位校坑，再設(shè)置子元素為絕對定位，設(shè)置子元素的left:50%千诬，即讓子元素的左上角水平居中耍目；

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

使用flexbox布局實現(xiàn)水平居中（寬度定不定都可以）:

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

單行的行內(nèi)元素垂直居中:

只需要設(shè)置單行行內(nèi)元素的"行高等于盒子的高"即可徐绑；

多行的行內(nèi)元素垂直居中:

使用給父元素設(shè)置display:table-cell;和vertical-align: middle;屬即可邪驮；

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

首先設(shè)置父元素為相對定位，再設(shè)置子元素為絕對定位傲茄，設(shè)置子元素的top: 50%毅访，即讓子元素的左上角垂直居中；

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

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

塊級元素垂直居中方法二：使用flexbox布局實現(xiàn)（高度定不定都可以）

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

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

方法一：

設(shè)置父元素為相對定位喻粹，給子元素設(shè)置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

設(shè)置父元素為相對定位草巡，給子元素設(shè)置絕對定位磷斧，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;

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

方法一：使用定位屬性

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

方案二：使用flex布局實現(xiàn)

設(shè)置父元素為flex定位弛饭，justify-content: center; align-items: center;

6.BFC的布局規(guī)則，實現(xiàn)原理萍歉，可以解決的問題

BFC直譯為塊級格式化上下文侣颂，它是一個獨立的渲染區(qū)域，只有Block-level box參與枪孩，它規(guī)定了內(nèi)部的Block-level Box如何布局憔晒，并且與外部毫不相干藻肄。

注意：可以把BFC理解為一個大的盒子，其內(nèi)部是由Block-level box組成的

BFC布局規(guī)則：

內(nèi)部的Box會在垂直方向拒担，一個接一個地放置嘹屯。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊

每個元素的margin box的左邊从撼， 與包含塊border box的左邊相接觸(對于從左往右的格式化州弟，否則相反)。即使存在浮動也是如此低零。

BFC的區(qū)域不會與float box重疊婆翔。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素掏婶。反之也如此啃奴。

計算BFC的高度時，浮動元素也參與計算

BFC的作用及原理：

1. 自適應(yīng)兩欄布局

2. 清除內(nèi)部浮動

3. 防止垂直 margin 重疊

BFC內(nèi)部的元素和外部的元素絕對不會互相影響雄妥，因此最蕾， 當BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局老厌，BFC會通過變窄瘟则，而不與浮動有重疊。同樣的梅桩，當BFC內(nèi)部有浮動時壹粟，為了不影響外部元素的布局拜隧，BFC計算高度時會包括浮動的高度宿百。避免margin重疊也是這樣的一個道理。

7.CSS函數(shù)有哪些洪添？

根據(jù)w3cplus中可以劃分為以下幾類：?

屬性函數(shù)：attr()垦页；?

背景圖片函數(shù)：linear-gradient()、radial-gradient()干奢、conic-gradient()痊焊、repeating-linear-gradient()、repeating-radial-gradient()忿峻、repeating-conic-gradient()薄啥、image-set()、image()逛尚、url()垄惧、element()；

顏色函數(shù)：rgb()绰寞、rgba()到逊、hsl()铣口、hsla()、hwb()觉壶、color-mod()脑题；

圖形函數(shù)：circle()、ellipse()铜靶、inset()叔遂、polygon()、path()?

濾鏡函數(shù)：blur()旷坦、brightness()掏熬、contrast()、drop-shadow()秒梅、grayscale()旗芬、hue-rotate()、invert()捆蜀、opacity()疮丛、saturate()、sepia()辆它；?

轉(zhuǎn)換函數(shù)：matrix()誊薄、matrix3d()、perspective()锰茉、rotate()呢蔫、rotate3d()、rotateX()飒筑、rotateY()片吊、rotateZ()、scale()协屡、scale3d()俏脊、scaleX()、scaleY()肤晓、scaleZ()爷贫、skew()、skewX()补憾、skewY()漫萄、translate()、translateX()盈匾、translateY()腾务、translateZ()、translate3d()威酒；?

數(shù)學(xué)函數(shù)：calc()窑睁、min()挺峡、max()、mixmax()担钮、repeat()橱赠；

緩動函數(shù)：cubic-bezier()、steps()箫津；?

其他函數(shù)：counter()狭姨、counters()、toggle()苏遥、var()饼拍、 symbols()。?

8.PostCSS田炭、Sass师抄、Less的異同，以及使用配置教硫，至少掌握一種

●?編譯環(huán)境不一樣叨吮，Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理的瞬矩，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器茶鉴，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件景用，直接放到項目中涵叮；

● 變量符號不一樣，Less是@伞插，而Scss是$割粮；

● 輸出設(shè)置，Less沒有輸出設(shè)置蜂怎，Sass提供4中輸出選項：nested, compact, compressed 和 expanded穆刻；

● 處理條件語句置尔，Sass支持條件語句杠步，可以使用if{}else{},for{}循環(huán)等等。LESS的條件語句使用有些另類榜轿，他不是我們常見的關(guān)鍵詞if和else if之類幽歼，而其實現(xiàn)方式是利用關(guān)鍵詞“when”；

● 引用外部文件谬盐，文件名如果以下劃線_開頭的話甸私，Sass會認為該文件是一個引用文件，不會將其編譯為css文件飞傀，ess引用外部文件和css中的@import沒什么差異皇型；

● 工具庫的不同诬烹，Sass有工具庫Compass, 簡單說，Sass和Compass的關(guān)系有點像Javascript和jQuery的關(guān)系,Compass在Sass的基礎(chǔ)上弃鸦，封裝了一系列有用的模塊和模板绞吁，補充強化了Sass的功能。Less有UI組件庫Bootstrap,Bootstrap是web前端開發(fā)中一個比較有名的前端UI組件庫唬格，Bootstrap的樣式文件部分源碼就是采用Less語法編寫家破。

● PostCSS介紹：

PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二個就是調(diào)用插件來處理 AST 并得到結(jié)果购岗。因此汰聋，不能簡單的把 PostCSS 歸類成 CSS 預(yù)處理或后處理工具。PostCSS 所能執(zhí)行的任務(wù)非常多喊积，同時涵蓋了傳統(tǒng)意義上的預(yù)處理和后處理烹困。

● PostCSS使用

PostCSS 一般不單獨使用，而是與已有的構(gòu)建工具進行集成乾吻。PostCSS 與主流的構(gòu)建工具韭邓，如 Webpack、Grunt 和 Gulp 都可以進行集成溶弟。完成集成之后女淑，選擇滿足功能需求的 PostCSS 插件并進行配置。現(xiàn)在經(jīng)常用到的是基于PostCSS的Autoprefixer插件辜御，使用方式可以在官網(wǎng)的插件庫進行查詢鸭你。下面是官網(wǎng)地址：

PostCSS官網(wǎng)地址

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

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

oocss

面對對象的規(guī)則，主要的原則是兩種：分離結(jié)構(gòu)和外觀碳抄，分離容器和內(nèi)容愉老。

名詞解釋

分離結(jié)構(gòu)和外觀：增加可重復(fù)的設(shè)計單元，同時去推進產(chǎn)品和ui對這方面的思考剖效，比如下面的css使用時對象模式的命名和模塊化規(guī)則嫉入。

分離容器和內(nèi)容：指的是樣式的使用不以元素位置唯一匹配，在任何位置你都可以使用這個樣式璧尸，如果你不適用這個樣式咒林，會保持默認的樣式。

實例

// dom結(jié)構(gòu)<div class="toogle simple"> <div class="toogle-control open"> <div class="toogle-tittle">標題</div> </div> <div class="toogle-details "></div></div>

// 模塊的標記 唯一標識.toggle{}// 皮膚樣式的寫法爷光，如果基本結(jié)構(gòu)是一樣的垫竞，你可以用complex的一個輔助樣式.toggle.simple{}// 是否做嵌套寫法 相信很多預(yù)處理器的部分會支持嵌套 然后很多人會這樣寫,不被推薦的.toogle{ .toogle-control{ } .toogle-details{ }}// 其實你會這樣組織么 不是很建議 這樣會降低查詢效率 如果能確認唯一性的時候 其實直接寫子即可.toogle{}.toogle-control{}.toogle-details{}復(fù)制代碼

smacss

sma和oocss有很多類似之處，但區(qū)分的地方有很多蛀序，主要是對樣式的分類欢瞪。分別是：基礎(chǔ)活烙、布局、模塊遣鼓、狀態(tài)瓣颅、主題

基礎(chǔ)

可以適用于任何位置，我也稱全局樣式

布局

主要是用來實現(xiàn)不同的特色布局譬正，提高布局的復(fù)用率宫补，

模塊

設(shè)計中的模塊化，可重復(fù)使用的一個單元曾我，一般是dom+css的耦合綁定粉怕。

狀態(tài)

描述在特定狀態(tài)下的布局或者模塊的特殊化表現(xiàn)，這里我覺得要推薦下《css禪意花園》抒巢，在dom結(jié)構(gòu)不變的情況下贫贝，可以通過css的皮膚化實現(xiàn)樣式的改版。

主題

與狀態(tài)相比更加定制的是蛉谜，我們會針對有些特殊的模塊稚晚，進行主題的設(shè)置，包括一系列的顏色型诚、尺寸客燕、交互等進行重度設(shè)計，參數(shù)化設(shè)計狰贯。

案例

// dom結(jié)構(gòu)<div class="toogle toogle-simple"> <div class="toogle-control is-active"> <div class="toogle-tittle">標題</div> </div> <div class="toogle-details "></div></div>復(fù)制代碼

與oocss相比也搓，其實大部分設(shè)計思路是一樣的，以一個類作為css的作用域（作用域就是兩個限制涵紊，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用）傍妒，另外的區(qū)別就是針對皮膚和狀態(tài)的不同書寫規(guī)則。

bem

bem就是塊摸柄、元素颤练、修飾符的思維去寫樣式。它不涉及具體的css結(jié)構(gòu)驱负，只是建議你如何命名css.

案例

// dom結(jié)構(gòu)<div class="toogle toogle--simple"> <div class="toogle_control toogs="toogle_details "></div></div>s="toogle_details "></div></div>

解釋

塊級：所屬組件的名稱

元素：元素在組件里的名稱

修飾符：任何與元素修飾相關(guān)的類

style-components??

徹底拋棄 CSS嗦玖，用 JavaScript 寫 CSS 規(guī)則,點擊style-components進入github的主頁。

CSS Modules??

使用JS編譯原生的CSS文件电媳，使其具備模塊化的能力踏揣，點擊CSS Modules進入github主頁庆亡。

這些模塊化方案都是各有優(yōu)缺點匾乓，如命名約定：命名復(fù)雜、缺乏擴展又谋、 CSS Modules當然也有一些缺點(你得先學(xué)會它再去談優(yōu)劣)拼缝。在眾多解決方案中娱局，沒有絕對的優(yōu)劣。還是要結(jié)合自己的場景來決定咧七。

10.CSS如何配置按需加載

?●?使用require.js按需加載CSS

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

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

//調(diào)用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 被視為阻塞渲染的資源耻涛，這意味著瀏覽器將不會渲染任何已處理的內(nèi)容，直至 CSSOM 構(gòu)建完畢瘟檩。請務(wù)必精簡您的 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)">

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

例如卓研，上面的第一個樣式表聲明未提供任何媒體類型或查詢，因此它適用于所有情況睹簇，也就是說奏赘，它始終會阻塞渲染。第二個樣式表則不然太惠，它只在打印內(nèi)容時適用---或許您想重新安排布局磨淌、更改字體等等，因此在網(wǎng)頁首次加載時凿渊，該樣式表不需要阻塞渲染伦糯。最后，最后一個樣式表聲明提供由瀏覽器執(zhí)行的“媒體查詢”：符合條件時嗽元，瀏覽器將阻塞渲染敛纲，直至樣式表下載并處理完畢。

12.熟練使用CSS(3)實現(xiàn)常見動畫剂癌，如漸變淤翔、移動、旋轉(zhuǎn)佩谷、縮放等等

我把一些常用的CSS動畫效果代碼上傳到github了旁壮，有需要的同學(xué)可以點擊下載，CSS常用動畫谐檀；

另外還有一些CSS動畫庫抡谐，比如：animate.css、magic.css桐猬、Hover.css麦撵、

13.CSS瀏覽器兼容性寫法

1. 瀏覽器CSS樣式初始化

由于每個瀏覽器的css默認樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的代碼免胃，在所有CSS開始前音五，先把marin和padding都設(shè)為0，以防不同瀏覽器的顯示效果不一樣羔沙。

*{margin: 0;padding: 0;}

關(guān)于瀏覽器CSS樣式初始化躺涝，經(jīng)驗不豐富的話，可能也不知道該初始化什么扼雏，這里給大家推薦一個庫坚嗜，Normalize.css，github star數(shù)量接近3.4萬诗充，選取展示其中幾個樣式設(shè)置惶傻，如下：

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樣式初始化，相信能解決不少常規(guī)的兼容性問題其障，接下來再看看瀏覽器的私有屬性银室。

2. 瀏覽器私有屬性

我們經(jīng)常會在某個CSS的屬性前添加一些前綴，比如-webkit-励翼，-moz- 蜈敢，-ms-，這些就是瀏覽器的私有屬性汽抚。

為什么會出現(xiàn)私有屬性呢抓狭？這是因為制定HTML和CSS標準的組織W3C動作是很慢的。

通常造烁，有W3C組織成員提出一個新屬性否过，比如說圓角border-radius，大家都覺得好惭蟋，但W3C制定標準苗桂，要走很復(fù)雜的程序，審查等告组。而瀏覽器商市場推廣時間緊煤伟，如果一個屬性已經(jīng)夠成熟了，就會在瀏覽器中加入支持木缝。

但是為避免日后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.自動化插件

Autoprefixer是一款自動管理瀏覽器前綴的插件，它可以解析CSS文件并且添加瀏覽器前綴到CSS內(nèi)容里伊群，使用Can I Use（caniuse網(wǎng)站）的數(shù)據(jù)來決定哪些前綴是需要的考杉。

把Autoprefixer添加到資源構(gòu)建工具（例如Grunt）后，可以完全忘記有關(guān)CSS前綴的東西舰始，只需按照最新的W3C規(guī)范來正常書寫CSS即可崇棠。如果項目需要支持舊版瀏覽器，可修改browsers參數(shù)設(shè)置 丸卷。

//我們編寫的代碼div {transform: rotate(30deg);}

// 自動補全的代碼枕稀，具體補全哪些由要兼容的瀏覽器版本決定，可以自行設(shè)置div {-ms-transform: rotate(30deg);-webkit-transform: rotate(30deg);-o-transform: rotate(30deg);-moz-transform: rotate(30deg);transform: rotate(30deg);}

目前webpack谜嫉、gulp萎坷、grunt都有相應(yīng)的插件，如果還沒有使用沐兰，那就趕緊應(yīng)用到我們的項目中吧哆档，別再讓CSS兼容性浪費你的時間！

14.掌握一套完整的響應(yīng)式布局方案

比較常用的布局方式有float,position,display,table,flex,grid等住闯。

全屏布局相關(guān)方案的兼容性瓜浸、性能和自適應(yīng)一覽表：

實際項目使用中一般是根據(jù)具體場景去選擇相應(yīng)的布局方式。