$HTML， HTTP，web綜合問題常見排序演算法的時間複雜度,空間複雜度前端需要註意哪些SEO web開發中會話跟蹤的方法有哪些 <img>的title和alt有什麼區別 doctype是什麼,舉例常見doctype及特點 HTML全局屬性(global attribute)有哪些什麼是we ...

FE-interview

個人收集的前端知識點、面試題和答案，參考答案僅代表個人觀點，方便複習，目錄如下，通過文檔內搜索目錄可快速定位章節

$HTML， HTTP，web綜合問題

常見排序演算法的時間複雜度,空間複雜度

前端需要註意哪些SEO

合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提高網站速度：網站速度是搜索引擎排序的一個重要指標

web開發中會話跟蹤的方法有哪些

cookie
session
url重寫
隱藏input
ip地址

`<img>`的`title`和`alt`有什麼區別

title是global attributes之一，用於為元素提供附加的advisory information。通常當滑鼠滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片無法載入時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

doctype是什麼,舉例常見doctype及特點

<!doctype>聲明必須處於HTML文檔的頭部，在<html>標簽之前，HTML5中不區分大小寫
<!doctype>聲明不是一個HTML標簽，是一個用於告訴瀏覽器當前HTMl版本的指令
現代瀏覽器的html佈局引擎通過檢查doctype決定使用相容模式還是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中<!doctype>聲明指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基於SGML，所以不用指定DTD

常見dotype：

HTML4.01 strict：不允許使用表現性、廢棄元素（如font）以及frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional:允許使用表現性、廢棄元素（如font），不允許使用frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 Frameset:允許表現性元素，廢氣元素以及frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 Strict:不使用允許表現性、廢棄元素以及frameset。文檔必須是結構良好的XML文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional:允許使用表現性、廢棄元素，不允許frameset，文檔必須是結構良好的XMl文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:允許使用表現性、廢棄元素以及frameset，文檔必須是結構良好的XML文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 5: <!doctype html>

HTML全局屬性(global attribute)有哪些

參考資料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可激活元素
class:為元素設置類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義滑鼠右鍵彈出菜單內容
data-*: 為元素增加自定義屬性
dir: 設置元素文本方向
draggable: 設置元素是否可拖拽
dropzone: 設置元素拖放類型： copy, move, link
hidden: 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id: 元素id，文檔內唯一
lang: 元素內容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內css樣式
tabindex: 設置元素可以獲得焦點，通過tab可以導航
title: 元素相關的建議信息
translate: 元素和子孫節點內容是否需要本地化

什麼是web語義化,有什麼好處

web語義化是指通過HTML標記表示頁麵包含的信息，包含了HTML標簽的語義化和css命名的語義化。 HTML標簽的語義化是指：通過使用包含語義的標簽（如h1-h6）恰當地表示文檔結構 css命名的語義化是指：為html標簽添加有意義的class，id補充未表達的語義，如Microformat通過添加符合規則的class描述信息為什麼需要語義化：

去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利於收錄
便團隊項目的可持續運作及維護

HTTP method

一臺伺服器要與HTTP1.1相容，只要為資源實現GET和HEAD方法即可
GET是最常用的方法，通常用於請求伺服器發送某個資源。
HEAD與GET類似，但伺服器在響應中值返迴首部，不返回實體的主體部分
PUT讓伺服器用請求的主體部分來創建一個由所請求的URL命名的新文檔，或者，如果那個URL已經存在的話，就用乾這個主體替代它
POST起初是用來向伺服器輸入數據的。實際上，通常會用它來支持HTML的表單。表單中填好的數據通常會被送給伺服器，然後由伺服器將其發送到要去的地方。
TRACE會在目的伺服器端發起一個環回診斷，最後一站的伺服器會彈回一個TRACE響應併在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。
OPTIONS方法請求web伺服器告知其支持的各種功能。可以查詢伺服器支持哪些方法或者對某些特殊資源支持哪些方法。
DELETE請求伺服器刪除請求URL指定的資源

從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP為例)

在瀏覽器地址欄輸入URL
瀏覽器查看緩存，如果請求資源在緩存中並且新鮮，跳轉到轉碼步驟
1. 如果資源未緩存，發起新請求
2. 如果已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與伺服器進行驗證。
3. 檢驗新鮮通常有兩個HTTP頭進行控制Expires和Cache-Control：
  - HTTP1.0提供Expires，值為一個絕對時間表示緩存新鮮日期
  - HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最大新鮮時間
