【干貨分享】前端面試知識點錦集02（CSS篇）——附答案

二、CSS部分

1、解釋一下CSS的盒子模型？

回答一：
a、標准的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊具的寬度
b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
c、這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
回答二：
盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標准 w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會采用標准 w3c 盒子模型去解釋你的盒子。

2、請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？

類型：基礎的選擇器、組合選擇器、屬性選擇器、偽類、偽元素

2.1、基礎的選擇器

2.2、組合選擇器

2.3、屬性選擇器

2.4、偽類

2.5、偽元素

3、請你說說CSS有什么特殊性?（優先級、計算特殊值）

優先級

(1)、同類型，同級別的樣式后者先於前者
(2))、ID > 類樣式 > 標簽 > *
(3)、內聯>ID選擇器>偽類>屬性選擇器>類選擇器>標簽選擇器>通用選擇器(*)>繼承的樣式
(4)、具體 > 泛化的，特殊性即css優先級
(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
　　內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
　　內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
      外聯樣式表：單獨存在一個css文件中，通過link引入或import導入的樣式
(6)、!important 權重最高，比 inline style 還要高

計算特殊性值

important > 內嵌 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權重、特殊性計算法：
CSS樣式選擇器分為4個等級，a、b、c、d
(1)、如果樣式是行內樣式（通過Style=“”定義），那么a=1，1,0,0,0
(2)、b為ID選擇器的總數 0,1,0,0
(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數量。0,0,1,0
(4)、d為標簽、偽元素選擇器的數量 0,0,0,1
(5)、!important 權重最高，比 inline style 還要高
比如結果為：1093比1100，按位比較，從左到右，只要一位高於則立即勝出，否則繼續比較。

4、要動態改變層中內容可以使用的方法？

innerHTML，innerText

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

(1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
(2)瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中后面的一塊被頂到下一行
碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
(3)瀏覽器兼容問題三：設置較小高度標簽（一般小於10px），在IE6，IE7，遨游中高度超出自己設置高度
問題症狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
碰到頻率：60%
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
(4)瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題症狀：IE6里的間距比超過設置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局並有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題症狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設置
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對於兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現兼容

6、列出display的值並說明他們的作用？

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默認值：inline

none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間 
inline： 指定對象為內聯元素。 
block： 指定對象為塊元素。 
list-item： 指定對象為列表項目。 
inline-block： 指定對象為內聯塊元素。（CSS2） 
table： 指定對象作為塊元素級的表格。類同於html標簽<table>（CSS2） 
inline-table： 指定對象作為內聯元素級的表格。類同於html標簽<table>（CSS2） 
table-caption： 指定對象作為表格標題。類同於html標簽<caption>（CSS2） 
table-cell： 指定對象作為表格單元格。類同於html標簽<td>（CSS2） 
table-row： 指定對象作為表格行。類同於html標簽<tr>（CSS2） 
table-row-group： 指定對象作為表格行組。類同於html標簽<tbody>（CSS2） 
table-column： 指定對象作為表格列。類同於html標簽<col>（CSS2） 
table-column-group： 指定對象作為表格列組顯示。類同於html標簽<colgroup>（CSS2） 
table-header-group： 指定對象作為表格標題組。類同於html標簽<thead>（CSS2） 
table-footer-group： 指定對象作為表格腳注組。類同於html標簽<tfoot>（CSS2） 
run-in： 根據上下文決定對象是內聯對象還是塊級對象。（CSS3） 
box： 將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3） 
inline-box： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3） 
flexbox： 將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3） 
inline-flexbox： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3） 
flex： 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3） 
inline-flex： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

注：紅色加粗字體為display常用的取值

• 如果display設置為none， float及 position屬性定義將不生效；
• 如果 position既不是static也不是relative或者 float不是none或者元素是根元素，當display:inline-table時，display的計算值為table；當display:inline | inline-block | run-in | table-* 系時，display的計算值為block，其它情況為指定值；

• IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block，所以非inline元素在IE6,7下要轉換成inline-block，需先轉換成inline，然后觸發hasLayout，以此來獲得和inline-block類似的效果；你可以這樣：

• 全兼容的inline-block：

  div {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  }

Basic Support包含值：none | inline | block | list-item | inline-block 
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 
IE6,7只支持inline元素設置為inline-block，其它類型元素均不可以

7、如何居中div, 如何居中一個浮動元素?

(1)、非浮動元素居中：可以設置 margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設置當前div的寬度，然后設置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。
方法三:position定位等等。

8、CSS中 link 和@import 的區別是？

(1)、link屬於HTML標簽，而@import是CSS提供的;
(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)、import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;
(4)、link方式的樣式的權重 高於@import的權重.

9、請列舉幾種清除浮動的方法(至少兩種)?

(1)、父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
(2)、結尾處加空div標簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)、父級div定義 偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
(5)、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

10、block，inline和inlinke-block細節對比？

• display:block
a、block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
b、block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
c、block元素可以設置margin和padding屬性。
• display:inline
a、inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
b、inline元素設置width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
• display:inline-block
a、簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補充說明
a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。

11、什么叫優雅降級和漸進增強？

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。

12、說說浮動元素會引起的問題和你的解決辦法？

問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對於問題(1)，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
(1)、額外標簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）
(2)、使用after偽類
#parent:after{
　　content:" ";
　　height:0;
　　visibility:hidden;
　　display:block;
　　clear:both;
}
(3)、浮動外部元素
(4)、設置`overflow`為`hidden`或者auto

13、你有哪些性能優化的方法？

回答一：

（1）、減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器。
（2）、前端模板 JS+數據，減少由於HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
（3）、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
（4）、當需要設置的樣式很多時設置className而不是直接操作style。
（5）、少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
（6）、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7）、圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

回答二：

(1)、減少HTTP請求次數
(2)、使用CDN
(3)、避免空的src和href
(4)、為文件頭指定Expires
(5)、使用gzip壓縮內容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避 免使用CSS表達式
(9)、將CSS和JS放到外部文件中
(10)、避免跳轉
(11)、可緩存的AJAX
(12)、使用GET來完成AJAX請求

14、為什么要初始化CSS樣式？

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

15、解釋下浮動和它的工作原理？清除浮動的技巧？

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
(1)、使用空標簽清除浮動。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
(2)、使用overflow。
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
(3)、使用after偽對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；

16、CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？

行內樣式表，內嵌樣式表，外部樣式表

17、談談你對CSS中刻度的認識？

在CSS中刻度是用於設置元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。
c、長度單位包括：相對單位和絕對單位。
相對長度單位有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位有： cm, mm, q, in, pt, pc, px
絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相對長度單位：em
相對長度單位是相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對長度單位：rem
rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數
只相對於根元素的大小
瀏覽器的默認字體大小為16像素，瀏覽器默認樣式也稱為user agent stylesheet，就是所有瀏覽器內置的默認樣式，多數是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。

18、請你說說em與rem的區別？

rem
rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數
只相對於根元素的大小
rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。
作用：利用rem可以實現簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數)
em（font size of the element）是指相對於父元素的字體大小的單位。它與rem之間其實很相似，區別在。（相對是的HTML元素的字體大，默認16px）
em與rem的重要區別：它們計算的規則一個是依賴父元素另一個是依賴根元素計算

