一、理論知識

1.1、講講輸入完網址按下回車，到看到網頁這個過程中發生了什么

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接后發起http請求

d. 服務器端響應http請求，瀏覽器得到html代碼

e. 瀏覽器解析html代碼，并請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

參考《一次完整的HTTP事務是怎樣一個過程》

1.2、談談你對前端性能優化的理解

a. 請求數量：合并腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求帶寬：開啟GZip，精簡JavaScript，移除重復腳本，圖像優化，將icon做成字體

c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存

d. 頁面結構：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出

e. 代碼校驗：避免CSS表達式，避免重定向

參考《前端工程與性能優化》

1.3、前端 MV*框架的意義

早期前端都是比較簡單，基本以頁面為工作單元，內容以瀏覽型為主，也偶爾有簡單的表單操作，基本不太需要框架。

隨著 AJAX 的出現，Web2.0的興起，人們可以在頁面上可以做比較復雜的事情了，然后前端框架才真正出現了。

如果是頁面型產品，多數確實不太需要它，因為頁面中的 JavaScript代碼，處理交互的絕對遠遠超過處理模型的，但是如果是應用軟件類產品，這就太需要了。

長期做某個行業軟件的公司，一般都會沉淀下來一些業務組件，主要體現在數據模型、業務規則和業務流程，這些組件基本都存在于后端，在前端很少有相應的組織。

從協作關系上講，很多前端開發團隊每個成員的職責不是很清晰，有了前端的 MV框架，這個狀況會大有改觀。

之所以感受不到 MV*框架的重要性，是因為Model部分代碼較少，View的相對多一些。如果主要在操作View和Controller，那當然 jQuery 這類庫比較好用了。

參考《前端 MV*框架的意義》

1.4、請簡述盒模型

IE6盒子模型與W3C盒子模型。

文檔中的每個元素被描繪為矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。

CSS3中有個box-sizing屬性可以控制盒子的計算方式，

content-box：padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和。（W3C盒子模型）

border-box：padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值。（IE6盒子模型）

參考《盒模型》

1.5、請你談談Cookie的弊端

a. 每個特定的域名下最多生成的cookie個數有限制

b. IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

c. cookie的最大大約為4096字節，為了兼容性，一般不能超過4095字節

d. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。

1.6、瀏覽器本地存儲

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀，是會話級別的存儲。

localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

1.7、web storage和cookie的區別

a. Cookie的大小是受限的

b. 每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬

c. cookie還需要指定作用域，不可以跨域調用

d. Web Storage擁有setItem,getItem等方法，cookie需要前端開發者自己封裝setCookie，getCookie

e. Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生

f. IE7、IE6中的UserData通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage

1.8、對BFC規范的理解

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規范定義的，關于CSS渲染定位的一個概念。

BFC是頁面CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區域。

BFC的一個最重要的效果是，讓處于BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

利用BFC可以閉合浮動，防止與浮動元素重疊。

參考《Learning BFC》

1.9、線程與進程的區別

a. 一個程序至少有一個進程，一個進程至少有一個線程

b. 線程的劃分尺度小于進程，使得多線程程序的并發性高

c. 進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率

d. 每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制

e. 多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配

1.10、請說出三種減少頁面加載時間的方法

a. 盡量減少頁面中重復的HTTP請求數量

b. 服務器開啟gzip壓縮

c. css樣式的定義放置在文件頭部

d. Javascript腳本放在文件末尾

e. 壓縮合并Javascript、CSS代碼

f. 使用多域名負載網頁內的多個文件、圖片

參考《減低頁面加載時間的方法》

1.11、你都使用哪些工具來測試代碼的性能？

JSPerf, Dromaeo

1.12、你遇到過比較難的技術問題是？你是如何解決的？

1.13、你常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？

1.14、列舉IE與其他瀏覽器不一樣的特性？

a. IE的排版引擎是Trident （又稱為MSHTML）

b. Trident內核曾經幾乎與W3C標準脫節（2005年）

c. Trident內核的大量 Bug等安全性問題沒有得到及時解決

d. JS方面，有很多獨立的方法，例如綁定事件的attachEvent、創建事件的createEventObject等

e. CSS方面，也有自己獨有的處理方式，例如設置透明，低版本IE中使用濾鏡的方式

參考《Trident（排版引擎）》

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

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

