理論知識(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的特點:
- IE無法調整那些使用px作為單位的字體大小。
- 國外的大部分網站能夠調整的原因在於使用了em或rem作為字體單位。
- Firefox能夠調整px、em和rem,但是96%以上的中國網民使用IE瀏覽器(或內核)。
- em的特點:
- em的值並不是固定的。
- em會繼承父級的字體大小。
- rem的特點(除IE8外,所有瀏覽器均支持):
- 只修改根元素就成比例的調整所有字體的大小。
- 可避免字體大小逐層復合的連鎖反應。
(參考: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)