擇器的權(quán)重和優(yōu)先級(jí)

CSS 選擇器有很多，不同的選擇器的權(quán)重和優(yōu)先級(jí)不一樣，對(duì)于一個(gè)元素，如果存在多個(gè)選擇器，那么就需要根據(jù)權(quán)重來計(jì)算其優(yōu)先級(jí)。

權(quán)重分為四級(jí)，分別是：

1. 代表內(nèi)聯(lián)樣式，如style="xxx"，權(quán)值為 1000；
2. 代表 ID 選擇器，如#content，權(quán)值為 100；
3. 代表類、偽類和屬性選擇器，如.content、:hover、[attribute]，權(quán)值為 10；
4. 代表元素選擇器和偽元素選擇器，如div、p，權(quán)值為 1。

需要注意的是：通用選擇器（\*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級(jí)中，所以他們的權(quán)值都為 0。 權(quán)重值大的選擇器其優(yōu)先級(jí)也高，相同權(quán)重的優(yōu)先級(jí)又遵循后定義覆蓋前面定義的情況。

#盒模型

1. 什么是“盒子”

初學(xué) CSS 的朋友，一開始學(xué) CSS 基礎(chǔ)知識(shí)的時(shí)候一定學(xué)過padding border和margin，即內(nèi)邊距、邊框和外邊距。它們?nèi)呔蜆?gòu)成了一個(gè)“盒子”。就像我們收到的快遞，本來買了一部小小的手機(jī)，收到的卻是那么大一個(gè)盒子。因?yàn)槭謾C(jī)白色的包裝盒和手機(jī)機(jī)器之間有間隔層（內(nèi)邊距），手機(jī)白色盒子有厚度，雖然很?。ㄟ吙颍凶雍涂爝f箱子之間還有一層泡沫板（外邊距）。這就是一個(gè)典型的盒子。

如上圖，真正的內(nèi)容就是這些文字，文字外圍有 10px 的內(nèi)邊距，5px 的邊框，10px 的外邊距?？吹胶凶恿税?？

題目：盒子模型的寬度如何計(jì)算

2. 固定寬度的盒子

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
    文章言簡意賅的介紹的瀏覽器的工作過程，web前端
</div>

如上圖，得到網(wǎng)頁效果之后，我們可以用截圖工具來量一下文字內(nèi)容的寬度。發(fā)現(xiàn)，文字內(nèi)容的寬度剛好是 300px，也就是我們?cè)O(shè)置的寬度。

因此，在盒子模型中，我們?cè)O(shè)置的寬度都是內(nèi)容寬度，不是整個(gè)盒子的寬度。而整個(gè)盒子的寬度是：（內(nèi)容寬度 + border寬度 + padding寬度 + margin寬度）之和。這樣我們改四個(gè)中的其中一個(gè)，都會(huì)導(dǎo)致盒子寬度的改變。這對(duì)我們來說不友好。

沒關(guān)系，這個(gè)東西不友好早就有人發(fā)現(xiàn)了，而且已經(jīng)解決，下文再說。

3. 充滿父容器的盒子

默認(rèn)情況下，div是display:block，寬度會(huì)充滿整個(gè)父容器。如下圖：

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
    之前看過一篇文章，叫做《瀏覽器工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》，
    文章言簡意賅的介紹的瀏覽器的工作過程，web前端
    之前看過一篇文章，叫做《瀏覽器工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》，
    文章言簡意賅的介紹的瀏覽器的工作過程，web前端
</div>

• 但是別忘記，這個(gè) div 是個(gè)盒子模型，它的整個(gè)寬度包括（內(nèi)容寬度 + border寬度 + padding寬度 + margin寬度），整個(gè)的寬度充滿父容器。
• 問題就在這里。如果父容器寬度不變，我們手動(dòng)增大margin、border或padding其中一項(xiàng)的寬度值，都會(huì)導(dǎo)致內(nèi)容寬度的減少。極端情況下，如果內(nèi)容的寬度壓縮到不能再壓縮了（例如一個(gè)字的寬度），那么瀏覽器會(huì)強(qiáng)迫增加父容器的寬度。這可不是我們想要看到的。

4. 包裹內(nèi)容的盒子

這種情況下比較簡單，內(nèi)容的寬度按照內(nèi)容計(jì)算，盒子的寬度將在內(nèi)容寬度的基礎(chǔ)上再增加（padding寬度 + border寬度 + margin寬度）之和。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
    之前看過一篇文章，叫做《瀏覽器工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》
