知識體系整理之CSS篇

CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻佈局、高頻知識點、性能優化等方面進行概括。如對HTML知識點感興趣，可移步至：知識整理之HTML篇

CSS Hack

CSS Hack就是針對不一樣的瀏覽器或不一樣版本瀏覽器寫特定的CSS樣式達到讓瀏覽器兼容的過程。 CSS Hack常見的有三種形式：CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack。

CSS屬性Hack(在標準模式下)

color: red;  /* 全部瀏覽器識別 */
_color: red; /* 僅IE6 瀏覽器識別 */
-color: red; /* 僅IE6 瀏覽器識別 */
*color: red; /* 僅IE六、IE7 瀏覽器識別 */
+color: red; /* 僅IE六、IE7 瀏覽器識別 */
*+color: red; /* 僅IE六、IE7 瀏覽器識別 */
#color: red; /* 僅IE六、IE7 瀏覽器識別 */
color: red\0; /* 僅IE8-IE10 瀏覽器識別 */ 
color: red\9\0; /* 僅IE九、IE10 瀏覽器識別 */ 
color: red!important; /* 僅IE6 瀏覽器不支持 */ 
複製代碼

CSS選擇符Hack

*html #demo { color: red; } /* 僅IE6 瀏覽器識別 */
*+html #demo { color: red; } /* 僅IE六、IE7 瀏覽器識別 */
body:nth-of-type(1) #demo { color: red; } /* IE9+、FF3.5+、Chrome、Safari、Opera 能夠識別 */
head:first-child+body #demo { color: red; } /* IE7+、FF、Chrome、Safari、Opera 能夠識別 */
:root #demo { color: red9; } /* 僅IE9 識別 */
複製代碼

IE條件註釋Hack

<!--[if IE]>此處內容只有IE可見<![endif]-->
<!--[if IE6]>此處內容只有IE6.0可見<![endif]-->
<!--[if !IE 7]>此處內容只有IE7不能識別，其餘版本都能識別，固然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可識別,IE6沒法識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if lt IE 7]> 低於IE7的版本才能識別，IE7沒法識別。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7如下版本可識別<![endif]-->
<!--[if !IE]>此處內容只有非IE可見<![endif]-->
複製代碼

常見瀏覽器兼容性問題與解決方案？

不一樣瀏覽器的標籤默認的padding和margin不一樣

問題症狀：經常使用標籤，不加樣式控制的狀況下，各自的margin、padding差別較大。 解決方案：