19、請你說說box-sizing屬性的的用法？

設置或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為標准模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定義的width和height之內。對象的實際寬度就等於設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現為怪異模式下的盒模型。

20、瀏覽器標准模式和怪異模式之間的區別是什么？

在“標准模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計、並未嚴格遵循 W3C 標准的網頁而產生的一種頁面渲染模式。瀏覽器基於頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的`DOCTYPE`則瀏覽器將會采用標准模式，而如果它缺失則瀏覽器將會采用怪異模式。

強烈建議閱讀加深理解：[怪異模式（Quirks Mode）對 HTML 頁面的影響](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，這里列下瀏覽器標准模式和怪異模式的區別：
（1）盒模型：
在怪異模式下，盒模型為IE盒模型而非標准模式下的W3C 盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 標准的盒模型中，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對於`inline`元素和`table-cell`元素，在 IE Standards Mode 下 vertical-align 屬性默認取值為`baseline`。而當`inline`元素的內容只有圖片時，如`table`的單元格`table-cell`。在 IE Quirks Mode 下，`table`單元格中的圖片的 `vertical-align` 屬性默認為`bottom`，因此，在圖片底部會有幾像素的空間。
（3）`<table>`元素中的字體:
CSS 中，描述`font`的屬性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對於`table` 元素，字體的某些屬性將不會從`body`或其他封閉元素繼承到`table`中，特別是 `font-size`屬性。
（4） 內聯元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在 IE Quirks Mode 下，定義這些元素的`width`和`height` 屬性，能夠影響該元素顯示的大小尺寸。
（5） 元素的百分比高度:
a、CSS 中對於元素的百分比高度規定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同於“auto”（即取決於內容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。
b、當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決於內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。
（6） 元素溢出的處理：
在 IE Standard Mode 下，`overflow`取默認值 `visible`，即溢出可見，這種情況下，溢出內容不會被裁剪，呈現在元素框外。而在 Quirks Mode 下，該溢出被當做擴展`box`來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。
另外可參考閱讀：https://www.cs.tut.fi/~jkorpela/quirks-mode.html

21、怪異Quirks模式是什么，它和標准Standards模式有什么區別？

從IE6開始，引入了Standards模式，標准模式中，瀏覽器嘗試給符合標准的文檔在規范上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基於舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數 不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味着這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標准中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什么不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）

22、說說你對邊距折疊的理解?

外邊距折疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合並成一個外邊距（margin）
相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要么是兄弟關系或者父子關系
垂直方向外邊距合並計算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b、參與折疊的 margin 都是負值：取的是其中絕對值較大的，然后，從 0 位置，負向位移。
c、參與折疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。

23、內聯與塊級標簽有何區別？

Html中的標簽默認主要分為兩大類型，一類為塊級元素，另一類是行內元素，許多人也把行內稱為內聯，所以叫內聯元素，其實就是一個意思。為了很好的布局，必須理解它們間的區別。

24、說說隱藏元素的方式有哪些？

a、使用CSS的display:none，不會占有原來的位置
b、使用CSS的visibility:hidden，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置

25、為什么重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題。

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。

c、normalize：也許有些cssreset過於簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。

天貓 使用的css reset重置瀏覽器默認樣式：

@charset "gb2312";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0
}
body, button, input, select, textarea {
font: 12px "microsoft yahei";
line-height: 1.5;
-ms-overflow-style: scrollbar
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%
}
ul, ol {
list-style: none
}
a {
text-decoration: none;
cursor:pointer
}
a:hover {
text-decoration: underline
}
img {
border: 0
}
button, input, select, textarea {
font-size: 100%
}
table {
border-collapse: collapse;
border-spacing: 0
}