參考《優雅降級和漸進增強的區別》

1.16、WEB應用從服務器主動推送Data到客戶端有那些方式？

a. html5 websoket

b. WebSocket 通過 Flash

c. XHR長時間連接

d. XHR Multipart Streaming

e. 不可見的Iframe

f. 標簽的長時間連接(可跨域)

1.17、對前端界面工程師這個職位是怎么樣理解的？

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 做好的頁面結構，頁面重構和用戶體驗；

e. 處理hack，兼容、寫出優美的代碼格式；

f. 針對服務器的優化、擁抱最新前端技術。

1.18、你在現在的團隊處于什么樣的角色，起到了什么明顯的作用？

請自行根據自己情況做回答，這個沒有標準答案。

1.19、你的優點是什么？缺點是什么？

請自行根據自己情況做回答，這個沒有標準答案。

1.20、如何管理前端團隊?

請自行根據自己情況做回答，這個沒有標準答案。

1.21、最近在學什么？能談談你未來3，5年給自己的規劃嗎？

請自行根據自己情況做回答，這個沒有標準答案。

1.22、平時如何管理你的項目？

a. 先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

b. 編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

c. 標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；

d. 頁面進行標注（例如 頁面 模塊 開始和結束）；

e. CSS跟HTML 分文件夾并行存放，命名都得統一（例如style.css）；

f. JS 分文件夾存放 命名以該JS功能為準的英文翻譯。

g. 圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

1.23、說說最近最流行的一些東西吧？常去哪些網站？

CSDN、SegmentFault、php.net、MDN、css參考手冊、iconfont、

underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

1.24、請解釋一下 JavaScript 的同源策略

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

1.25、AMD和CMD 規范的區別？

AMD 提前執行依賴 - 盡早執行，requireJS 是它的實現

CMD 按需執行依賴 - 懶執行，seaJS 是它的實現

參考《SeaJS與RequireJS最大的區別》、《與 RequireJS 的異同》

1.26、網站重構的理解

重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。

a. 使網站前端兼容于現代瀏覽器(針對于不合規范的CSS、如對IE6有效的)

b. 對于移動平臺的優化，針對于SEO進行優化

c. 減少代碼間的耦合，讓代碼保持彈性

d. 壓縮或合并JS、CSS、image等前端資源

1.27、瀏覽器的內核分別是什么?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；

1.28、請介紹下cache-control

每個資源都可以通過 Cache-Control HTTP 頭來定義自己的緩存策略

Cache-Control 指令控制誰在什么條件下可以緩存響應以及可以緩存多久

Cache-Control 頭在 HTTP/1.1 規范中定義，取代了之前用來定義響應緩存策略的頭（例如 Expires）。

1.29、前端頁面有哪三層構成，分別是什么？作用是什么？

a. 結構層：由 HTML 或 XHTML 之類的標記語言負責創建，僅負責語義的表達。解決了頁面“內容是什么”的問題。

b. 表示層：由CSS負責創建，解決了頁面“如何顯示內容”的問題。

c. 行為層：由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。

1.30、知道的網頁制作會用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg

Webp：谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試并使用WebP格式。

Apng：全稱是“Animated Portable Network Graphics”, 是PNG的位圖動畫擴展，可以實現png格式的動態圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成為下一代動態圖標準。

1.31、一次js請求一般情況下有哪些地方會有緩存處理？

a. 瀏覽器端存儲

b. 瀏覽器端文件緩存

c. HTTP緩存304

d. 服務器端文件類型緩存

e. 表現層&DOM緩存

參考《一次HTTP請求中有哪些地方可以緩存》

1.32、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

a. 圖片懶加載，滾動到相應位置才加載圖片。

b. 圖片預加載，如果為幻燈片、相冊等，將當前展示圖片的前一張和后一張優先下載。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。

d. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

1.33、談談以前端角度出發做好SEO需要考慮什么？

a. 了解搜索引擎如何抓取網頁和如何索引網頁

b. meta標簽優化

c. 關鍵詞分析

d. 付費給搜索引擎

e. 鏈接交換和鏈接廣泛度（Link Popularity）

f. 合理的標簽使用

二、HTML

2.1、<image>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2.2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標簽列表》

2.3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

參考《HTML5 標簽列表》

2.4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

2.5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

2.6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

