又到了畢業(yè)季，很多小伙伴們都到了找工作的時候了，好多小伙伴問我有前端的面試題么？答：沒有。 呃呃… …

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了順平免費建站歡迎大家使用！

小伙伴本寶寶真的沒有騙你們，我從畢業(yè)到現(xiàn)在一直在一家公司沒有換過，所以手里壓根沒有面試題。我們公司招聘也壓根不需要什么面試題。因為那些都是可以百度的哈哈。 但是大部分公司還是有面試題的，所以征求大家意見后總結(jié)一下關(guān)于前端的面試題。今天我們分享關(guān)于Html和CSS部分的。

更多關(guān)于前端開發(fā)的資源請點擊： http://www.aliyue.net/?s=web

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

• (Q1)瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。

• (Q2)內(nèi)核：Trident，Gecko，Presto，Webkit。

2. 說下行內(nèi)元素和塊級元素的區(qū)別？行內(nèi)塊元素的兼容性使用？（IE8 以下）

• (Q1)行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。
  塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個斷行。

• (Q2)兼容性：display:inline-block;*display:inline;*zoom:1;

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

• （1）父級div定義height。

• （2）結(jié)尾處加空div標簽clear:both。

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

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

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

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

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

• （8）結(jié)尾處加br標簽clear:both。

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

• (Q1)box-sizing: content-box|border-box|inherit;

• (Q2)content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。
  border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

5.Doctype作用？標準模式與兼容模式各有什么區(qū)別?

• (Q1)告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。

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

6.HTML5 為什么只需要寫 ？

• HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）。

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

7.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

• （1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

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

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

8.介紹一下你對瀏覽器內(nèi)核的理解？

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

• 渲染引擎：負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。

• JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

• 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。

9.html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

• (1)繪畫 canvas;

• (2)用于媒介回放的 video 和 audio 元素;

• (3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

• (4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;

• (5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;

• (6)表單控件，calendar、date、time、email、url、search;

• (7)新的技術(shù)webworker, websocket, Geolocation;

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。當然也可以直接使用成熟的框架、比如html5shim;

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

• 用正確的標簽做正確的事情。

• html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

• 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

• 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

• 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

關(guān)于html和css的總結(jié)到這里。有錯誤的地方還清大家指出來。大家在面試的時候遇到什么問題可以給我留言我們一起解決整理下來！