常見的CSS和HTML面試題

標籤：本地   沒有   trunk   常用   特性   storage   local   doc   inline   

1. 常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?

瀏覽器：IE，Chrome，FireFox，Safari，Opera。

核心：Trident，Gecko，Presto，Webkit。

2. 說下行內元素和區塊層級元素的區別？行內塊元素的相容性使用？（IE8 以下）

• 行內元素：會在水平方向排列，不能包含區塊層級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
  區塊層級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
• 相容性：display:inline-block;*display:inline;*zoom:1;

3.清除浮動有哪些方式？比較好的方式是哪一種？

（1）父級div定義height。

（2）結尾處加空div標籤clear:both。

（3）父級div定義偽類:after和zoom。

（4）父級div定義overflow:hidden。

（5）父級div定義overflow:auto。

（6）父級div也浮動，需要定義寬度。

（7）父級div定義display:table。

（8）結尾處加br標籤clear:both。

4.box-sizing常用的屬性有哪些？分別有什麼作用？

box-sizing: content-box|border-box|inherit;

content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

5.Doctype作用？標準模式與相容模式各有什麼區別?

<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以相容模式呈現。

標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準運行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,類比老式瀏覽器的行為以防止網站無法工作。

6.HTML5 為什麼只需要寫 <!DOCTYPEHTML>？

HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。

而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文件類型。

7.頁面匯入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel串連屬性等作用；而@import是CSS提供的，只能用於載入CSS;

（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

8.介紹一下你對瀏覽器核心的理解？

主要分成兩部分：渲染引擎(layout engineer或RenderingEngine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、映像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的文法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件用戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

9.html5有哪些新特性？如何處理HTML5新標籤的瀏覽器安全色問題？如何區分 HTML 和 HTML5？

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

• (1)繪畫 canvas;
• (2)用於媒介回放的 video 和 audio 元素;
• (3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
• (4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
• (5)語意化更好的內容元素，比如 article、footer、header、nav、section;
• (6)表單控制項，calendar、date、time、email、url、search;
• (7)新的技術webworker, websocket, Geolocation;

IE8/IE7/IE6支援通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤，瀏覽器支援新標籤後，還需要添加標籤預設的樣式。當然也可以直接使用成熟的架構、比如html5shim;

<!--[iflt IE 9]>

<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

10.簡述一下你對HTML語義化的理解？

• 用正確的標籤做正確的事情。
• html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
• 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
• 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
• 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

常見的CSS和HTML面試題