2.7、HTML與XHTML——二者有什么區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

2.8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

2.9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產生很多頁面，不容易管理。

參考《iframe的一些記錄》

2.10、Quirks模式是什么？它和Standards模式有什么區別？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

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

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

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

2.11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

2.12、簡述一下src與href的區別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

三、CSS

3.1、談談你對CSS布局的理解

3.2、請列舉幾種可以清除浮動的方法（至少兩種）

浮動會漂浮于普通流之上，像浮云一樣，但是只能左右浮動。正是這種特性，導致框內部由于不存在其他普通流元素了，表現出高度為0（高度塌陷）。

a. 添加額外標簽，例如<div style="clear:both"></div>

b. 使用br標簽和其自身的html屬性，例如<br clear="all" />

c. 父元素設置 overflow：hidden；在IE6中還需要觸發hasLayout，例如zoom：1；

d. 父元素設置 overflow：auto 屬性；同樣IE6需要觸發hasLayout

e. 父元素也設置浮動

f. 父元素設置display:table

g. 使用:after 偽元素；由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

在CSS2.1里面有一個很重要的概念，那就是 Block formatting contexts （塊級格式化上下文），簡稱 BFC。

創建了BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，同時BFC仍然屬于文檔中的普通流。

IE6-7的顯示引擎使用的是一個稱為布局（layout）的內部概念。

參考《那些年我們一起清除過的浮動》

3.3、請列舉幾種隱藏元素的方法

a. visibility: hidden；這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在。

b. opacity: 0；一個CSS3屬性，設置0可以使一個元素完全透明，制作出和visibility一樣的效果。與visibility相比，它可以被transition和animate

c. position: absolute；使元素脫離文檔流，處于普通文檔之上，給它設置一個很大的left負值定位，使元素定位在可見區域之外。

d. display: none；元素會變得不可見，并且不會再占用文檔的空間。

e. transform: scale(0)；將一個元素設置為無限小，這個元素將不可見。這個元素原來所在的位置將被保留。

f. HTML5 hidden attribute；hidden屬性的效果和display:none;相同，這個屬性用于記錄一個元素的狀態

g. height: 0; overflow: hidden；將元素在垂直方向上收縮為0,使元素消失。只要元素沒有可見的邊框，該技術就可以正常工作。

h. filter: blur(0)；將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中。

參考《使用CSS隱藏HTML元素的4種常用方法》《通過HTML和CSS隱藏和顯示元素的4種方法》

3.4、如何讓一段文本中的所有英文單詞的首字母大寫

text-transform：

none| capitalize(將每個單詞的第一個字母轉換成大寫) | uppercase(將每個單詞轉換成大寫 ) | lowercase(將每個單詞轉換成小寫 )

3.5、請簡述CSS樣式表繼承

CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：參考《CSS樣式表繼承詳解》

文本相關：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

列表相關：list-style-image，list-style-position，list-style-type， list-style

3.6、請簡述CSS的選擇器

元素選擇器：* 、E、 E#id、 E.class

關系選擇器：E、F、E>F、E+F、E~F

屬性選擇器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]

偽類選擇器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

偽對象選擇器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

參考《選擇符列表》

3.7、CSS偽類與CSS偽對象的區別

CSS 引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西

根本區別在于：它們是否創造了新的元素（抽象）

偽類：一開始用來表示一些元素的動態狀態，隨后CSS2標準擴展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類

偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中

參考《CSS偽類與CSS偽元素的區別及由來》

3.8、請簡述CSS的權重規則

一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/偽類選擇器+10，一個元素名/偽對象選擇器+1。

關系選擇器將拆分為兩個選擇器再計算。參考《CSS權重》

3.9、請寫出多種等高布局

a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像

b. 給容器div使用單獨的背景色（固定布局）（流體布局）：用元素中的最大高度撐大其他的容器高度

c. 創建帶邊框的兩列等高布局：用border-left來做，只能使用兩列。

d. 使用正padding和負margin對沖實現多列布局方法：在所有列中使用正的上、下padding和負的上、下margin，并在所有列外面加上一個容器，設置overflow:hiden把溢出背景切掉

e. 使用邊框和定位模擬列等高：但不能使用在多列

f. 模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運行

3.10、在CSS樣式中常使用px、em，各有什么優劣，在表現上有什么區別？

