WEB前端開(kāi)發(fā)工程師面試題6頁(yè)

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

2、oft IE 4和Netscape Navigator 4）的行為以防止老站點(diǎn)無(wú)法工作。瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來(lái)選擇要使用的呈現(xiàn)方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標(biāo)準(zhǔn)模式呈現(xiàn)。對(duì)于HTML 4.01文檔，包含嚴(yán)格DTD的DOCTYPE常常導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn)。包含過(guò)渡DTD和URI的DOCTYPE也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn)，但是有過(guò)渡DTD而沒(méi)有URI會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。DOCTYPE不存在或形式不正確會(huì)導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)。2. 行內(nèi)元素有哪些？塊級(jí)元素有哪些？CSS的盒模型？行內(nèi)元素有：a b spa

3、n I b em img input select strong塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4p盒模型：margin border padding width3. CSS引入的方式有哪些? link和import的區(qū)別是?1. 使用 LINK標(biāo)簽將樣式規(guī)則寫(xiě)在.css的樣式文件中，再以標(biāo)簽引入。2. 使用import引入跟link方法很像，但必須放在. 中3. 使用STYLE標(biāo)簽將樣式規(guī)則寫(xiě)在.標(biāo)簽之中。4. 使用STYLE屬性將STYLE屬性直接加在個(gè)別的元件標(biāo)簽里，元件(標(biāo)簽) STYLE=性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定

4、值2; .5. 使用標(biāo)記引入樣式兩者區(qū)別：加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候，link引用的CSS會(huì)同時(shí)被加載，而import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個(gè)主樣式表，在主樣式表中再引入其他的樣式表，如：main.css-import “sub1.css”;import “sub2.css”;這樣做有一個(gè)缺點(diǎn)，會(huì)對(duì)網(wǎng)站服務(wù)器產(chǎn)生過(guò)多的HTTP請(qǐng)求，以前是一個(gè)文件，而現(xiàn)在卻是兩個(gè)或更多文件了，服務(wù)器的壓力增大，瀏覽量大的網(wǎng)站還是謹(jǐn)慎使用。4. CSS選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？?jī)?nèi)聯(lián)和import

5、ant哪個(gè)優(yōu)先級(jí)高？l 通配選擇符* sRules l 類型選擇符E sRules td font-size:14px; width:120px; l 屬性選擇符E attr sRules E attr = value sRules E attr = value sRules E attr |= value sRules htitle color: blue; /* 所有具有title屬性的h對(duì)象 */spanclass=demo color: red; divspeed=fastdorun=no color: red; arel=copyright color:black; l 包含選擇符E

6、1 E2 sRules table td font-size:14px; l 子對(duì)象選擇符E1 E2 sRules div ulli p font-size:14px; l ID選擇符 #ID sRules l 類選擇符E.className sRules l 選擇符分組E1 , E2 , E3 sRules l 偽類及偽對(duì)象選擇符E : Pseudo-Classes sRules ( Pseudo-Classes ):link :hover :active :visited :focus :first-child :first :left :right :langE : Pseudo-Ele

7、ments sRules ( Pseudo-Elements ):first-letter :first-line :before :after可以繼承的有：font-size font-family color不可繼承的一般有：border padding margin background-color width height等=關(guān)于CSS specificityCSS 的specificity 特性或稱非凡性，它是衡量一個(gè)衡量CSS值優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn)，既然作為標(biāo)準(zhǔn)，就具有一套相關(guān)的判定規(guī)定及計(jì)算方式，specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來(lái)表示，更像四個(gè)級(jí)別，值從左

8、到右，左面的最大，一級(jí)大于一級(jí)，數(shù)位之間沒(méi)有進(jìn)制，級(jí)別之間不可超越。在多個(gè)選擇符應(yīng)用于同一個(gè)元素上那么Specificity值高的最終獲得優(yōu)先級(jí)。選擇符Specificity值列表：規(guī)則：1. 行內(nèi)樣式優(yōu)先級(jí)Specificity值為1,0,0,0，高于外部定義。如：sjweb外部定義指經(jīng)由或標(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í)

9、候按選擇符得到的Specificity值逐位相加，數(shù)位之間沒(méi)有進(jìn)制 比如說(shuō)： 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.body div pcolor: green;分析：3個(gè)元素 body div p ，Specificity值為0,0,0,33.div .sjweb font-size:12px;分析：1個(gè)元素 div ，Specificity值為

10、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 body div id=”totals” ul li p color:red;分析：6個(gè)元素 html body div ul li p Specificity值為0,0,0,61個(gè)屬性選擇符 id=”totals”

11、 Specificity值為0,0,1,02個(gè)其他選擇符 Specificity值為0,0,0,0最終：Specificity值為 0,0,1,6!important 的優(yōu)先級(jí)最高使用!important可以改變優(yōu)先級(jí)別為最高，其次是style對(duì)象，然后是id class tag ，另外在同級(jí)樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級(jí)。5. 前端頁(yè)面由哪三層構(gòu)成，分別是什么？作用是什么？網(wǎng)頁(yè)分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。網(wǎng)頁(yè)的結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出

12、了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段。”網(wǎng)頁(yè)的表示層（presentation layer） 由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。網(wǎng)頁(yè)的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題。這是 Javascript 語(yǔ)言和 DOM 主宰的領(lǐng)域。6. css的基本語(yǔ)句構(gòu)成是？選擇器屬性1:值1;屬性2:值2;7. 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)？這些瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？怎么會(huì)出現(xiàn)？解決方法是什么？IE內(nèi)核瀏覽器：360，傲游

