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

PAGE[HTML&&CSS]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í)，他們希望確保向后兼容性。為了實(shí)現(xiàn)這一點(diǎn)，他們創(chuàng)建了兩種呈現(xiàn)模式：標(biāo)準(zhǔn)模式和混雜模式（quirksmode）。在標(biāo)準(zhǔn)模式中，瀏覽器根據(jù)規(guī)范呈現(xiàn)頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器（比如MicrosoftIE4和NetscapeNavigator4）的行為以防止老站點(diǎn)無法工作。瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)。對于HTML4.01文檔，包含嚴(yán)格DTD的DOCTYPE常常導(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)。行內(nèi)元素有哪些？塊級元素有哪些？CSS的盒模型？行內(nèi)元素有：abspanIbemimginputselectstrong塊級元素有：divulollidldtddh1h2h3h4…p盒模型：marginborderpaddingwidthCSS引入的方式有哪些?link和@import的區(qū)別是?

使用LINK標(biāo)簽將樣式規(guī)則寫在.css的樣式文件中，再以<link>標(biāo)簽引入。<linkrel=stylesheettype="text/css"href="example.css">使用@import引入跟link方法很像，但必須放在<STYLE>...</STYLE>中<STYLETYPE="text/css"><!--@importurl(css/example.css);--></STYLE>使用STYLE標(biāo)簽將樣式規(guī)則寫在<STYLE>...</STYLE>標(biāo)簽之中。<STYLETYPE="text/css"><!--body{color:#666;background:#f0f0f0;font-size:12px;td,p{color:#c00;font-size:12px;}--></STYLE>使用STYLE屬性將STYLE屬性直接加在個(gè)別的元件標(biāo)簽里，<元件(標(biāo)簽)STYLE="性質(zhì)(屬性)1:設(shè)定值1;性質(zhì)(屬性)2:設(shè)定值2;...}使用<span></span>標(biāo)記引入樣式<spanstyle="font:12px/20px#000000;"></span>兩者區(qū)別：加載順序的差別。當(dāng)一個(gè)頁面被加載的時(shí)候，link引用的CSS會同時(shí)被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。@import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個(gè)主樣式表，在主樣式表中再引入其他的樣式表，如：main.css———————-@import“sub1.css”;@import“sub2.css”;這樣做有一個(gè)缺點(diǎn)，會對網(wǎng)站服務(wù)器產(chǎn)生過多的HTTP請求，以前是一個(gè)文件，而現(xiàn)在卻是兩個(gè)或更多文件了，服務(wù)器的壓力增大，瀏覽量大的網(wǎng)站還是謹(jǐn)慎使用。CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計(jì)算？內(nèi)聯(lián)和important哪個(gè)優(yōu)先級高？通配選擇符*{sRules}類型選擇符E{sRules}

td{font-size:14px;width:120px;}屬性選擇符

E[attr]{sRules}

E[attr=value]{sRules}

E[attr~=value]{sRules}

E[attr|=value]{sRules}

h[title]{color:blue;}/*所有具有title屬性的h對象*/

span[class=demo]{color:red;}

div[speed="fast"][dorun="no"]{color:red;}

a[rel~="copyright"]{color:black;}包含選擇符E1E2{sRules}

tabletd{font-size:14px;}子對象選擇符E1>E2{sRules}

divul>lip{font-size:14px;}ID選擇符#ID{sRules}類選擇符E.className{sRules}選擇符分組

E1,E2,E3{sRules}偽類及偽對象選擇符

E:Pseudo-Classes{sRules}

(Pseudo-Classes)[:link:hover:active:visited:focus:first-child:first:left:right:lang]

E:Pseudo-Elements{sRules}

(Pseudo-Elements)[:first-letter:first-line:before:after]可以繼承的有：font-sizefont-familycolor不可繼承的一般有：borderpaddingmarginbackground-colorwidthheight等

============================

關(guān)于CSSspecificityCSS的specificity特性或稱非凡性，它是衡量一個(gè)衡量CSS值優(yōu)先級的一個(gè)標(biāo)準(zhǔn)，既然作為標(biāo)準(zhǔn)，就具有一套相關(guān)的判定規(guī)定及計(jì)算方式，specificity用一個(gè)四位的數(shù)字串(CSS2是三位)來表示，更像四個(gè)級別，值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進(jìn)制，級別之間不可超越。在多個(gè)選擇符應(yīng)用于同一個(gè)元素上那么Specificity值高的最終獲得優(yōu)先級。選擇符Specificity值列表：規(guī)則：1.行內(nèi)樣式優(yōu)先級Specificity值為1,0,0,0，高于外部定義。如：<divstyle=”color:red”>sjweb</div>外部定義指經(jīng)由<link>或<style>標(biāo)簽定義的規(guī)則；2.!important聲明的Specificity值最高；3.Specificity值一樣的情況下，按CSS代碼中出現(xiàn)的順序決定，后者CSS樣式居上；4.由繼續(xù)而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。算法：當(dāng)遇到多個(gè)選擇符同時(shí)出現(xiàn)時(shí)候按選擇符得到的Specificity值逐位相加，{數(shù)位之間沒有進(jìn)制比如說：0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0}就得到最終計(jì)算得的specificity，然后在比較取舍時(shí)按照從左到右的順序逐位比較。實(shí)例分析：1.div{font-size:12px;}分析：1個(gè)元素{div}，Specificity值為0,0,0,12.bodydivp{color:green;}分析：3個(gè)元素{bodydivp}，Specificity值為0,0,0,33.div.sjweb{font-size:12px;}分析：1個(gè)元素{div}，Specificity值為0,0,0,11個(gè)類選擇符{.sjweb}，Specificity值為0,0,1,0最終：Specificity值為0,0,1,14.Div#sjweb{font-size:12px;}分析：1個(gè)元素{div}，Specificity值為0,0,0,11個(gè)類選擇符{.sjweb}，Specificity值為0,1,0,0最終：Specificity值為0,1,0,15.html>bodydiv[id=”totals”]ulli>p{color:red;}分析：6個(gè)元素{htmlbodydivullip}Specificity值為0,0,0,61個(gè)屬性選擇符{[id=”totals”]}Specificity值為0,0,1,02個(gè)其他選擇符{>>}Specificity值為0,0,0,0最終：Specificity值為0,0,1,6!important的優(yōu)先級最高使用!important可以改變優(yōu)先級別為最高，其次是style對象，然后是id>class>tag，另外在同級樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級。

前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？

網(wǎng)頁分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。

網(wǎng)頁的結(jié)構(gòu)層（structurallayer）由HTML或XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號里的單詞，對網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P標(biāo)簽表達(dá)了這樣一種語義：“這是一個(gè)文本段。”

網(wǎng)頁的表示層（presentationlayer）由CSS負(fù)責(zé)創(chuàng)建。CSS對“如何顯示有關(guān)內(nèi)容”的問題做出了回答。

網(wǎng)頁的行為層（behaviorlayer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對事件做出反應(yīng)”這一問題。這是Javascript語言和DOM主宰的領(lǐng)域。css的基本語句構(gòu)成是？

選擇器{屬性1:值1;屬性2:值2;……}你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？怎么會出現(xiàn)？解決方法是什么？

IE內(nèi)核瀏覽器：360，傲游，搜狗，世界之窗，騰訊TT

非IE內(nèi)核瀏覽器：firefoxoperasafarichrome

1.就是ie6雙倍邊距的問題，在使用了float的情況下，不管是向左還是向右都會出現(xiàn)雙倍，最簡單的解決方法就是用display:inline;加到css里面去。

2.文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實(shí)際占高16px，下留白3px，ff下實(shí)際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定line-height。確保所有文字都有默認(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.mirrormarginbug，當(dāng)外層元素內(nèi)有float元素時(shí)，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現(xiàn)類似問題，都是ie6下的特產(chǎn)，該類bug出現(xiàn)的情況較為復(fù)雜，遠(yuǎn)不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。解決方案：外層元素設(shè)定border或設(shè)定float。

7.吞吃現(xiàn)象，限于篇幅，我就不展開了。還是ie6，上下兩個(gè)div，上面的div設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的div也有了背景，這就是吞吃現(xiàn)象。對應(yīng)上面的背景吞吃現(xiàn)象，還有滾動下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個(gè)zoom好象是專門為解決ie6bug而生的。

8.注釋也能產(chǎn)生bug~~~“多出來的一只豬。”這是前人總結(jié)這個(gè)bug使用的文案，ie6的這個(gè)bug下，大家會在頁面看到豬字出現(xiàn)兩遍，重復(fù)的內(nèi)容量因注釋的多少而變。解決方案：用“<!–[if!IE]>picRotatestart<![endif]–>”方法寫注釋。

9.<li/>里加float<div/>，這是一個(gè)典型的，棘手的兼容問題，希望引起大家正視，給li不同的屬性會有不同的解釋效果，ff下的解釋稍可理解，ie6下的解釋會讓你摸不著頭腦，由于問題的復(fù)雜性，將另起一文專門討論該問題。在《ul使用心得》一文里有相關(guān)成果，卻沒給出問題解決的過程。

10.img下的留白。解決方案：給img設(shè)定display:block。

11.失去line-height。<divstyle=”line-height:20px”><img/>文字</div>，很遺憾，在ie6下單行文字line-height效果消失了。。。，原因是<img/>這個(gè)inline-block元素和inline元素寫在一起了。解決方案：讓img和文字都float起來。

12.鏈接的hover狀態(tài)。a:hoverimg{width:300px}我們想讓鼠標(biāo)hover時(shí)，鏈接里包含的圖片寬度變化，可惜在ie6下無效，ie7、ff下有效。

13.非鏈接的hover狀態(tài)。div:hover{}這樣的樣式ie6是不認(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，這個(gè)div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復(fù)雜的容器，都要給個(gè)寬度的。

16.ie6下的bug，絕對定位的div下包含相對定位的div，如果給內(nèi)層相對定位的div高度height具體值，內(nèi)層相對層將具有100%的width值，外層絕對層將被撐大。解決方案給內(nèi)層相對層float屬性。

17.ie6下的bug，<head></head>內(nèi)有<basetarget=”_blank”/>的情況下，position:relative層下的float層內(nèi)文字無法選中。

18.終于來了個(gè)ff的缺點(diǎn)。width:100%這個(gè)東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結(jié)束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點(diǎn)倒學(xué)乖了跟了ie。如何居中一個(gè)浮動元素?

設(shè)置容器的浮動方式為相對定位，然后確定容器的寬高，比如寬500高300的層，然后設(shè)置層的外邊距。

div{Width:500px;height:300px;Margin:-150px00-250px;position:relative;left:50%;top:50%;}有沒有關(guān)注HTML5和CSS3?如有請簡單說一些您對它們的了解情況！

HTML5標(biāo)簽的改變：<header>,<footer>,<dialog>,<aside>,<figure>,<section>等

IE9以上開始支持

CSS3實(shí)現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器。如果讓你來制作一個(gè)訪問量很高的大型網(wǎng)站，你會如何來管理所有CSS文件、JS與圖片？你對前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會怎么樣？.clear{clear:both;disp