.clear {
clear:both
}
.fr {
float:right
}
.fl {
float:left
}
.block {
display:block;
text-indent:-999em
}

26、談談你對BFC與IFC的理解？(是什么，如何產生，作用)

(1)、什么是BFC與IFC
a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標准流、普通流）是一個文檔在被顯示時最常見的布局形態。一個框在常規流中必須屬於一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。

b、BFC是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

c、在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬於這兩者。並且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 里格式化。

(2)、如何產生BFC
當一個HTML元素滿足下面條件的任何一點，都可以產生Block Formatting Context：
a、float的值不為none
b、overflow的值不為visible
c、display的值為table-cell, table-caption, inline-block中的任何一個
d、position的值不為relative和static

CSS3觸發BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發，float也是一種定位方式。

(3)、BFC的作用與特點
a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素后面跟着一個非浮動的元素，那么就會產生一個重疊的現象。常規流（也稱標准流、普通流）是一個文檔在被顯示時最常見的布局形態，當float不為none時，position為absolute、fixed時元素將脫離標准流。

27、說說你對頁面中使用定位(position)的理解？

使用css布局position非常重要，語法如下：
position：static | relative | absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。
(2)、relative
相對定位，對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
(3)、absolute
a、絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。
b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。
(4)、fixed
固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨着滾動。
(5)、center
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、page
與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。（CSS3）
(7)、sticky
對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

28、如何解決多個元素重疊問題？