瀏覽器解析URL獲取協議，主機，埠，path
瀏覽器組裝一個HTTP（GET）請求報文
瀏覽器獲取主機ip地址，過程如下：
1. 瀏覽器緩存
2. 本機緩存
3. hosts文件
4. 路由器緩存
5. ISP DNS緩存
6. DNS遞歸查詢（可能存在負載均衡導致每次IP不一樣）
打開一個socket與目標IP地址，埠建立TCP鏈接，三次握手如下：
1. 客戶端發送一個TCP的SYN=1，Seq=X的包到伺服器埠
2. 伺服器發回SYN=1， ACK=X+1， Seq=Y的響應包
3. 客戶端發送ACK=Y+1， Seq=Z
TCP鏈接建立後發送HTTP請求
伺服器接受請求並解析，將請求轉發到服務程式，如虛擬主機使用HTTP Host頭部判斷請求的服務程式
伺服器檢查HTTP請求頭是否包含緩存驗證信息如果驗證緩存新鮮，返回304等對應狀態碼
處理程式讀取完整請求並準備HTTP響應，可能需要查詢資料庫等操作
伺服器將響應報文通過TCP連接發送回瀏覽器
瀏覽器接收HTTP響應，然後根據情況選擇關閉TCP連接或者保留重用，關閉TCP連接的四次握手如下：
1. 主動方發送Fin=1， Ack=Z， Seq= X報文
2. 被動方發送ACK=X+1， Seq=Z報文
3. 被動方發送Fin=1， ACK=X， Seq=Y報文
4. 主動方發送ACK=Y， Seq=X報文
瀏覽器檢查響應狀態嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同
如果資源可緩存，進行緩存
對響應進行解碼（例如gzip壓縮）
根據資源類型決定如何處理（假設資源為HTML文檔）
解析HTML文檔，構件DOM樹，下載資源，構造CSSOM樹，執行js腳本，這些操作沒有嚴格的先後順序，以下分別解釋
構建DOM樹：
1. Tokenizing：根據HTML規範將字元流解析為標記
2. Lexing：詞法分析將標記轉換為對象並定義屬性和規則
3. DOM construction：根據HTML標記關係將對象組成DOM樹
解析過程中遇到圖片、樣式表、js文件，啟動下載
構建CSSOM樹：
1. Tokenizing：字元流轉換為標記流
2. Node：根據標記創建節點
3. CSSOM：節點創建CSSOM樹
根據DOM樹和CSSOM樹構建渲染樹:
1. 從DOM樹的根節點遍歷所有可見節點，不可見節點包括：1）script,meta這樣本身不可見的標簽。2)被css隱藏的節點，如display: none
2. 對每一個可見節點，找到恰當的CSSOM規則並應用
3. 發佈可視節點的內容和計算樣式
js解析如下：
1. 瀏覽器創建Document對象並解析HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate為loading
2. HTML解析器遇到沒有async和defer的script時，將他們添加到文檔中，然後執行行內或外部腳本。這些腳本會同步執行，並且在腳本下載和執行時解析器會暫停。這樣就可以用document.write()把文本插入到輸入流中。同步腳本經常簡單定義函數和註冊事件處理程式，他們可以遍歷和操作script和他們之前的文檔內容
3. 當解析器遇到設置了async屬性的script時，開始下載腳本並繼續解析文檔。腳本會在它下載完成後儘快執行，但是解析器不會停下來等它下載。非同步腳本禁止使用document.write()，它們可以訪問自己script和之前的文檔元素
4. 當文檔完成解析，document.readState變成interactive
5. 所有defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用document.write()
6. 瀏覽器在Document對象上觸發DOMContentLoaded事件
7. 此時文檔完全解析完成，瀏覽器可能還在等待如圖片等內容載入，等這些內容完成載入並且所有非同步腳本完成載入和執行，document.readState變為complete,window觸發load事件
顯示頁面（HTML解析過程中會逐步顯示頁面）

HTTP request報文結構是怎樣的

rfc2616中進行了定義：

首行是Request-Line包括：請求方法，請求URI，協議版本，CRLF
首行之後是若幹行請求頭，包括general-header，request-header或者entity-header，每個一行以CRLF結束
請求頭和消息實體之間有一個CRLF分隔
根據實際請求需要可能包含一個消息實體一個請求報文例子如下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25

HTTP response報文結構是怎樣的

rfc2616中進行了定義：

