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

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

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

3、n 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標簽將樣式規(guī)則寫在.css的樣式文件中，再以標簽引入。2. 使用import引入跟link方法很像，但必須放在. 中3. 使用STYLE標簽將樣式規(guī)則寫在.標簽之中。4. 使用STYLE屬性將STYLE屬性直接加在個別的元件標簽里，元件(標簽) STYLE=性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定

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

5、ant哪個優(yōu)先級高？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對象 */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 子對象選擇符E1 E2 sRules div ulli 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-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 特性或稱非凡性，它是衡量一個衡量CSS值優(yōu)先級的一個標準，既然作為標準，就具有一套相關(guān)的判定規(guī)定及計算方式，specificity用一個四位的數(shù) 字串(CSS2是三位)來表示，更像四個級別，值從左

8、到右，左面的最大，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。在多個選擇符應(yīng)用于同一個元素上那么Specificity值高的最終獲得優(yōu)先級。選擇符Specificity值列表：規(guī)則：1. 行內(nèi)樣式優(yōu)先級Specificity值為1,0,0,0，高于外部定義。如：sjweb外部定義指經(jīng)由或標簽定義的規(guī)則；2.!important聲明的Specificity值最高；3.Specificity值一樣的情況下，按CSS代碼中出現(xiàn)的順序決定，后者CSS樣式居上；4.由繼續(xù)而得到的樣式?jīng)]有specificity的計算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。算法：當遇到多個選擇符同時出現(xiàn)時

9、候按選擇符得到的Specificity值逐位相加，數(shù)位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0就得到最終計算得的specificity，然后在比較取舍時按照從左到右的順序逐位比較。實例分析：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 ，Specificity值為

10、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,0,61個屬性選擇符 id=”totals”

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

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

13、，搜狗，世界之窗，騰訊TT非IE內(nèi)核瀏覽器：firefox opera safari chrome1.就是ie6雙倍邊距的問題，在使用了float的情況下，不管是向左還是向右都會出現(xiàn)雙倍，最簡單的解決方法就是用display:inline;加到css里面去。2.文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定 line-height 。確保所有文字都有默認的 line-height 值。這點很重要，在高度上

14、我們不能容忍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，當外層元素內(nèi)有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding

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

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

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

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

19、缺點。width:100%這個東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結(jié)束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學(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標簽的改變：, , , , , 等IE9以上開始支持CSS3實現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器。10. 如果讓你來制作一個訪問量很高的大型網(wǎng)站，你會如何來管理所有CSS文件、JS與圖片？11. 你對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？.clear clear: both;display: block;overflow: hidden;visibility: hidden;wid