使用z-index屬性可以設置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認值：auto
適用於：定位元素。即定義了position為非static的元素
取值：
auto： 元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。
整數： 用整數值來定義堆疊級別。可以為負值。 說明：
檢索或設置對象的層疊順序。
z-index用於確定元素在當前層疊上下文中的層疊級別，並確定該元素是否創建新的局部層疊上下文。
當多個元素層疊在一起時，數字大者將顯示在上面。

29、頁面布局的方式有哪些？

方式：雙飛翼、多欄、彈性、流式、瀑布流、響應式布局

（1）、雙飛翼布局
經典三列布局，也叫做聖杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有幾點：
a、三列布局，中間寬度自適應，兩邊定寬；
b、中間欄要在瀏覽器中優先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個額外的DIV標簽；
e、要求用最簡單的CSS、最少的HACK語句；
在不增加額外標簽的情況下，聖杯布局已經非常完美，聖杯布局使用了相對定位，以后布局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對布局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼布局。
(2)、多欄布局
a、欄柵格系統：就是利用浮動實現的多欄布局，在bootstrap中用的非常多。
b、多列布局：柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這里簡稱為Flex。
Flexbox布局常用於設計比較復雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。

Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。

綜合而言，Flexbox布局功能主要具有以下幾點：
a、屏幕和瀏覽器窗口大小發生改變也可以靈活調整布局；
b、可以指定伸縮項目沿着主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；
c、可以指定伸縮項目沿着主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間；
d、可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；
e、可以控制元素在頁面上的布局方向；
f、可以按照不同於文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。
(4)、瀑布流布局
瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨着頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。
優點
a、有效的降低了界面復雜度，節省了空間：我們不再需要臃腫復雜的頁碼導航鏈接或按鈕了。
b、對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精准程度遠遠低於點擊鏈接或按鈕。
c、更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。
缺點
a、有限的用例：
無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。
例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和准確的回到某個特定的列表頁面當中。
b、額外的復雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。
c、再見了，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味着你可以和頁腳說拜拜了。
最好考慮一下頁腳對於你的網站，特別是用戶的重要性;如果其中確實有比較重要的內容或鏈接，那么最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻因為自動加載的內容突然出現而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發憤怒。
d、集中在一頁當中動態加載數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來說，在這方面進行冒險是很不划算的。
e、關於頁面數量的印象：
其實站在用戶的角度來看，這一點並非負面;不過，如果對於你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你並不適用。
(5)、流式布局（Fluid）
固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。
(6)、響應式布局
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨着目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨着越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
優點
a、面對不同分辨率設備靈活性強
b、能夠快捷解決多設備顯示適應問題
缺點
a、兼容各種設備工作量大，效率低下
b、代碼累贅，會出現隱藏無用的元素，加載時間加長
c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
d、一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

30、overfloa:hidden是否形成新的塊級格式化上下文？

會形成，觸發BFC的條件有：
- float的值不為none。
- overflow的值不為visible。
- display的值為table-cell, table-caption, inline-block 中的任何一個。
- position的值不為relative 和static。

31、解釋下 CSS sprites，以及你要如何在頁面或網站中使用它？

CSS Sprites就是把網頁中一些小圖片整合到一張圖片文件中，再利用CSS的`background-image`，`background- repeat`，`background-position`的組合進行背景定位，`background-position`可以用數字能精確的定位出背景圖片的位置。可以減少http請求。

32、書寫高效 CSS 時會有哪些問題需要考慮？

