WEB前端開發(fā)工程師面試題

1、HTML && CSS1. Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?Doctype聲明位于文檔中的最前面的位置，處于標(biāo)簽之前。此標(biāo)簽可告知掃瞄器文檔使用哪種 HTML 或 XHTML 規(guī)范。該標(biāo)簽可聲明三種DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。當(dāng)掃瞄器廠商開頭創(chuàng)建與標(biāo)準(zhǔn)兼容的掃瞄器時，他們期望確保向后兼容性。為了實(shí)現(xiàn)這一點(diǎn)，他們創(chuàng)建了兩種呈現(xiàn)模式：標(biāo)準(zhǔn)模式和混雜模式（quirks mode）。在標(biāo)準(zhǔn)模式中，掃瞄器依據(jù)規(guī)范呈現(xiàn)頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式掃瞄器

2、（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點(diǎn)無法工作。掃瞄器依據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法。假如XHTML文檔包含形式完整的DOCTYPE，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)。對于HTML 4.01文檔，包含嚴(yán)格DTD的DOCTYPE經(jīng)常導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)。包含過渡DTD和URI的DOCTYPE也導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)，但是有過渡DTD而沒有URI會導(dǎo)致頁面以混雜模式呈現(xiàn)。DOCTYPE不存在或形式不正確會導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)。2. 行內(nèi)元素有哪些？塊級元素有哪些？CSS的盒模型？行內(nèi)元素

3、有：a b span I b em img input select strong塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4p盒模型：margin border padding width3. CSS引入的方式有哪些? link和import的區(qū)分是?1. 使用 LINK標(biāo)簽將樣式規(guī)章寫在.css的樣式文件中，再以<link>標(biāo)簽引入。<link rel=stylesheet type="text/css" href="example.css">2. 使用import引入跟link方法很像，但必

4、需放在<STYLE>.</STYLE> 中<STYLE TYPE="text/css"><!-import url(css/example.css);-></STYLE>3. 使用STYLE標(biāo)簽將樣式規(guī)章寫在<STYLE>.</STYLE>標(biāo)簽之中。<STYLE TYPE="text/css"><!-body color: #666;background: #f0f0f0;font-size: 12px;td,p color:#c00;font-size

5、: 12px;-></STYLE>4. 使用STYLE屬性將STYLE屬性直接加在個別的元件標(biāo)簽里，<元件(標(biāo)簽) STYLE="性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定值2; .5. 使用<span></span>標(biāo)記引入樣式<span style="font:12px/20px #000000;"></span>兩者區(qū)分：加載挨次的差別。當(dāng)一個頁面被加載的時候，link引用的CSS會同時被加載，而import引用的CSS會等到頁面全部被下載完再被加載。import可以在css中

6、再次引入其他樣式表，比如可以創(chuàng)建一個主樣式表，在主樣式表中再引入其他的樣式表，如：main.css-import “sub1.css”;import “sub2.css”;這樣做有一個缺點(diǎn)，會對網(wǎng)站服務(wù)器產(chǎn)生過多的HTTP懇求，以前是一個文件，而現(xiàn)在卻是兩個或更多文件了，服務(wù)器的壓力增大，掃瞄量大的網(wǎng)站還是謹(jǐn)慎使用。4. CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？內(nèi)聯(lián)和important哪個優(yōu)先級高？l 通配選擇符* sRules l 類型選擇符E sRules td font-size:14px; width:120px; l 屬性選擇符E attr sRules E att

7、r = value sRules E attr = value sRules E attr |= value sRules htitle color: blue; /* 全部具有title屬性的h對象 */spanclass=demo color: red; divspeed="fast"dorun="no" color: red; arel="copyright" color:black; l 包含選擇符E1 E2 sRules table td font-size:14px; l 子對象選擇符E1 > E2 sRules d

8、iv ul>li p font-size:14px; l ID選擇符 #ID sRules l 類選擇符E.className sRules l 選擇符分組E1 , E2 , E3 sRules l 偽類及偽對象選擇符E : Pseudo-Classes sRules ( Pseudo-Classes ):link :hover :active :visited :focus :first-child :first :left :right :langE : Pseudo-Elements sRules ( Pseudo-Elements ):first-letter :first-li