</div>

5. box-sizing:border-box

前面提到，為盒子模型設(shè)置寬度，結(jié)果只是設(shè)置了內(nèi)容的寬度，這個(gè)不合理。如何解決這一問題？答案就是為盒子指定樣式：box-sizing:border-box。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;">
    之前看過一篇文章，叫做《瀏覽器工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》
</div>

上圖中，為div設(shè)置了box-sizing:border-box之后，300px 的寬度是內(nèi)容 + padding + 邊框的寬度（不包括margin），這樣就比較符合我們的實(shí)際要求了。建議大家在為系統(tǒng)寫 CSS 時(shí)候，第一個(gè)樣式是：

* {
    box-sizing:border-box;
}

大名鼎鼎的 Bootstrap 也把box-sizing:border-box加入到它的*選擇器中，我們?yōu)槭裁床贿@樣做呢？

6. 縱向 margin 重疊

這里提到 margin，就不得不提一下 margin 的這一特性——縱向重疊。如<p>的縱向 margin 是 16px，那么兩個(gè)<p>之間縱向的距離是多少？—— 按常理來說應(yīng)該是 16 + 16 = 32px，但是答案仍然是 16px。因?yàn)榭v向的 margin 是會(huì)重疊的，如果兩者不一樣大的話，大的會(huì)把小的“吃掉”。

#浮動(dòng)float

float 用于網(wǎng)頁布局比較多，使用起來也比較簡單，這里總結(jié)了一些比較重要、需要注意的知識(shí)點(diǎn)，供大家參考。

1. 誤解和誤用

float 被設(shè)計(jì)出來的初衷是用于文字環(huán)繞效果，即一個(gè)圖片一段文字，圖片float:left之后，文字會(huì)環(huán)繞圖片。

<div>
    <img src="image/1.png" style="float:left">
    一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字
</div>

但是，后來大家發(fā)現(xiàn)結(jié)合float + div可以實(shí)現(xiàn)之前通過table實(shí)現(xiàn)的網(wǎng)頁布局，因此就被“誤用”于網(wǎng)頁布局了。

題目：為何 float 會(huì)導(dǎo)致父元素塌陷？

2. 破壞性

float 的破壞性 —— float 破壞了父標(biāo)簽的原本結(jié)構(gòu)，使得父標(biāo)簽出現(xiàn)了坍塌現(xiàn)象。導(dǎo)致這一現(xiàn)象的最根本原因在于：被設(shè)置了 float 的元素會(huì)脫離文檔流。其根本原因在于 float 的設(shè)計(jì)初衷是解決文字環(huán)繞圖片的問題。大家要記住 float 的這個(gè)影響。

3. 包裹性

包裹性也是 float 的一個(gè)非常重要的特性，大家用 float 時(shí)一定要熟知這一特性。咱們還是先從一個(gè)小例子看起：

如上圖，普通的 div 如果沒有設(shè)置寬度，它會(huì)撐滿整個(gè)屏幕，在之前的盒子模型那一節(jié)也講到過。而如果給 div 增加float:left之后，它突然變得緊湊了，寬度發(fā)生了變化，把內(nèi)容中的三個(gè)字包裹了——這就是包裹性。為 div 設(shè)置了 float 之后，其寬度會(huì)自動(dòng)調(diào)整為包裹住內(nèi)容寬度，而不是撐滿整個(gè)父容器。

• 注意，此時(shí) div 雖然體現(xiàn)了包裹性，但是它的 display 樣式是沒有變化的，還是display: block。
• float 為什么要具有包裹性？其實(shí)答案還是得從 float 的設(shè)計(jì)初衷來尋找，float 是被設(shè)計(jì)用于實(shí)現(xiàn)文字環(huán)繞效果的。文字環(huán)繞圖片比較好理解，但是如果想要讓文字環(huán)繞一個(gè) div 呢？此時(shí) div 不被“包裹”起來的話，就無法實(shí)現(xiàn)環(huán)繞效果了。

4. 清空格

float 還有一個(gè)大家可能不是很熟悉的特性——清空格。按照慣例，咱還是先舉例子說明。

<div style="border: 2px solid blue; padding:3px;">
    <img src="image/1.png"/>
    <img src="image/2.png"/>
    <img src="image/3.png"/>
    <img src="image/4.png"/>