13、，搜狗，世界之窗，騰訊TT非IE內(nèi)核瀏覽器：firefox opera safari chrome1.就是ie6雙倍邊距的問(wèn)題，在使用了float的情況下，不管是向左還是向右都會(huì)出現(xiàn)雙倍，最簡(jiǎ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)很重要，在高度上

14、我們不能容忍1px 的差異。3. ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會(huì)被內(nèi)容撐大，而ie下是會(huì)被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。4. 還討論內(nèi)容撐破容器問(wèn)題，橫向上的。如果float 容器未定義寬度，ff下內(nèi)容會(huì)盡可能撐開(kāi)容器寬度，ie下則會(huì)優(yōu)先考慮內(nèi)容折行。故，內(nèi)容可能撐破的浮動(dòng)容器需要定義width。5. 浮動(dòng)的清除，ff下不清除浮動(dòng)是不行的。6. mirrormargin bug，當(dāng)外層元素內(nèi)有float元素時(shí)，外層元素如定義margin-top:14px，將自動(dòng)生成margin-bottom:14px。padding

15、也會(huì)出現(xiàn)類似問(wèn)題，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復(fù)雜，遠(yuǎn)不只這一種出現(xiàn)條件，還沒(méi)系統(tǒng)整理。解決方案：外層元素設(shè)定border 或 設(shè)定float。7. 吞吃現(xiàn)象，限于篇幅，我就不展開(kāi)了。還是ie6，上下兩個(gè)div，上面的div設(shè)置背景，卻發(fā)現(xiàn)下面沒(méi)有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對(duì)應(yīng)上面的背景吞吃現(xiàn)象，還有滾動(dòng)下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個(gè)zoom好象是專門為解決ie6 bug而生的。8. 注釋也能產(chǎn)生bug“多出來(lái)的一只豬?！边@是前人總結(jié)這個(gè)bug使用的文案，ie6的這個(gè)bug 下，大家會(huì)在頁(yè)面看到豬字出現(xiàn)兩遍，重復(fù)的內(nèi)容量因注釋的多少而變

16、。解決方案：用“ picRotate start ”方法寫(xiě)注釋。9. 里加 float ，這是一個(gè)典型的，棘手的兼容問(wèn)題，希望引起大家正視 ，給li 不同的屬性會(huì)有不同的解釋效果，ff下的解釋稍可理解，ie6下的解釋會(huì)讓你摸不著頭腦，由于問(wèn)題的復(fù)雜性，將另起一文專門討論該問(wèn)題。在ul使用心得一文里有相關(guān)成果，卻沒(méi)給出問(wèn)題解決的過(guò)程。10. img下的留白。解決方案：給img設(shè)定 display:block。11. 失去line-height。文字，很遺憾，在ie6下單行文字 line-height 效果消失了。，原因是這個(gè)inline-block元素和inline元素寫(xiě)在一起了。解決方案：讓i

17、mg 和文字都 float起來(lái)。12. 鏈接的hover狀態(tài)。a:hover imgwidth:300px 我們想讓鼠標(biāo)hover時(shí)，鏈接里包含的圖片寬度變化，可惜在ie6下無(wú)效，ie7、ff下有效。13. 非鏈接的hover狀態(tài)。div:hover 這樣的樣式ie6是不認(rèn)的，在ie7、ff下才有效果。14. ie下overflow:hidden對(duì)其下的絕對(duì)層position:absolute或者相對(duì)層position:relative無(wú)效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或

18、者overflow-y的特性，ie7、ff不支持。15. ie6下嚴(yán)重的bug，float元素如沒(méi)定義寬度，內(nèi)部如有div定義了height或zoom:1，這個(gè)div就會(huì)占滿一整行，即使你給了寬度。float元素如果作為布局用或復(fù)雜的容器，都要給個(gè)寬度的。16. ie6下的bug，絕對(duì)定位的div下包含相對(duì)定位的div，如果給內(nèi)層相對(duì)定位的div高度height具體值，內(nèi)層相對(duì)層將具有100%的width值，外層絕對(duì)層將被撐大。解決方案給內(nèi)層相對(duì)層float屬性。17. ie6下的bug，內(nèi)有的情況下，position:relative層下的float層內(nèi)文字無(wú)法選中。18. 終于來(lái)了個(gè)ff的

19、缺點(diǎn)。width:100%這個(gè)東西在ie里用很方便，會(huì)向上逐層搜索width值，忽視浮動(dòng)層的影響，ff下搜索至浮動(dòng)層結(jié)束，如此，只能給中間的所有浮動(dòng)層加width:100%才行，累啊。opera這點(diǎn)倒學(xué)乖了跟了ie。8. 如何居中一個(gè)浮動(dòng)元素?設(shè)置容器的浮動(dòng)方式為相對(duì)定位，然后確定容器的寬高，比如寬500 高 300 的層，然后設(shè)置層的外邊距。divWidth:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;9. 有沒(méi)有關(guān)注HTML5和CSS3?如有請(qǐng)簡(jiǎn)單說(shuō)一些您對(duì)它們的了解情況！HTML5標(biāo)簽的改變：, , , , , 等IE9以上開(kāi)始支持CSS3實(shí)現(xiàn)圓角，陰影，對(duì)文字加特效，增加了更多的CSS選擇器。10. 如果讓你來(lái)制作一個(gè)訪問(wèn)量很高的大型網(wǎng)站，你會(huì)如何來(lái)管理所有CSS文件、JS與圖片？11. 你對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？.clear clear: both;display: block;overflow: hidden;visibility: hidden;wid