a、樣式是：從右向左的解析一個選擇器
b、ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
c、不要tag-qualify （永遠不要這樣做 ul#main-navigation { } ID已經是唯一的，不需要Tag來標識，這樣做會讓選擇器變慢。）
d、后代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
e、想清楚你為什么這樣寫
f、CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）
g、我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應該為了效率而犧牲可讀性和可維護性`
注：Universal：普通，tag:標簽
可參考： http://blog.jobbole.com/55067/

33、css sprite是什么,有什么優缺點？

回答一

CSS Sprites也就是通常說的CSS精靈，也有人稱為雪碧圖，是對網頁中加載的圖片的處理技術。在一個網頁中可能有多張小的圖片，如圖標等，會向服務器發送多個請請求，請求數越多，服務器的壓力就越大，精靈技術就是先將多張小的圖片合並成一張圖片，然后在CSS中分開為多張小圖片的一種技術。如下圖所示：

優點：
a、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
b、CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
c、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
d、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
缺點：
a、在圖片合並的時候，你要把多張圖片有序的合理的合並成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
b、CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置。
c、CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合並的圖片，無需改的地方最好不要動，這樣避免改動更多的CSS，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動CSS。
回答二
(1)、概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。
(2)、優點：
a、 減少HTTP請求數，極大地提高頁面加載速度
b、增加圖片信息重復度，提高壓縮比，減少圖片大小
c、更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現
(3)、缺點：
a、圖片合並麻煩
b、維護麻煩，修改一個圖片可能需要從新布局整個圖片樣式

34、CSS 屬性是否區分大小寫？

不區分，HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。

35、display: none與visibility: hidden的區別？

聯系：它們都能讓元素隱藏
區別：
a、display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見
b、display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式
c、修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。
d、讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

36、PNG,GIF,JPG的區別及如何選擇?

GIF
a、8位像素，256色
b、無損壓縮
c、支持簡單動畫
d、支持boolean透明
e、適合簡單動畫
JPEG
a、顏色限於256
b、有損壓縮
c、可控制壓縮質量
d、不支持透明
3、適合照片
PNG
a、有PNG8和truecolor PNG
b、PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動畫
c、適合圖標、背景、按鈕
參考資料： [選擇正確的圖片格式]：http://www.yuiblog.com/blog/2008/11/04/imageopt-2/

37、如何水平居中一個元素?

(1)、如果需要居中的元素為"常規流中inline元素"
為父元素設置text-align: center;即可實現
(2)、如果需要居中的元素為"常規流中block元素"
a、為元素設置寬度
b、設置左右margin為auto
c、IE6下需在父元素上設置text-align: center;再給子元素恢復需要的值
(3)、如果需要居中的元素為"浮動元素"
a、為元素設置寬度
b、position: relative
c、浮動方向偏移量（left或者right）設置為50%
d、浮動方向上的margin設置為元素寬度一半乘以-1，變成負數如：margin-left: -250px;
(4)、如果需要居中的元素為"絕對定位元素"
a、為元素設置寬度
b、偏移量設置為50%
c、偏移方向外邊距設置為元素寬度一半乘以-1

38、position:absolute和float屬性的異同 ?

A：共同點：對內聯元素設置`float`和`absolute`屬性，可以讓元素脫離文檔流，並且可以設置其寬高。
B：不同點：float仍會占據位置，position會覆蓋文檔流中的其他元素。

39、介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。
a、content-box：讓元素維持W3C的標准盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
b、border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標准瀏覽器下，按照W3C規范對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。

40、CSS3有哪些新特性？

CSS3實現
a、圓角（border-radius）
b、陰影（box-shadow），
c、對文字加特效（text-shadow、）
d、線性漸變（gradient）
e、變換（transform）
f、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)--旋轉,縮放,定位,傾斜
g、增加了更多的CSS選擇器 、多背景、 rgba
h、在CSS3中唯一引入的偽元素是::selection.
i、媒體查詢，多欄布局
j、border-image

41、請你說一下你對Web Font的認識?

web font是應用在web中的一種字體技術，在CSS中使用font-face定義新的字體
font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中。
@font-face 能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體，可以實現矢量圖標。如下所示：

font-face優點
(1)、可縮放性（Scalability）
基於字體的icon是與分辨率無關並能縮放到任何想要程度的技術。你的圖標看起來毫不關心retina,HDPI,XHDPI等等屏幕，但渲染時會根據目標設備自動調整，你將有能力應對任何當下，未來，或大多數任意規格的設備
(2)、尺寸（Size）
裁剪到正確的比例，icon font的文件的大小要比起位圖小到難以置信的程度，使用icon font時，你不需要根據不同設備准備不同的圖片，你的APP只需要在啟動時加載一次icon font文件即可。
(3)、可維護性（Maintainability）
自你的icon打包進一個字體文件，在項目自始至終你僅需要維護這個單一的字體文件。
通過管理字體文件你可以很自然的組織你的icon集合，任意的進行修改或擴展
(4)、可推廣性（Adoption）
然而，應用這樣的icon fonts可能會影響你和你同事之間的工作流程，但說服讓他們采用這樣的技術也非常簡單，有數款免費或收費的工具幫你輕松達到目的並能看到很好的應用結果，在幾乎任意（手機）移動平台、瀏覽器或操作系統
(5)、靈活性（Flexibility）
應用icon fonts技術中最有意義的一項能力是可以操縱icon fonts， 改變顏色，大小，僅僅幾行代碼就可以在瞬間改變外觀
可交互性(Interactivity)：
由於靈活性以及能夠通過代碼方便的操縱，icon fonts 是獨一無二的在運行時被操縱，通過應用icon fonts技術， 你能輕松的在不同狀態顯示對應的不同效果，創建動畫。

42、請簡要說說CSS 預處理器與 CSS 后處理器？

廣義上說，目標格式為CSS的預處理器是CSS預處理器，但本文特指以最終生成 CSS為目的的領域特定語言。
Sass、LESS、Stylus 是目前最主流的 CSS 預處理器。
優點：語言級邏輯處理，動態特性，改善項目結構
缺點：采用特殊語法，框架耦合度高，復雜度高

CSS 后處理器是對CSS進行處理，並最終生成CSS的預處理器，它屬於廣義上的CSS 預處理器。
我們很久以前就在用CSS后處理器 了，最典型的例子是CSS壓縮工具（如 clean-css），只不過以前沒單獨拿出來說過。
還有最近比較火的 Autoprefixer，以 Can I Use上的瀏覽器支持數據 為基礎，自動處理兼容性問題。
優點：使用CSS語法，容易進行模塊化，貼近 CSS 的未來標准
缺點：邏輯處理能力有限。

43、瀏覽器兼容包括哪些方面？兼容的一般標准是什么?

方面
(1)、CSS兼容
(2)、JavaScript兼容
(3)、HTML兼容
這三類也是前端的主要組成部分，都存在一定的兼容性問題。
兼容的一般標准
(1)、在不同的主流的瀏覽器上表現效果一致
(2)、能適應不同的屏幕大小
(3)、能適應不同的分辨率與色彩深度

44、說說你對CSS Hack的理解?

CSS Hack就是針對不同的瀏覽器或不同版本瀏覽器寫特定的CSS樣式達到讓瀏覽器兼容的過程。
a、條件注釋法
IE條件注釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視為
注釋。代碼如下所示：

<!--[if IE]>用於 IE <![endif]-->
<!--[if IE 6]>用於 IE6 <![endif]-->
<!--[if IE 7]>用於 IE7 <![endif]-->
<!--[if IE 8]>用於 IE8 <![endif]-->
<!--[if IE 9]>用於 IE9 <![endif]-->
<!--[if gt IE 6]> 用於 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用於 IE9 以下版本<![endif]-->
<!--[if !IE 8]> -->用於非 IE <!-- <![endif]-->

b、樣式內屬性標記法
在CSS樣式的屬性名前或值后面添加特殊的字符讓不同的瀏覽器解析。

c、選擇器前綴法

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

45、請簡要說說什么是文檔模式 （X-UA-Compatible） ?

文檔模式是IE8瀏覽器以后的一種獨有技術，他可以通過meta指定當前文檔的渲染模式，如可以把IE8降級成IE6、IE7使用。文檔模式的主要作用是影響瀏覽器顯示網頁HTML的方式，用於指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析並渲染網頁代碼。
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >最新IE
“X-UA-Compatible”的值有兩種方式：Emulate+IE版本號，單純版本號
EmulateIE8：如果聲明了文檔類型，則以IE8標准模式渲染頁面，否則將文檔模式設置為IE5
9：強制以IE9標准模式渲染頁面，忽略文檔類型聲明
x-ua-compatible 頭標簽大小寫不敏感，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)
插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核

46、請說說javascript兼容的含義？

這里有兩層意思，第一可以使用javascript操作樣式與標簽，強制瀏覽器兼容，比如先使用javascript判斷瀏覽器類型，再操作樣式與標簽。
第二指javascript存在兼容問題，如一個對象在某些瀏覽器下沒有辦法使用，要讓javascript更加兼容，可以采取如下辦法：
(1)、使用第三方提代的javascript庫，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery這種成熟的javascript庫經過多次的版本迭代，已經變得非常成熟，世界上的網站到現在近60%都使用到了jQuery，他的兼容性不錯。
(2)、瀏覽器檢測、重新封裝
使用javascript判斷瀏覽器類型，對一些特點的方法或對象重新封裝后使用屏蔽瀏覽的不兼容性。可以使用User-Agent、或特定對象。

47、談談你對前端性能優化的認識?

在保證功能的前提下，性能也非常關鍵。從上圖可以看出如果性能太差，響應速度慢將帶非常差的用戶體驗，會失去大量用戶。
好的性能要依托如下幾個方面：
(1)、服務器端
(2)、網絡速度，客戶端與服務器之間的每個網絡環節
(3)、客戶端軟件與硬件配置
(4)、前端的性能，資源的數量，大小，javascript的時間與空間復雜度等
要提高前端的性能可以從如下幾個方面入手：
(1)、盡量減少HTTP請求數量
(2)、壓縮
(3)、緩存
(4)、使用內容發布網絡（CDN的使用）
(5)、DNS Prefetch
(6)、將CSS樣式表放在頂部
(7)、將javascript腳本放在底部
(8)、使用外部javascript和CSS
(9)、避免重定向

48、什么是內容分發網絡（CDN）?

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的整體系統，包括分布式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。
比如我們在項目中使用jQuery ,加載本地服務器的jQuery可能不如資源公共庫中做過CDN優化的資源快。

49、請簡要說說CoffeeScript、TypeScript是什么?

javascript變得日益重要，但有很多明顯的缺點，借助一種中間語言轉譯出優雅的javascript是解決這些問題的方法。如CoffeeScript，TypeScript。
Coffee Script是JavaScript的轉譯語言。了解JavaScript的發展歷程：https://news.cnblogs.com/n/558565/
CoffeeScript的特點：
a、CoffeeScript語法類似 Ruby ，可以被編譯成 JavaScript
b、CoffeeScript取JavaScript之精華，而拋棄了諸如全局變量聲明、with等容易出錯的部分
c、CoffeeScript是JavaScript與程序員之間的橋梁，程序員看到的是優雅的CoffeeScript接口，使得編程更簡潔，寫法更隨意
d、更少，更緊湊，和更清晰的代碼
e、通過規避和改變對JavaScript中不良部分的使用，只留下精華，讓代碼減少出錯率，更容易維護
f、在很多常用模式的實現上采用了JavaScript中的最佳實踐
g、CoffeeScript生成的JavaScript代碼都可以完全通過JSLint的檢測

TypeScript是一種由微軟開發的自由和開源的編程語言，它是JavaScript的一個超集，擴展了JavaScript的語法，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，工作於TypeScript的開發。

50、談談你對before、after偽元素的認識?

偽元素不是真的元素是通過CSS虛擬出的一個元素，CSS3的語法為了區分偽元素與偽類，使用"::"表示，但是前期為了兼容":"仍然可以使用。
before
在應用樣式的元素內的前部虛擬一個元素可以指定元素的內容與樣式。
after
after也是一個與before類似的偽元素，不同的是他的位置是在內部的尾部。
注意：
a、本質上並不支持偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支持了E::after。
b、不支持設置屬性position, float, list-style-*和一些display值，Firefox3.5開始取消這些限制。
c、IE10在使用偽元素動畫有一個問題：
.test:hover {}
.test:hover::after { /* 這時animation和transition才生效 */ }需要使用一個空的:hover來激活

51、內容還會不斷補充。。。

博客數據來源聲明：
本博客大部分數據來源於各大網站的收集整理改編，主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(https://www.nowcoder.com)、一些英文網站，還有一些論壇、博客、IT招聘等網站。還有少部分數據時來源於本人自己整理添加，添加的內容主要是本人認為比較重要知識點，面試時可能會問到的題目，自己整理題目以及參考答案，答案僅供參考，答案可能存有錯誤或不足，歡迎大家批評指正或補充更好的答案。好讓我及時更正，以免誤導其他人。本博客僅提供參考作用。