</div>

加上float:left之后：

• 上面第一張圖中，正常的 img 中間是會(huì)有空格的，因?yàn)槎鄠€(gè) img 標(biāo)簽會(huì)有換行，而瀏覽器識(shí)別換行為空格，這也是很正常的。第二張圖中，為 img 增加了float:left的樣式，這就使得 img 之間沒有了空格，4 個(gè) img 緊緊挨著。
• 如果大家之前沒注意，現(xiàn)在想想之前寫過的程序，是不是有這個(gè)特性。為什么 float 適合用于網(wǎng)頁排版（俗稱“砌磚頭”）？就是因?yàn)?float 排版出來的網(wǎng)頁嚴(yán)絲合縫，中間連個(gè)蒼蠅都飛不進(jìn)去。
• “清空格”這一特性的根本原因是 float 會(huì)導(dǎo)致節(jié)點(diǎn)脫離文檔流結(jié)構(gòu)。它都不屬于文檔流結(jié)構(gòu)了，那么它身邊的什么換行、空格就都和它沒了關(guān)系，它就盡量往一邊靠攏，能靠多近就靠多近，這就是清空格的本質(zhì)。

題目：手寫 clearfix

5. clearfix

清除浮動(dòng)的影響，一般使用的樣式如下，統(tǒng)稱clearfix代碼。所有 float 元素的父容器，一般情況下都應(yīng)該加clearfix這個(gè) class。

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

<div class="clearfix">
    <img src="image/1.png" style="float: left"/>
    <img src="image/2.png" style="float: left"/>
</div>

6. 小結(jié)

float 的設(shè)計(jì)初衷是解決文字環(huán)繞圖片的問題，后來誤打誤撞用于做布局，因此有許多不合適或者需要注意的地方，上文基本都講到了需要的知識(shí)點(diǎn)。如果是剛開始接觸 float 的同學(xué)，學(xué)完上面的基礎(chǔ)知識(shí)之后，還應(yīng)該做一些練習(xí)實(shí)戰(zhàn)一下 —— 經(jīng)典的“圣杯布局”和“雙飛翼布局”。這里就不再展開講了，網(wǎng)上資料非常多，例如淺談面試中?？嫉膬煞N經(jīng)典布局——圣杯與雙飛翼（此文的最后兩張圖清晰地展示了這兩種布局）。

#定位 position

position 用于網(wǎng)頁元素的定位，可設(shè)置 static/relative/absolute/fixed 這些值，其中 static 是默認(rèn)值，不用介紹。

題目：relative 和 absolute 有何區(qū)別？

1. relative

相對(duì)定位 relative 可以用一個(gè)例子很輕松地演示出來。例如我們寫 4 個(gè)<p>，出來的樣子大家不用看也能知道。

<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
<p>第四段文字</p>

然后我們?cè)诘谌齻€(gè)<p>上面，加上position:relative并且設(shè)置left和top值，看這個(gè)<p>有什么變化。

<p>第一段文字</p>
<p>第二段文字</p>
<p style="position:relative; top: 10px; left: 10px">第三段文字</p>
<p>第四段文字</p>

上圖中，大家應(yīng)該要識(shí)別出兩個(gè)信息（相信大部分人會(huì)忽略第二個(gè)信息）

• 第三個(gè)<p>發(fā)生了位置變化，分別向右向下移動(dòng)了10px；
• 其他的三個(gè)<p>位置沒有發(fā)生變化，這一點(diǎn)也很重要。

可見，relative 會(huì)導(dǎo)致自身位置的相對(duì)變化，而不會(huì)影響其他元素的位置、大小。這是 relative 的要點(diǎn)之一。還有第二個(gè)要點(diǎn)，就是 relative 產(chǎn)生一個(gè)新的定位上下文。下文有關(guān)于定位上下文的詳細(xì)介紹，這里可以先通過一個(gè)例子來展示一下區(qū)別：

注意看這兩圖的區(qū)別，下文將有解釋。

2. absolute

還是先寫一個(gè)基本的 demo。

<p>第一段文字</p>
<p>第二段文字</p>
<p style="background: yellow">第三段文字</p>
<p>第四段文字</p>

然后，我們把第三個(gè)<p>改為position:absolute;，看看會(huì)發(fā)生什么變化。