首行是狀態行包括：HTTP版本，狀態碼，狀態描述，後面跟一個CRLF
首行之後是若幹行響應頭，包括：通用頭部，響應頭部，實體頭部
響應頭部和響應實體之間用一個CRLF空行分隔
最後是一個可能的消息實體響應報文例子如下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}

如何進行網站性能優化

雅虎Best Practices for Speeding Up Your Web Site：

content方面
1. 減少HTTP請求：合併文件、CSS精靈、inline Image
2. 減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
3. 避免重定向：多餘的中間訪問
4. 使Ajax可緩存
5. 非必須組件延遲載入
6. 未來所需組件預載入
7. 減少DOM元素數量
8. 將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高並行下載量
9. 減少iframe數量
10. 不要404
Server方面
1. 使用CDN
2. 添加Expires或者Cache-Control響應頭
3. 對組件使用Gzip壓縮
4. 配置ETag
5. Flush Buffer Early
6. Ajax使用GET進行請求
7. 避免空src的img標簽
Cookie方面
1. 減小cookie大小
2. 引入資源的功能變數名稱不要包含cookie
css方面
1. 將樣式表放到頁面頂部
2. 不使用CSS表達式
3. 使用不使用@import
4. 不使用IE的Filter
Javascript方面
1. 將腳本放到頁面底部
2. 將javascript和css從外部引入
3. 壓縮javascript和css
4. 刪除不需要的腳本
5. 減少DOM訪問
6. 合理設計事件監聽器
圖片方面
1. 優化圖片：根據實際顏色需要選擇色深、壓縮
2. 優化css精靈
3. 不要在HTML中拉伸圖片
4. 保證favicon.ico小並且可緩存
移動方面
1. 保證組件小於25k
2. Pack Components into a Multipart Document

什麼是漸進增強

漸進增強是指在web設計時強調可訪問性、語義化HTML標簽、外部樣式表和腳本。保證所有人都能訪問頁面的基本內容和功能同時為高級瀏覽器和高帶寬用戶提供更好的用戶體驗。核心原則如下:

所有瀏覽器都必須能訪問基本內容
所有瀏覽器都必須能使用基本功能
所有內容都包含在語義化標簽中
通過外部CSS提供增強的佈局
通過非侵入式、外部javascript提供增強功能
end-user web browser preferences are respected

HTTP狀態碼及其含義

參考RFC 2616

1XX：信息狀態碼
- 100 Continue：客戶端應當繼續發送請求。這個臨時相應是用來通知客戶端它的部分請求已經被伺服器接收，且仍未被拒絕。客戶端應當繼續發送請求的剩餘部分，或者如果請求已經完成，忽略這個響應。伺服器必須在請求萬仇向客戶端發送一個最終響應
- 101 Switching Protocols：伺服器已經理解力客戶端的請求，並將通過Upgrade消息頭通知客戶端採用不同的協議來完成這個請求。在發送完這個響應最後的空行後，伺服器將會切換到Upgrade消息頭中定義的那些協議。
2XX：成功狀態碼
- 200 OK：請求成功，請求所希望的響應頭或數據體將隨此響應返回
- 201 Created：
- 202 Accepted：
- 203 Non-Authoritative Information：
- 204 No Content：
- 205 Reset Content：
- 206 Partial Content：
3XX：重定向
- 300 Multiple Choices：
- 301 Moved Permanently：
- 302 Found：
- 303 See Other：
- 304 Not Modified：
- 305 Use Proxy：
- 306 （unused）：
- 307 Temporary Redirect：
4XX：客戶端錯誤
- 400 Bad Request:
- 401 Unauthorized:
- 402 Payment Required:
- 403 Forbidden:
- 404 Not Found:
- 405 Method Not Allowed:
- 406 Not Acceptable:
- 407 Proxy Authentication Required:
- 408 Request Timeout:
- 409 Conflict:
- 410 Gone:
- 411 Length Required:
- 412 Precondition Failed:
- 413 Request Entity Too Large:
- 414 Request-URI Too Long:
- 415 Unsupported Media Type:
- 416 Requested Range Not Satisfiable:
- 417 Expectation Failed:
5XX: 伺服器錯誤
- 500 Internal Server Error:
- 501 Not Implemented:
- 502 Bad Gateway:
- 503 Service Unavailable:
- 504 Gateway Timeout:
- 505 HTTP Version Not Supported:

$CSS部分

CSS選擇器有哪些

