理論知識（1）

想擴展深刻了解，點擊參考連接

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運做模式都是以該瀏覽器支持的最高標準運行。
• 兼容模式：頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。

（參考：http://www.javashuo.com/article/p-fbbfstlc-ds.html）

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）