從上面的結(jié)果中，我們能看出幾點(diǎn)信息：

• absolute 元素脫離了文檔結(jié)構(gòu)。和 relative 不同，其他三個(gè)元素的位置重新排列了。只要元素會(huì)脫離文檔結(jié)構(gòu)，它就會(huì)產(chǎn)生破壞性，導(dǎo)致父元素坍塌。（此時(shí)你應(yīng)該能立刻想起來，float 元素也會(huì)脫離文檔結(jié)構(gòu)。）
• absolute 元素具有“包裹性”。之前<p>的寬度是撐滿整個(gè)屏幕的，而此時(shí)<p>的寬度剛好是內(nèi)容的寬度。
• absolute 元素具有“跟隨性”。雖然 absolute 元素脫離了文檔結(jié)構(gòu)，但是它的位置并沒有發(fā)生變化，還是老老實(shí)實(shí)地呆在它原本的位置，因?yàn)槲覀兇藭r(shí)沒有設(shè)置 top、left 的值。
• absolute 元素會(huì)懸浮在頁面上方，會(huì)遮擋住下方的頁面內(nèi)容。

最后，通過給 absolute元素設(shè)置 top、left 值，可自定義其內(nèi)容，這個(gè)都是平時(shí)比較常用的了。這里需要注意的是，設(shè)置了 top、left 值時(shí)，元素是相對(duì)于最近的定位上下文來定位的，而不是相對(duì)于瀏覽器定位。

3. fixed

其實(shí) fixed 和 absolute 是一樣的，唯一的區(qū)別在于：absolute 元素是根據(jù)最近的定位上下文確定位置，而 fixed 根據(jù) window （或者 iframe）確定位置。

題目：relative、absolute 和 fixed 分別依據(jù)誰來定位？

4. 定位上下文

relative 元素的定位永遠(yuǎn)是相對(duì)于元素自身位置的，和其他元素沒關(guān)系，也不會(huì)影響其他元素。

fixed 元素的定位是相對(duì)于 window （或者 iframe）邊界的，和其他元素沒有關(guān)系。但是它具有破壞性，會(huì)導(dǎo)致其他元素位置的變化。

absolute 的定位相對(duì)于前兩者要復(fù)雜許多。如果為 absolute 設(shè)置了 top、left，瀏覽器會(huì)根據(jù)什么去確定它的縱向和橫向的偏移量呢？答案是瀏覽器會(huì)遞歸查找該元素的所有父元素，如果找到一個(gè)設(shè)置了position:relative/absolute/fixed的元素，就以該元素為基準(zhǔn)定位，如果沒找到，就以瀏覽器邊界定位。如下兩個(gè)圖所示：

#flex布局

布局的傳統(tǒng)解決方案基于盒子模型，依賴 display 屬性 + position 屬性 + float 屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中（下文會(huì)專門講解）就不容易實(shí)現(xiàn)。在目前主流的移動(dòng)端頁面中，使用 flex 布局能更好地完成需求，因此 flex 布局的知識(shí)是必須要掌握的。

1. 基本使用

任何一個(gè)容器都可以使用 flex 布局，代碼也很簡單。

<style type="text/css">
    .container {
      display: flex;
    }
    .item {
        border: 1px solid #000;
        flex: 1;
    }
</style>

<div class="container">
    <div class="item">aaa</div>
    <div class="item" style="flex: 2">bbb</div>
    <div class="item">ccc</div>
    <div class="item">ddd</div>
</div>

注意，第三個(gè)<div>的flex: 2，其他的<div>的flex: 1，這樣第二個(gè)<div>的寬度就是其他的<div>的兩倍。

2. 設(shè)計(jì)原理

設(shè)置了display: flex的元素，我們稱為“容器”（flex container），其所有的子節(jié)點(diǎn)我們稱為“成員”（flex item）。容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做 main start，結(jié)束位置叫做 main end；交叉軸的開始位置叫做 cross start，結(jié)束位置叫做cross end。項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size，占據(jù)的交叉軸空間叫做 cross size。

將以上文字和圖片結(jié)合起來，再詳細(xì)看一遍，這樣就能理解 flex 的設(shè)計(jì)原理，才能更好地實(shí)際使用。

3. 設(shè)置主軸的方向

flex-direction可決定主軸的方向，有四個(gè)可選值：