9、ne :before :after可以繼承的有：font-size font-family color不行繼承的一般有：border padding margin background-color width height等=關(guān)于CSS specificityCSS 的specificity 特性或稱非凡性，它是衡量一個衡量CSS值優(yōu)先級的一個標(biāo)準(zhǔn)，既然作為標(biāo)準(zhǔn)，就具有一套相關(guān)的判定規(guī)定及計算方式，specificity用一個四位的數(shù) 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進(jìn)制，級別之間不行超越。在多個選擇符應(yīng)用于同一個元素上那么Spec

10、ificity值高的最終獲得優(yōu)先級。選擇符Specificity值列表：規(guī)章：1. 行內(nèi)樣式優(yōu)先級Specificity值為1,0,0,0，高于外部定義。如：<div style=”color: red”>sjweb</div>外部定義指經(jīng)由<link>或<style>標(biāo)簽定義的規(guī)章；2.!important聲明的Specificity值最高；3.Specificity值一樣的狀況下，按CSS代碼中消滅的挨次打算，后者CSS樣式居上；4.由連續(xù)而得到的樣式?jīng)]有specificity的計算，它低于一切其他規(guī)章(比如全局選擇符*定義的規(guī)章)。算法：當(dāng)

11、遇到多個選擇符同時消滅時候按選擇符得到的Specificity值逐位相加，數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0就得到最終計算得的specificity，然后在比較取舍時依據(jù)從左到右的挨次逐位比較。實(shí)例分析：1.div font-size:12px;分析：1個元素 div，Specificity值為0,0,0,12.body div pcolor: green;分析：3個元素 body div p ，Specificity值為0,0,0,33.div .sjweb font-size:12px;分析：1個元素 div ，S

12、pecificity值為0,0,0,11個類選擇符.sjweb，Specificity值為0,0,1, 0最終：Specificity值為 0,0,1,14.Div # sjweb font-size:12px;分析：1個元素 div ，Specificity值為0,0,0,11個類選擇符.sjweb，Specificity值為0,1,0, 0最終：Specificity值為 0,1,0,15.html > body div id=”totals” ul li > p color:red;分析：6個元素 html body div ul li p Specificity值為0,0,

13、0,61個屬性選擇符 id=”totals” Specificity值為0,0,1,02個其他選擇符 > > Specificity值為0,0,0,0最終：Specificity值為 0,0,1,6!important 的優(yōu)先級最高使用!important可以轉(zhuǎn)變優(yōu)先級別為最高，其次是style對象，然后是id > class >tag ，另外在同級樣式依據(jù)申明的挨次后消滅的樣式具有高優(yōu)先級。5. 前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？網(wǎng)頁分成三個層次，即：結(jié)構(gòu)層、表示層、行為層。網(wǎng)頁的結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類

14、的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些消滅在尖括號里的單詞，對網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語義：“這是一個文本段?！本W(wǎng)頁的表示層（presentation layer） 由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對“如何顯示有關(guān)內(nèi)容”的問題做出了回答。網(wǎng)頁的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)當(dāng)如何對大事做出反應(yīng)”這一問題。這是 Javascript 語言和 DOM 主宰的領(lǐng)域。6. css的基本語句構(gòu)成是？選擇器屬性1:值1;屬性2:值2;7. 你做的頁面在哪些流覽器測試過？這些掃瞄器的內(nèi)核分別是什么?經(jīng)常遇

15、到的掃瞄器的兼容性有哪些？怎么會消滅？解決方法是什么？IE內(nèi)核掃瞄器：360，傲游，搜狗，世界之窗，騰訊TT非IE內(nèi)核掃瞄器：firefox opera safari chrome1.就是ie6雙倍邊距的問題，在使用了float的狀況下，不管是向左還是向右都會消滅雙倍，最簡潔的解決方法就是用display:inline;加到css里面去。2.文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同掃瞄器下占的空間是不一樣的，ie下實(shí)際占高16px，下留白3px，ff下實(shí)際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定 line-hei

