想擴展深入了解，點擊參考鏈接

1.DIV+CSS和table布局的區別：

• DIV+CSS布局比table布局節省頁面代碼，代碼也更加的清晰。
• DIV+CSS的頁面對搜索引擎支持好，而且速度更快了，能夠比Table更加快速的顯示網站內容。
• DIV+CSS布局是網站版面布局修改更簡單，因為表面代碼都寫在獨立的css文件裏，而table需要在頁面中修改信息。

（參考http://www.codesky.net/article/201008/139693.html）

2.px、rem與em的區別：（px：相對於顯示器屏幕分辨率而言。em：相對於當前對象內文本的字體尺寸。rem：相對於HTML根元素。）

• px的特點：

1. IE無法調整那些使用px作為單位的字體大小。
2. 國外的大部分網站能夠調整的原因在於使用了em或rem作為字體單位。
3. Firefox能夠調整px、em和rem，但是96%以上的中國網民使用IE瀏覽器（或內核）。

• em的特點：

1. em的值並不是固定的。
2. em會繼承父級的字體大小。

• rem的特點（除IE8外，所有瀏覽器均支持）：

1. 只修改根元素就成比例的調整所有字體的大小。
2. 可避免字體大小逐層復合的連鎖反應。

（參考：http://www.cnblogs.com/leejersey/p/3662612.html）

3.link和@import的區別：

• link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他業務；@import屬於CSS範疇，只能加載CSS。
• link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入後加載。
• link是XHTML標簽，無兼容問題；@import是CSS2.1提出的，低版本瀏覽器不支持。

（參考：http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html）

4.頁面重繪與頁面回流：

• 重繪：每個頁面至少回流一次，就是在頁面第一次加載的時候。也就是見受修改影響的部分重新“流一遍”，回流完成後，瀏覽器重新繪制受影響的部分到屏幕中，這種過程就叫做重繪。
• 回流：當render tree（渲染樹）中部分或全部因為元素的規模尺寸，布局，隱藏等改變需要重新構建時。

（參考：http://www.cnblogs.com/chuangweili/p/5160932.html）

5.border：0和border：none的區別：

• 性能區別：
  • • {border:0;}設為0像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經占用了內存值。
    • {border:none;}設為none即沒有，瀏覽器解析“none”時將不作出限額按動作，也不消耗內存值。
• 兼容性區別：
  • • {border:0;}設為0時，所有瀏覽器都一致把邊框隱藏。
    • {border:none;}設為none時，IE6/7無效邊框依然存在。

（參考：http://www.blueidea.com/tech/web/2009/7232.asp）

6.絕對定位absolute與相對定位:relative的區別：

• 絕對定位：對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。
• 相對定位：對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

（參考：http://www.cnblogs.com/z-w-r/p/6743846.html）

7.img標簽的title和alt屬性的區別：

• title：（標題、名目）
  • • 對元素的註釋說明和額外補充。（鼠標放到文字/圖片上時有title文字顯示。）
    • 並不作為搜索引擎抓取圖片的參考，更傾向於用戶體驗。（如果圖片旁邊已有文字說明，就沒必要再添加title。）
• alt：（改變、替換）
  • • 主要用於img標簽，它規定的圖像無法顯示時的替代文本。
    • 當用戶將鼠標一用到該img上時，IE會顯示出alt屬性的值（Chormel瀏覽器不會顯示）
    • 有利於SEO，是搜索引擎搜錄時判斷圖片與文字是否相關的重要依據。

（參考：http://playkid.blog.163.com/blog/static/562872602012108115949742/）

8.塊行元素的區別：

• 塊元素（轉換為行元素方法：display: inline;）：
  • • 獨占一行顯示。
    • 可設置寬高。
    • margin、padding縱橫都有效。
    • 除（p、h1-h6）個別特殊元素外，可包含塊狀元素和行元素。
    • from不能直接包含行元素。
• 行元素（轉換為塊元素方法：display: block;）：
  • • 高度由內容撐開，可並排顯示。
    • 不能設置寬高（內容設置寬高）。
    • margin、padding橫向設置有效，縱向無。
    • 除ins和del外，不能包含塊狀元素。

（參考：http://blog.csdn.net/M_agician/article/details/72232873）

9.display：none與visibility：hidden的區別：

• display：none：會使整個對象徹底消失（所占空間改變），當設置為block時對象才會被加載進來。
• visibility：hidden：只是對象隱藏，所占空間不改變。

（參考：http://bbs.blueidea.com/thread-2942695-1-1.html）

10.HTML和XHTML的區別：

• XHTML元素必須被正確的嵌套。
• XHTML元素必須被關閉。
• XHTML元素的標簽名必須用小寫字母。
• XHTML文檔必須擁有根元素。

（參考：http://www.w3school.com.cn/xhtml/xhtml_html.asp）

11.文檔聲明中標準模式與兼容模式的區別：

• 標準模式：在該模式下的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。
• 兼容模式：頁面以寬松的向後兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。

（參考：https://segmentfault.com/a/1190000000465431）

12.em與strong，b與i的區別：

• 默認樣式：
  • • strong=b=粗體；
    • em=i=斜體；
• HTML4.01：
  • • strong，em代表語義，從語義的強調，strong>em
    • b，i 無語義，只是樣式加粗或斜體（不推薦使用）
• HTML5：
  • • strong：頁面上的強調
    • em：句子中的強調
    • b：普通文本中重要性的文本，如：文檔概要中的產品名。或者代表強調的排版方式
    • i：普通文章中突出不同意見或語氣或其他的一段文本，如：分類名稱，技術術語，一個外語諺語，一個想法等。或者代表斜體的排版方式

（參考：http://www.zhihu.com/question/19551271）

理論知識（1）