• row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
• row-reverse：主軸為水平方向，起點(diǎn)在右端。
• column：主軸為垂直方向，起點(diǎn)在上沿。
• column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

.box {
  flex-direction: column-reverse| column | row | row-reverse;
}

以上代碼設(shè)置的主軸方向，將依次對(duì)應(yīng)下圖：

4. 設(shè)置主軸的對(duì)齊方式

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式，值如下：

• flex-start（默認(rèn)值）：向主軸開始方向?qū)R。
• flex-end：向主軸結(jié)束方向?qū)R。
• center： 居中。
• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
• space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

5. 交叉軸的對(duì)齊方式

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊，值如下：

• flex-start：交叉軸的起點(diǎn)對(duì)齊。
• flex-end：交叉軸的終點(diǎn)對(duì)齊。
• center：交叉軸的中點(diǎn)對(duì)齊。
• baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
• stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，將占滿整個(gè)容器的高度。

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

#如何實(shí)現(xiàn)居中對(duì)齊？

題目：如何實(shí)現(xiàn)水平居中？

1. 水平居中

inline 元素用text-align: center;即可，如下：

.container {
   text-align: center;
}

block 元素可使用margin: auto;，PC 時(shí)代的很多網(wǎng)站都這么搞。

.container {
    text-align: center; 
}
.item {
    width: 1000px;
    margin: auto; 
}

絕對(duì)定位元素可結(jié)合left和margin實(shí)現(xiàn)，但是必須知道寬度。

.container {
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

題目：如何實(shí)現(xiàn)垂直居中？

2. 垂直居中

inline 元素可設(shè)置line-height的值等于height值，如單行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

絕對(duì)定位元素，可結(jié)合left和margin實(shí)現(xiàn)，但是必須知道尺寸。

• 優(yōu)點(diǎn)：兼容性好
• 缺點(diǎn)：需要提前知道尺寸

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

絕對(duì)定位可結(jié)合transform實(shí)現(xiàn)居中。

• 優(yōu)點(diǎn)：不需要提前知道尺寸
• 缺點(diǎn)：兼容性不好

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

絕對(duì)定位結(jié)合margin: auto，不需要提前知道尺寸，兼容性好。

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

其他的解決方案還有，不過沒必要掌握太多，能說出上文的這幾個(gè)解決方案即可。

#理解語義化

題目：如何理解 HTML 語義化？

所謂“語義”就是為了更易讀懂，這要分兩部分：

• 讓人（寫程序、讀程序）更易讀懂
• 讓機(jī)器（瀏覽器、搜索引擎）更易讀懂

1. 讓人更易讀懂

• 對(duì)于人來說，代碼可讀性、語義化就是一個(gè)非常廣泛的概念了，例如定義 JS 變量的時(shí)候使用更易讀懂的名稱，定義 CSS class 的時(shí)候也一樣，例如length list等，而不是使用a b這種誰都看不懂的名稱。
• 不過我們平常考查的“語義化”并不會(huì)考查這么廣義、這么泛的問題，而是考查 HTML 的語義化，是為了更好地讓機(jī)器讀懂 HTML。

2. 讓機(jī)器更易讀懂

• HTML 符合 XML 標(biāo)準(zhǔn)，但又和 XML 不一樣 —— HTML 不允許像 XML 那樣自定義標(biāo)簽名稱，HTML 有自己規(guī)定的標(biāo)簽名稱。問題就在這里 —— HTML 為何要自己規(guī)定那么多標(biāo)簽名稱呢，例如p div h1 ul等 —— 就是為了語義化。其實(shí)，如果你精通 CSS 的話，你完全可以全部用<div>標(biāo)簽來實(shí)現(xiàn)所有的網(wǎng)頁效果，其他的p h1 ul等標(biāo)簽可以一個(gè)都不用。但是我們不推薦這么做，這樣做就失去了 HTML 語義化的意義。
• 拿搜索引擎來說，爬蟲下載到我們網(wǎng)頁的 HTML 代碼，它如何更好地去理解網(wǎng)頁的內(nèi)容呢？—— 就是根據(jù) HTML 既定的標(biāo)簽。h1標(biāo)簽就代表是標(biāo)題；p里面的就是段落詳細(xì)內(nèi)容，權(quán)重肯定沒有標(biāo)題高；ul里面就是列表；strong就是加粗的強(qiáng)調(diào)的內(nèi)容 …… 如果我們不按照 HTML 語義化來寫，全部都用<div>標(biāo)簽，那搜索引擎將很難理解我們網(wǎng)頁的內(nèi)容。
• 為了加強(qiáng) HTML 語義化，HTML5 標(biāo)準(zhǔn)中又增加了header section article等標(biāo)簽。因此，書寫 HTML 時(shí)，語義化是非常重要的，否則 W3C 也沒必要辛辛苦苦制定出這些標(biāo)準(zhǔn)來。

#CSS3 動(dòng)畫

CSS3 可以實(shí)現(xiàn)動(dòng)畫，代替原來的 Flash 和 JavaScript 方案。

首先，使用@keyframes定義一個(gè)動(dòng)畫，名稱為testAnimation，如下代碼，通過百分比來設(shè)置不同的 CSS 樣式，規(guī)定動(dòng)畫的變化。所有的動(dòng)畫變化都可以這么定義出來。

@keyframes testAnimation
{
    0%   {background: red; left:0; top:0;}
    25%  {background: yellow; left:200px; top:0;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0; top:200px;}
    100% {background: red; left:0; top:0;}
}

后，針對(duì)一個(gè) CSS 選擇器來設(shè)置動(dòng)畫，例如針對(duì)div元素設(shè)置動(dòng)畫，如下：

div {
    width: 100px;
    height: 50px;
    position: absolute;

    animation-name: myfirst;
    animation-duration: 5s;
}

animation-name對(duì)應(yīng)到動(dòng)畫名稱，animation-duration是動(dòng)畫時(shí)長，還有其他屬性：

• animation-timing-function：規(guī)定動(dòng)畫的速度曲線。默認(rèn)是ease
• animation-delay：規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0
• animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1
• animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是normal
• animation-play-state ：規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是running
• animation-fill-mode：規(guī)定動(dòng)畫執(zhí)行之前和之后如何給動(dòng)畫的目標(biāo)應(yīng)用，默認(rèn)是none，保留在最后一幀可以用forwards

題目：CSS 的transition和animation有何區(qū)別？

首先transition和animation都可以做動(dòng)效，從語義上來理解，transition是過渡，由一個(gè)狀態(tài)過渡到另一個(gè)狀態(tài)，比如高度100px過渡到200px；而animation是動(dòng)畫，即更專業(yè)做動(dòng)效的，animation有幀的概念，可以設(shè)置關(guān)鍵幀keyframe，一個(gè)動(dòng)畫可以由多個(gè)關(guān)鍵幀多個(gè)狀態(tài)過渡組成，另外animation也包含上面提到的多個(gè)屬性。

#重繪和回流

重繪和回流是面試題經(jīng)?？嫉念}目，也是性能優(yōu)化當(dāng)中應(yīng)該注意的點(diǎn)，下面筆者簡單介紹下。