* {
    margin: 0;
    padding: 0;
} 
```
備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的`margin`、`padding`是0。

### 塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大
問題症狀：常見症狀是IE6中後面的一塊被頂到下一行。
解決方案：在float的標籤樣式中設置
````css
#demo { display: inline } 
複製代碼

當標籤的高度設置小於10px，在IE六、IE7中會超出本身設置的高度

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度。 解決方案：給超出高度的標籤設置

#demo { overflow: hidden; }
/* 或者 */
#demo { line-height: 8px; }  /* 假設標籤高度爲9px */ 
複製代碼

行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距 解決方案：

#demo {
    display: block;
    display: inline;
    display: table;
}
複製代碼

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。 解決方案：

img { float: left; }
複製代碼

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。

IE9一下瀏覽器不能使用opacity

解決方案：

#demo {
    opacity: 0.5;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}
複製代碼

CSS選擇器類型，並舉例說明用法

類型： 基礎選擇器、組合選擇器、熟悉選擇器、僞類、僞元素

基礎選擇器

基礎選擇器包含：通用選擇器、元素選擇器、類選擇器、id選擇器

組合選擇器

組合選擇器包含：多元素選擇器、後代選擇器、子元素選擇器、毗鄰選擇器、相鄰選擇器

屬性選擇器

僞類選擇器

CSS1-2僞類選擇器

CSS3經常使用僞類選擇器

僞元素

僞類與僞元素的區別與做用

CSS3對僞類的定義：

1. 僞類存在的意義是爲了經過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。
2. 僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。
3. 任何常規選擇器能夠再任何位置使用僞類。僞類語法不區別大小寫。一些僞類的做用會互斥，另一些僞類能夠同時被同一個元素使用。而且，爲了知足用戶在操做DOM時產生的DOM結構改變，僞類也能夠是動態的。 其實第一段話就囊括CSS3僞類的所有定義了，這段話中指出CSS3僞類的功能有兩種：
4. 獲取不存在與DOM樹中的信息。好比a連接的:link、:actived等，這些信息不存在DOM樹結構中，只能經過css選擇器來獲取。
5. 獲取不能被常規CSS選擇器獲取的信息。好比經過:nth-child(odd)實現選擇偶數行設置背景色，若是不是用僞類，而是用JavaScript來設置就複雜得多。經過僞類實現了常規CSS沒法實現的邏輯。

CSS3對於僞元素的定義

6. 僞元素在DOM中建立了一些抽象元素，這些對象不存在與常文檔流中。
7. 僞元素由兩個冒號::開頭，而後是僞元素的名稱。
8. 使用兩個冒號::是爲了和僞類（CSS2中並無區別）作區分。考慮兼容性CSS2中已存在的僞元素仍可使用單引號:語法。可是CSS3中新增的僞元素必須以使用::。
9. 一個選擇器只能使用一個僞元素，而且僞元素必須處於選擇器語句的最後面。 簡單來講，僞元素建立了一個虛擬容器，這個容器不包含任何DOM元素，可是能夠包含內容。另外，開發者還能夠爲僞元素定製樣式。

僞類和僞元素的區別

10. 僞類本質上是爲了彌補常規CSS的不足，以便獲取更多信息。
11. 僞元素的本質是建立了一個能夠設置內容和樣式的虛擬容器。
12. 能夠同時使用多個僞類，但只能使用一個僞元素。

CSS選擇器優先級、權重計算

CSS選擇器的優先級

選擇器的優先級分爲兩種：1. 選擇器在同一級別時。2. 選擇器在不一樣級別時。

CSS選擇器在不一樣級別時

1. 在屬性後面使用!important，會覆蓋任意位置定義的樣式。做爲style屬性寫在元素內的樣式。
2. id選擇器
3. class選擇器
4. 標籤選擇器
5. 通配符選擇器
6. 瀏覽器默認屬性或繼承 總結：!important > id選擇器 > class選擇器 > 標籤選擇器 > 通配符選擇器 > 瀏覽器默認屬性

CSS在同一級別時

同一級別的選擇器，後聲明的會覆蓋以前聲明的。

CSS權重計算

7. 內聯樣式，如style=''。權值爲1000。
8. id選擇器，如#content,權值爲0100。
9. 類、僞類、屬性選擇器，如.content、:link、[type=text]等，權值爲0010。
10. 通配符、子選擇器、相鄰選擇器等，權值爲0001。
11. 繼承的樣式沒有權值，通配選擇器定義的規則優先級高於元素繼承過來的規則的優先級。
12. !important（權重），它沒有特殊性值，但它的優先級是最高的，爲了方便記憶，能夠認爲它的特殊性值爲1,0,0,0,0。

CSS那些屬性能夠繼承？

字體系列屬性

font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

文本系列屬性

• text-indent: 文本縮進
• text-align: 文本水平對齊
• text-transform: 控制文本大小寫。屬性值爲：lowercase(僅小寫字母)、uppercase（僅大寫字母）、capitalize（文本中的每一個單詞以大寫字母開頭）
• line-height: 行高
• word-spacing: 增長或減小單詞間的空白（即字間隔）。
• letter-spacing: 增長或減小字符間的空白（字符間距）。
• direction：規定文本的書寫方向。ltr(默認，從左到右)、rtl(從右到左)
• color: 文本顏色

元素可見性：visibility

光標屬性：cursor

列表佈局屬性：list-style

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

CSS盒子模型：由四個屬性組成的外邊距(margin)、內邊距(padding)、邊界(border)、內容區(width和height)

• 盒子模型有兩種， IE 盒子模型、W3C 盒子模型
• IE盒子模型寬高 = 內邊距﹢邊界﹢內容區
• 標準盒子模型寬高 = 內容區寬高
• css設置方法

/* 標準盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

/* 繼承父元素 */
box-sizing: inherit;
複製代碼

position屬性值及描述做用

屬性值以下： position: static | relative | absoulte | fixed | sticky | inherit

position: static

默認值。沒有定位，遵循常規流（忽略 top, bottom, left, right 或者 z-index 聲明）。

positoon: relative

相對定位，相對於其正常位置進行定位，遵循常規流。而且設置top，right，bottom，left這4個屬性進行偏移時，不會影響常規流中的任何元素。

position: absolute

絕對定位，脫離常規流。此時偏移屬性參照的是離自身最近的定位祖先元素，若是沒有定位的祖先元素，則一直回溯到body元素。 盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊（觸發BFC）。

position: fixed

固定定位，脫離常規流。與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。

position: sticky（CSS3）

粘性定位，該定位基於用戶滾動的位置。 在常態時,它的行爲就像 position:relative，遵循常規流。 當頁面滾動超出目標區域時，它的表現就像 position:fixed，它會固定在目標位置， 脫離常規流。

position: inherit

從父元素繼承 position 屬性的值。

display屬性值及描述做用

經常使用屬性

display: none | block | inline-block | table | inline-table | flex | inline-flex | grid | inline-grid | inherit

表格屬性

display: table-captoion | table-cell | table-row | table-row-group | table-column | table-column-group | table-header-group | table-footer-group

table-caption

此元素會做爲一個表格標題顯示（相似 ）

table-header-group

此元素會做爲一個或多個行的分組來顯示（相似 ）

table-footer-group

此元素會做爲一個或多個行的分組來顯示（相似 ）

table-cell

此元素會做爲一個表格單元格顯示（相似 和 ）

table-row

此元素會做爲一個表格行顯示（相似 ）

table-row-group

此元素會做爲一個或多個行的分組來顯示（相似 ）

table-column

此元素會做爲一個單元格列顯示（相似 ）

table-column-group

此元素會做爲一個或多個列的分組來顯示（相似 ）

其餘屬性

display: list-item | run-in

display: list-item

此元素會做爲列表顯示

display: run-in

此元素會根據上下文做爲塊級元素或內聯元素顯示

display: none;和visibility: hidden;的區別

二者都能讓元素不可見。區別在於：

• display: none;,會讓元素徹底從渲染樹中消失，渲染時不佔據任何空間。visibility: hidden;，元素仍存在渲染樹中，渲染時仍佔據空間，只是內容不可見。
• display: none;是非繼承屬性，子孫節點消失是因爲元素從渲染樹中消失形成，經過改變子孫節點的display屬性沒法改變顯示狀態。visibility: hidden;是繼承屬性，子孫節點消失是因爲繼承hidden屬性，經過設置visible屬性可讓子孫節點顯示。
• 修改常規流中元素的display屬性一般會引發文檔重排。修改visibility屬性只會形成元素的重繪。
• 讀屏器不會讀取display: none;元素內容，可是會讀取visibibity: hidden;元素內容。

隱藏元素的幾種方法

• visibility: hidden; 該屬性隱藏元素，單元素在文檔流中仍佔據空間。
• display: none; 元素不可見，而且在文檔流中不佔據空間。
• opacity: 0; CSS3屬性，設置0可讓元素透明。
• filter: blur(0); CSS3屬性，將一個元素的模糊度設置爲0，從而讓元素消失「」在頁面上。
• position: absolute; 設置left值負值定位，使元素在可視範圍內。
• transform: scale(0); 將元素設置無限縮小，元素不可見，元素所在位置被保留。
• height: 0; 將元素高度設置爲0，並消除邊框。
• <div hidden="hidden"></div> HTML5屬性，效果與display: hidden;同樣。但這個屬性用於記錄一個元素的狀態。

對BFC規範的理解？

什麼是BFC

• BFC（Block Formatting Context）即「塊級格式化上下文」。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態。一個框在常規流中必須屬於一個格式化上下文，你能夠把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生做用。
• BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也能夠說BFC就是一個做用範圍。

造成BFC的條件

• 浮動元素，float 除 none 之外的值
• 定位元素，position（absolute，fixed）
• display 爲如下其中之一的值 inline-block，table-cell，table-caption
• overflow 除了 visible 之外的值（hidden，auto，scroll）

BFC的特性

• 內部的Box會在垂直方向上一個接一個的放置
• 垂直方向上的距離由margin決定
• bfc的區域不會與float的元素區域重疊
• 計算bfc的高度時，浮動元素也參與計算
• bfc就是頁面上的一個獨立容器，容器裏面的子元素不會影響外面元素 具體特性解釋，可移步至CSS中的BFC詳解

什麼是 FOUC？如何來避免 FOUC？

什麼是 FOUC？

FOUC：Flash of Unstyled Content，簡稱爲FOUC，文檔樣式短暫失效(又稱瀏覽器樣式閃爍)。 若是使用import方法對CSS進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍。這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC。

可能緣由：

• 使用import方法導入樣式表
• 將樣式表放在頁面底部
• 有幾個樣式表，放在html結構的不一樣位置 原理：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。

解決方法:

• 使用link標籤將樣式表放在文檔head中

什麼是外邊距重疊？ 重疊的結果是什麼？

什麼是外邊距重疊

外邊距重疊： margin-collapse 垂直相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。 這種合併外邊距的方式被稱爲摺疊，結合而成的外邊距稱爲摺疊外邊距。更詳細介紹可移步至：CSS 框模型( Box module )

摺疊後margin的計算

1. 參與摺疊的margin都是正值

<div style="width:50px; height:50px; margin-bottom:50px; background-color: red;">A</div> <!-- 重點： margin-bottom:50px; -->
<div style="width:50px; height:50px; margin-top:100px; background-color: green;">B</div> <!-- 重點： margin-top:100px; -->
複製代碼

在 margin 都是正數的狀況下，取其中 margin 較大的值爲最終 margin 值 示意圖:

2. 參與摺疊的margin都是負值

<div style="width:50px; height:50px; margin-bottom:-75px; background-color: red;">A</div> <!-- 重點： margin-bottom:-75px; -->
<div style="width:50px; height:50px; margin-top:-50px; background-color: green;">B</div> <!-- 重點： margin-top:-50px; -->
複製代碼

在 margin 都是負值的時候,取的是其中絕對值較大的,而後從零開始,負向位移 示意圖:

3. 參與摺疊的margin中有正值有負值

<div style="width:50px; height:50px; margin-bottom:-50px; background-color: red;">A</div> <!-- 重點： margin-bottom:-50px; -->
<div style="width:50px; height:50px; margin-top:100px; background-color: green;">B</div> <!-- 重點： margin-top:100px; -->
複製代碼

在margin中有正值有負值的時候，要從全部負值中選出絕對值最大的，全部正值中選擇絕對值最大的，兩者相加。此例的結果即爲: 100px + (-50)px =50px; 示意圖:

4. 相鄰的margin要一塊兒參與計算

<div style="margin:50px 0; background-color:red; width:50px; height:50px;">
    <div style="margin:-60px 0;">
           <div style="margin:150px 0;">A</div>
    </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px; height:50px;">
    <div style="margin:-120px 0;">
           <div style="margin:200px 0;">B</div>
    </div>
</div>
複製代碼

請注意，多個 margin 相鄰摺疊成一個 margin，因此計算的時候，應該取全部相關的值一塊兒計算，而不能分開分步來算。 以上例子中，A 和 B 之間的 margin 摺疊產生的 margin，是6個相鄰 margin 摺疊的結果。將其 margin 值分爲兩組：

正值：50px，150px，200px 負值：-60px，-100px，-120px 根據有正有負時的計算規則，正值的最大值爲 200px，負值中絕對值最大的是 -120px，因此，最終摺疊後的 margin 應該是 200 + (-120) = 80px。

5. 注意

另外,要注意,自身的margin-botom和margin-top相鄰時也會發生重疊,只有當自身內容爲空,垂直方向上border,padding,均爲0時,自身的margin-top與margin-bottom纔會相鄰。 示例：

<div style="border:1px solid red; width:100px;">
    <div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>
複製代碼

以上代碼運行後，咱們講獲得的是紅色邊框的正方形，方框的寬高都應該是 100px，高度不該該是 150px。 示意圖：

外邊距重疊的意義

外邊距的重疊只產生在普通流文檔的垂直外邊距之間，避免塊級元素之間產生雙倍邊距的問題。

外邊距重疊解決方案

1. 浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其餘元素的 margin 摺疊

浮動元素的 margin 在垂直方向上也不會發生 margin 摺疊，即便和它相鄰的子元素也不會。

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>
複製代碼

示意圖：

兩個綠色的塊兒之間，相距100px，而若 B 和它的浮動包含塊發生 margin 摺疊的話，金色的條應該位於綠色塊的最上方，顯然，沒有發生摺疊。

2. 建立了塊級格式化上下文1的元素，不和它的子元素髮生 margin 摺疊

以 「overflow : hidden」 的元素爲例：

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>
複製代碼

若 B 和它的 "overflow:hidden" 包含塊發生 margin 摺疊的話，金色的條應該位於綠色塊的最上方，不然，沒有發生。 示意圖：

解釋下什麼是浮動和它的工做原理？

什麼是浮動？

非IE瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。 此時，內容會溢出到容器外面而影響佈局。這種現象被稱爲浮動（溢出）。

工做原理

• 浮動元素脫離文檔流，不佔據空間（引發「高度塌陷」現象）
• 浮動元素碰到包含它的邊框或者其餘浮動元素的邊框停留

如何清除浮動

1. 給浮動元素的父元素添加高度（擴展性很差）

若是一個元素要浮動，那麼它的父元素必定要有高度。高度的盒子，才能關住浮動。能夠經過直接給父元素設置height，實際應用中咱們不大可能給全部的盒子加高度，不只麻煩，而且不能適應頁面的快速變化；另一種，父容器的高度能夠經過內容撐開（好比img圖片），實際當中此方法用的比較多。

2. clear:both

在最後一個子元素新添加最後一個冗餘元素，而後將其設置clear:both,這樣就能夠清除浮動。這裏強調一點，即在父級元素末尾添加的元素必須是一個塊級元素，不然沒法撐起父級元素高度。

<style> #wrap{ border: 1px solid; } #inner{ float: left; width: 200px; height: 200px; background: pink; } </style>

<div id="wrap">
    <div id="inner"></div>
    <div style="clear: both;"></div>
</div>
複製代碼

3. 僞元素清除浮動

上面那種辦法當然能夠清除浮動，可是咱們不想在頁面中添加這些沒有意義的冗餘元素，此時如何清除浮動嗎？ 結合 :after 僞元素和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。

<style> #wrap { border: 1px solid; } #inner { float: left; width: 200px; height: 200px; background: pink; } .clearfix { *zoom: 1; } /*ie6 7 不支持僞元素*/ .clearfix:after { content: ''; display: block; clear: both; height: 0; line-height: 0; visibility: hidden; /*容許瀏覽器渲染它，可是不顯示出來*/ } </style>

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>
複製代碼

4. 給父元素使用overflow:hidden

這種方案讓父容器造成了BFC（塊級格式上下文），而BFC能夠包含浮動，一般用來解決浮動父元素高度坍塌的問題。

設置zoom:1清除浮動原理?

• 觸發hasLayout，清除浮動。
• zoom屬性是IE瀏覽器的專有屬性，它能夠設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。
• 原理：當設置了zoom的值以後，所設置的元素就會就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。
• zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom如今已經被逐步標準化，出如今CSS 3.0 規範草案中。
• 目前非ie因爲不支持這個屬性，它們又是經過什麼屬性來實現元素的縮放呢？ 能夠經過css3裏面的動畫屬性scale進行縮放。

link和@import的區別

從屬關係區別

@import是CSS提供的語法規則，只有導入CSS的做用。link是HTML提供的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel 鏈接屬性等。

兼容性區別

@import是CSS2.1的語法，只有在IE5+才能識別；link標籤做爲HTML元素，不存在兼容性問題。

加載順序區別

加載頁面時，link標籤引入的CSS能被並行加載；@import引入的CSS將在頁面加載完畢後才加載。

DOM可控性區別

能夠經過JS操做DOM，插入link標籤來改變樣式；而沒法經過JS添加@import方式來引入樣式。

權重區別

link引入的樣式權重大於@import引入的樣式。

px、em與rem的區別？

px

px，是相對長度單位，它是相對於顯示器屏幕分辨率而言的。 優缺點：比較穩定和精確，但在瀏覽器中放大或縮放瀏覽頁面時會出現頁面混亂的狀況。

em

em，是相對長度單位，em是相對於父元素來設計字體大小的。若是當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。 優缺點：em的值並非固定的，它會繼承父級元素的字體大小。

px和em的之間的相互轉換：

任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合：1em=16px。那麼，12px=0.75em，10px=0.625em。 爲了使用方便，用em時，咱們一般在CSS中的body選擇器中聲明font-size=62.5%（使em值變爲：16px*62.5%=10px），以後，你只須要將你使用的px值除以10，便可獲得em值，如：12px=1.2em，10px=1em。

rem

rem是CSS3新增的一個相對單位，rem是相對單位，是相對HTML根元素。 這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。 目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。

css reset 和 normalize.css 有什麼區別？

二者都是經過重置樣式，保持瀏覽器樣式的一致性。區別在於：

1. normalize.css 保護了有價值的默認值

css reset經過爲幾乎全部的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，normailze.css保持了許多磨人的瀏覽器樣式。這就意味着你不用再爲全部公共的排版元素從新設置樣式。當一個元素在不一樣的瀏覽器中有不一樣的默認值時，normalize.css會力求讓這些樣式保持一致並儘量與現代標準符合。

2. normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端與移動端瀏覽器的bug。這每每超出了reset所能作到的範圍。關於這一點，normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出如今各瀏覽器和操做系統中的與表單相關的bug。

3. normalize.css不存在大量的樣式繼承鏈

使用reset css最讓人困擾的地方莫過於在瀏覽器調試工具中大段大段的繼承鏈，在normalize.css中就不會有這樣的問題，由於在咱們的準則中對多選擇器的使用是很是謹慎的，咱們僅會有目的地對目標元素設置樣式。

4. normalize.css 是模塊化的

這個項目已經被拆分爲多個相關卻又獨立的部分，這使得你可以很容易也很清楚地知道哪些元素被設置了特定的值。所以這能讓你本身選擇性地移除掉某些永遠不會用到的部分（好比表單的通常化）。

5. normalize.css 擁有詳細的文檔

normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明。這意味着你能夠找到每一行代碼具體完成了什麼工做、爲何要寫這句代碼、瀏覽器之間的差別，而且你能夠更容易的進行本身的測試。

css sprite是什麼？有什麼優缺點？

將多個小圖標he拼接到一張圖片裏，經過background-position和元素尺寸調節須要顯示的背景圖案。

優勢

• 減小HTTP請求，極大地提升頁面加載速度
• 提升壓縮比，減小圖片體積大小，提升網頁加載速度
• 替換方便，只須要在一張圖片上修改顏色或樣式便可實現

缺點

• 維護麻煩，無論是圖標的合併，仍是修改一個或多個圖標時致使整個圖片佈局的從新佈局。

CSS優化、提升性能的方法有哪些？

加載性能

• 創建公共樣式類，減小代碼體積
• 利用CSS繼承，減小代碼體積
• 合併屬性，減小代碼體積
• 慎用@import引入CSS，建議使用link, 由於後者在頁面加載時一塊兒加載，前者是等待頁面加載完成以後再進行加載
• 巧用CSS sprite，減小圖片體積的同時，減小HTTP請求
• CSS壓縮

選擇器性能

CSS選擇符是從右到左進行匹配的。當使用後代選擇器的時候，瀏覽器會遍歷全部子元素來肯定是不是指定的元素等等

• 減小css嵌套，最好不要套三層以上
• 避免使用通配規則，以及慎用用css reset，能夠選擇normolize.css

渲染性能

• 慎用CSS express
• 慎用高性能屬性：浮動、定位
• 儘可能減小頁面重排、重繪:
• 去除空規則
• 屬性值爲0時，不加單位(優化)
• 屬性值爲浮點數0.**時，能夠省略小數點前的0(優化)
• 標準化各類瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在後(優化)

可維護性

• 將css文件放在頁面最上面
• 樣式與內容分離：將css代碼定義到獨立css文件中

重繪和迴流的描述及優化方案

這部分涉及內容較多，請移步至瀏覽器的迴流和重繪及其優化方式