**通用選擇器：選擇所有元素，不參與計算優先順序*，相容性IE6+
#X id選擇器：選擇id值為X的元素，相容性：IE6+
.X 類選擇器：選擇class包含X的元素，相容性：IE6+
X Y後代選擇器：選擇滿足X選擇器的後代節點中滿足Y選擇器的元素，相容性：IE6+
X 元素選擇器：選擇標所有簽為X的元素，相容性：IE6+
:link，：visited，：focus，：hover，：active鏈接狀態：選擇特定狀態的鏈接元素，順序LoVe HAte，相容性: IE4+
X + Y直接兄弟選擇器：在X之後第一個兄弟節點中選擇滿足Y選擇器的元素，相容性： IE7+
X > Y子選擇器：選擇X的子元素中滿足Y選擇器的元素，相容性： IE7+
X ~ Y兄弟：選擇X之後所有兄弟節點中滿足Y選擇器的元素，相容性： IE7+
[attr]：選擇所有設置了attr屬性的元素，相容性IE7+
[attr=value]：選擇屬性值剛好為value的元素
[attr~=value]：選擇屬性值為空白符分隔，其中一個的值剛好是value的元素
[attr|=value]：選擇屬性值剛好為value或者value-開頭的元素
[attr^=value]：選擇屬性值以value開頭的元素
[attr$=value]：選擇屬性值以value結尾的元素
[attr*=value]：選擇屬性值中包含value的元素
[:checked]：選擇單選框，覆選框，下拉框中選中狀態下的元素，相容性：IE9+
X:after, X::after：after偽元素，選擇元素虛擬子元素（元素的最後一個子元素），CSS3中::表示偽元素。相容性:after為IE8+，::after為IE9+
:hover：滑鼠移入狀態的元素，相容性a標簽IE4+，所有元素IE7+
:not(selector)：選擇不符合selector的元素。不參與計算優先順序，相容性：IE9+
::first-letter：偽元素，選擇塊元素第一行的第一個字母，相容性IE5.5+
::first-line：偽元素，選擇塊元素的第一行，相容性IE5.5+
:nth-child(an + b)：偽類，選擇前面有an + b - 1個兄弟節點的元素，其中n >= 0，相容性IE9+
:nth-last-child(an + b)：偽類，選擇後面有an + b - 1個兄弟節點的元素其中n >= 0，相容性IE9+
X:nth-of-type(an+b)：偽類，X為選擇器，解析得到元素標簽，選擇前面有an + b - 1個相同標簽兄弟節點的元素。相容性IE9+
X:nth-last-of-type(an+b)：偽類，X為選擇器，解析得到元素標簽，選擇後面有an+b-1個相同標簽兄弟節點的元素。相容性IE9+
X:first-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父節點的第一個子元素。相容性IE7+
X:last-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父節點的最後一個子元素。相容性IE9+
X:only-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父元素的唯一子元素。相容性IE9+
X:only-of-type：偽類，選擇X選擇的元素，解析得到元素標簽，如果該元素沒有相同類型的兄弟節點時選中它。相容性IE9+
X:first-of-type：偽類，選擇X選擇的元素，解析得到元素標簽，如果該元素是此此類型元素的第一個兄弟。選中它。相容性IE9+

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

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。

優點：

減少HTTP請求數，極大地提高頁面載入速度
增加圖片信息重覆度，提高壓縮比，減少圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

圖片合併麻煩
維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式

`display: none;`與`visibility: hidden;`的區別

聯繫：它們都能讓元素不可見

區別：

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

css hack原理及常用hack

原理：利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器樣式。常見的hack有1）屬性hack。2）選擇器hack。3）IE條件註釋

IE條件註釋：適用於[IE5, IE9]常見格式如下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

選擇器hack：不同瀏覽器對選擇器的支持不一樣

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

屬性hack：不同瀏覽器解析bug或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

specified value,computed value,used value計算方法

specified value: 計算方法如下：
1. 如果樣式表設置了一個值，使用這個值
2. 如果沒有設置值，這個屬性是繼承屬性，從父元素繼承
3. 如果沒設置，並且不是繼承屬性，使用css規範指定的初始值
computed value: 以specified value根據規範定義的行為進行計算，通常將相對值計算為絕對值，例如em根據font-size進行計算。一些使用百分數並且需要佈局來決定最終值的屬性，如width，margin。百分數就直接作為computed value。line-height的無單位值也直接作為computed value。這些值將在計算used value時得到絕對值。computed value的主要作用是用於繼承
used value：屬性計算後的最終值，對於大多數屬性可以通過window.getComputedStyle獲得，尺寸值單位為像素。以下屬性依賴於佈局，
- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent

`link`與`@import`的區別

link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套導致串列下載，出現FOUC
link可以通過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早於@import，可以使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則之前，可以在css文件中引用其他文件
總體來說：link優於@import

`display: block;`和`display: inline;`的區別

block元素特點：

1.處於常規流中時，如果width沒有設置，會自動填充滿父容器 2.可以應用margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時佈局時在前後元素位置之間（獨占一個水平空間） 5.忽略vertical-align

inline元素特點

1.水平方向上根據direction依次佈局 2.不會在元素前後進行換行 3.受white-space控制 4.margin/padding在豎直方向上無效，水平方向上有效 5.width/height屬性對非替換行內元素無效，寬度由元素內容決定 6.非替換行內元素的行框高由line-height確定，替換行內元素的行框高由height,margin,padding,border決定 6.浮動或絕對定位時會轉換為block7.vertical-align屬性生效

PNG,GIF,JPG的區別及如何選

參考資料：選擇正確的圖片格式 GIF:

8位像素，256色
無損壓縮
支持簡單動畫
支持boolean透明
適合簡單動畫

JPEG：

顏色限於256
有損壓縮
可控制壓縮質量
不支持透明
適合照片

PNG：

有PNG8和truecolor PNG
PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動畫
適合圖標、背景、按鈕

CSS有哪些繼承屬性

IE6瀏覽器有哪些常見的bug,缺陷或者與標準不一致的地方,如何解決

IE6不支持min-height，解決辦法使用css hack：

.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下內容高度超過會自動擴展高度
}

ol內li的序號全為1，不遞增。解決方法：為li設置樣式display: list-item;
未定位父元素overflow: auto;，包含position: relative;子元素，子元素高於父元素時會溢出。解決辦法：1）子元素去掉position: relative;; 2）不能為子元素去掉定位時，父元素position: relative;

<style type="text/css">
.outer {
    width: 215px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
    position: relative;  /* 修複bug */
}
.inner {
    width: 100px;
    height: 200px;
    background-color: purple;
    position: relative;
}
</style>

<div class="outer">
    <div class="inner"></div>
</div>

IE6只支持a標簽的:hover偽類，解決方法：使用js為元素監聽mouseenter，mouseleave事件，添加類實現效果：

<style type="text/css">
.p:hover,
.hover {
    background: purple;
}
</style>

<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/javascript">
function addClass(elem, cls) {
    if (elem.className) {
        elem.className += ' ' + cls;
    } else {
        elem.className = cls;
    }
}
function removeClass(elem, cls) {
    var className = ' ' + elem.className + ' ';
    var reg = new RegExp(' +' + cls + ' +', 'g');
    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
    target.attachEvent('onmouseenter', function () {
        addClass(target, 'hover');
    });
    target.attachEvent('onmouseleave', function () {
        removeClass(target, 'hover');
    })
}
</script>

IE5-8不支持opacity，解決辦法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

IE6在設置height小於font-size時高度值為font-size，解決辦法：font-size: 0;
IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片
IE6-7不支持display: inline-block解決辦法：設置inline並觸發hasLayout

    display: inline-block;
    *display: inline;
    *zoom: 1;

IE6下浮動元素在浮動方向上與父元素邊界接觸元素的外邊距會加倍。解決辦法： 1）使用padding控制間距。 2）浮動元素display: inline;這樣解決問題且無任何副作用：css標準規定浮動元素display:inline會自動調整為block
通過為塊級元素設置寬度和左右margin為auto時，IE6不能實現水平居中，解決方法：為父元素設置text-align: center;

容器包含若幹浮動元素時如何清理(包含)浮動

容器元素閉合標簽前添加額外元素並設置clear: both
父元素觸發塊級格式化上下文(見塊級可視化上下文部分)
設置容器元素偽元素進行清理推薦的清理浮動方法

/**
* 在標準瀏覽器下使用
* 1 content內容為空格用於修複opera下文檔中出現
*   contenteditable屬性時在清理浮動元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
*   子元素top-margin摺疊,這樣能使清理效果與BFC，IE6/7
*   zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
* IE 6/7下使用
* 通過觸發hasLayout實現包含浮動
**/
.clearfix {

web面試題大全