• 重繪：指的是當(dāng)頁面中的元素不脫離文檔流，而簡單地進(jìn)行樣式的變化，比如修改顏色、背景等，瀏覽器重新繪制樣式
• 回流：指的是處于文檔流中 DOM 的尺寸大小、位置或者某些屬性發(fā)生變化時(shí)，導(dǎo)致瀏覽器重新渲染部分或全部文檔的情況

相比之下，回流要比重繪消耗性能開支更大。另外，一些屬性的讀取也會(huì)引起回流，比如讀取某個(gè) DOM 的高度和寬度，或者使用getComputedStyle方法。在寫代碼的時(shí)候要避免回流和重繪。比如在筆試中可能會(huì)遇見下面的題目：

題目：找出下面代碼的優(yōu)化點(diǎn)，并且優(yōu)化它

var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
    var dom = document.getElementById('list');
    dom.innerHTML += '<li>' + data[i] + '</li>';
}

上面的代碼在循環(huán)中每次都獲取dom，然后對(duì)其內(nèi)部的 HTML 進(jìn)行累加li，每次都會(huì)操作 DOM 結(jié)構(gòu)，可以改成使用documentFragment或者先遍歷組成 HTML 的字符串，最后操作一次innerHTML。

#小結(jié)

本小節(jié)總結(jié)了 CSS 和 HTML 常考的知識(shí)點(diǎn)，包括 CSS 中比較重要的定位、布局的知識(shí)，也介紹了一些 CSS3 的知識(shí)點(diǎn)概念和題目，以及 HTML 的語義化。