px是相對長度單位，相對于顯示器屏幕分辨率而言的。

em是相對長度單位，相對于當前對象內文本的字體尺寸。

px定義的字體，無法用瀏覽器字體放大功能。

em的值并不是固定的，會繼承父級元素的字體大小，1 ÷ 父元素的font-size × 需要轉換的像素值 = em值。

3.11、CSS中 link 和@import 的區別是什么？

a. link屬于HTML標簽，而@import是CSS提供的，且只能加載 CSS

b. 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載

c. import只在IE5以上才能識別，而link是HTML標簽，無兼容問題

d. link方式的樣式的權重 高于@import的權重

e. 當使用 Javascript 控制 DOM 去改變樣式的時候，只能使用 link 方式，因為 @import 眼里只有 CSS ，不是 DOM 可以控制

3.12、position的absolute與fixed共同點與不同點

相同：

a. 改變行內元素的呈現方式，display被置為block

b. 讓元素脫離普通流，不占據空間

c. 默認會覆蓋到非定位元素上

區別：

absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。

當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

3.13、position的值， relative和absolute分別是相對于誰進行定位的？

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位

fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。 （IE6不支持）

relative：生成相對定位的元素，相對于其在普通流中的位置進行定位

static：默認值。沒有定位，元素出現在正常的流中

3.14、CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），變形（transform）

增加了更多的CSS選擇器  多背景 rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄布局

參考《CSS3中的動畫效果記錄》、《CSS3中border-radius、box-shadow與gradient那點事兒》

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

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

3.16、解釋下 CSS sprites原理，優缺點

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，

background-position可以用數字精確的定位出背景圖片的位置。

優點：

a. 減少網頁的http請求

b. 減少圖片的字節

c. 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名

d. 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。

缺點：

a. 在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂

b. CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置

c. 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片

3.17、解釋下浮動和它的工作原理？

a. 浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）

b. 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

3.18、浮動元素引起的問題

a. 父元素的高度無法被撐開，影響與父元素同級的元素

b. 與浮動元素同級的非浮動元素會跟隨其后

c. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

3.19、什么是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

如果使用import方法對CSS進行導入，會導致某些頁面在Windows下的IE出現一些奇怪的現象：

以無樣式顯示頁面內容的瞬間閃爍，這種現象稱之為文檔樣式短暫失效(Flash of Unstyled Content)，簡稱為FOUC。

原理：當樣式表晚于結構性html加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現了短暫的花屏現象。

解決方法：使用LINK標簽將樣式表放在文檔HEAD中。

3.20、line-height三種賦值方式有何區別？（帶單位、純數字、百分比）

帶單位：px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高

純數字：把比例傳遞給后代，例如父級行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px

百分比：將計算后的值傳遞給后代

參考《line-height的理解》、《淺析line-height和vertical》，查看在線源碼。

3.21、:link、:visited、:hover、:active的執行順序是怎么樣的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來概括

3.22、經常遇到的瀏覽器兼容性有哪些？如何解決？

a. 瀏覽器默認的margin和padding不同

b. IE6雙邊距bug

c. 在ie6，ie7中元素高度超出自己設置高度。原因是IE8以前的瀏覽器中會給元素設置默認的行高的高度導致的

d. min-height在IE6下不起作用

e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6

f. input邊框問題，去掉input邊框一般用border:none;就可以，但由于IE6在解析input樣式時的BUG(優先級問題)，在IE6下無效

3.23、有哪項方式可以對一個DOM設置它的CSS樣式？

a. 外部樣式表：通過<link>標簽引入一個外部css文件

b. 內部樣式表：將css代碼放在 <style> 標簽內部

c. 內聯樣式：將css樣式直接定義在 HTML 元素內部

3.24、什么是外邊距重疊？重疊的結果是什么？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算規則：

a. 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。

b. 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。

c. 兩個外邊距一正一負時，折疊結果是兩者的相加的和。

3.25、rgba()和opacity的透明效果有什么不同？

a. opacity作用于元素，以及元素內的所有內容的透明度，rgba()只作用于元素的顏色或其背景色。

b. 設置rgba透明的元素的子元素不會繼承透明效果！

3.26、css屬性content有什么作用？有什么應用？

css的content屬性專門應用在 before/after 偽元素上，用于來插入生成內容。

可以配合自定義字體顯示特殊符號。