16、ght 。確保全部文字都有默認(rèn)的 line-height 值。這點(diǎn)很重要，在高度上我們不能容忍1px 的差異。3. ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會被內(nèi)容撐大，而ie下是會被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。4. 還爭辯內(nèi)容撐破容器問題，橫向上的。假如float 容器未定義寬度，ff下內(nèi)容會盡可能撐開容器寬度，ie下則會優(yōu)先考慮內(nèi)容折行。故，內(nèi)容可能撐破的浮動容器需要定義width。5. 浮動的清除，ff下不清除浮動是不行的。6. mirrormargin bug，當(dāng)外層元素內(nèi)有float元素時，外層元素如定義margin

17、-top:14px，將自動生成margin-bottom:14px。padding也會消滅類似問題，都是ie6下的特產(chǎn)，該類bug 消滅的狀況較為簡單，遠(yuǎn)不只這一種消滅條件，還沒系統(tǒng)整理。解決方案：外層元素設(shè)定border 或 設(shè)定float。7. 吞吃現(xiàn)象，限于篇幅，我就不開放了。還是ie6，上下兩個div，上面的div設(shè)置背景，卻發(fā)覺下面沒有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對應(yīng)上面的背景吞吃現(xiàn)象，還有滾動下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個zoom好象是特地為解決ie6 bug而生的。8. 注釋也能產(chǎn)生bug“多出來的一只豬。”這是前人總結(jié)這個bug使用的文案，

18、ie6的這個bug 下，大家會在頁面看到豬字消滅兩遍，重復(fù)的內(nèi)容量因注釋的多少而變。解決方案：用“<!if !IE> picRotate start <!endif>”方法寫注釋。9. <li/>里加 float <div/>，這是一個典型的，麻煩的兼容問題，期望引起大家正視 ，給li 不同的屬性會有不同的解釋效果，ff下的解釋稍可理解，ie6下的解釋會讓你摸不著頭腦，由于問題的簡單性，將另起一文特地爭辯該問題。在ul使認(rèn)真得一文里有相關(guān)成果，卻沒給出問題解決的過程。10. img下的留白。解決方案：給img設(shè)定 display:block。11

19、. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很圓滿，在ie6下單行文字 line-height 效果消逝了。，緣由是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。12. 鏈接的hover狀態(tài)。a:hover imgwidth:300px 我們想讓鼠標(biāo)hover時，鏈接里包含的圖片寬度變化，惋惜在ie6下無效，ie7、ff下有效。13. 非鏈接的hover狀態(tài)。div:hover 這樣的樣式ie

20、6是不認(rèn)的，在ie7、ff下才有效果。14. ie下overflow:hidden對其下的確定層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。15. ie6下嚴(yán)峻的bug，float元素如沒定義寬度，內(nèi)部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素假如作為布局用或簡單的容器，都要給個寬度的。16. i

21、e6下的bug，確定定位的div下包含相對定位的div，假如給內(nèi)層相對定位的div高度height具體值，內(nèi)層相對層將具有100%的width值，外層確定層將被撐大。解決方案給內(nèi)層相對層float屬性。17. ie6下的bug，<head></head>內(nèi)有<base target=”_blank”/>的狀況下，position:relative層下的float層內(nèi)文字無法選中。18. 最終來了個ff的缺點(diǎn)。width:100%這個東西在ie里用很便利，會向上逐層搜尋width值，忽視浮動層的影響，ff下搜尋至浮動層結(jié)束，如此，只能給中間的全部浮動層加wid

22、th:100%才行，累啊。opera這點(diǎn)倒學(xué)乖了跟了ie。8. 如何居中一個浮動元素?設(shè)置容器的浮動方式為相對定位，然后確定容器的寬高，比如寬500 高 300 的層，然后設(shè)置層的外邊距。divWidth:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;9. 有沒有關(guān)注HTML5和CSS3?如有請簡潔說一些您對它們的了解狀況！HTML5標(biāo)簽的轉(zhuǎn)變：<header>, <footer>, <dialog>, <aside>, <figure>, <section> 等IE9以上開頭支持CSS3實(shí)現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器。10. 假如讓你來制作一個訪問量很高的大型網(wǎng)站，你會如何來管理全部CSS文件、JS與圖片？11. 你對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？.clear clear: both;displ