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

PAGE[HTML&&CSS]Doctype?嚴格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?Doctype聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。該標簽可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基于框架的HTML文檔。當瀏覽器廠商開始創(chuàng)建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現(xiàn)這一點，他們創(chuàng)建了兩種呈現(xiàn)模式：標準模式和混雜模式（quirksmode）。在標準模式中，瀏覽器根據(jù)規(guī)范呈現(xiàn)頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器（比如MicrosoftIE4和NetscapeNavigator4）的行為以防止老站點無法工作。瀏覽器根據(jù)DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現(xiàn)方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式呈現(xiàn)。對于HTML4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現(xiàn)。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現(xiàn)，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現(xiàn)。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現(xiàn)。行內元素有哪些？塊級元素有哪些？CSS的盒模型？行內元素有：abspanIbemimginputselectstrong塊級元素有：divulollidldtddh1h2h3h4…p盒模型：marginborderpaddingwidthCSS引入的方式有哪些?link和@import的區(qū)別是?

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

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

關于CSSspecificityCSS的specificity特性或稱非凡性，它是衡量一個衡量CSS值優(yōu)先級的一個標準，既然作為標準，就具有一套相關的判定規(guī)定及計算方式，specificity用一個四位的數(shù)字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進制，級別之間不可超越。在多個選擇符應用于同一個元素上那么Specificity值高的最終獲得優(yōu)先級。選擇符Specificity值列表：規(guī)則：1.行內樣式優(yōu)先級Specificity值為1,0,0,0，高于外部定義。如：<divstyle=”color:red”>sjweb</div>外部定義指經由<link>或<style>標簽定義的規(guī)則；2.!important聲明的Specificity值最高；3.Specificity值一樣的情況下，按CSS代碼中出現(xiàn)的順序決定，后者CSS樣式居上；4.由繼續(xù)而得到的樣式沒有specificity的計算，它低于一切其他規(guī)則(比如全局選擇符*定義的規(guī)則)。算法：當遇到多個選擇符同時出現(xiàn)時候按選擇符得到的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.bodydivp{color:green;}分析：3個元素{bodydivp}，Specificity值為0,0,0,33.div.sjweb{font-size:12px;}分析：1個元素{div}，Specificity值為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>bodydiv[id=”totals”]ulli>p{color:red;}分析：6個元素{htmlbodydivullip}Specificity值為0,0,0,61個屬性選擇符{[id=”totals”]}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)先級。

前端頁面由哪三層構成，分別是什么？作用是什么？

網頁分成三個層次，即：結構層、表示層、行為層。

網頁的結構層（structurallayer）由HTML或XHTML之類的標記語言負責創(chuàng)建。標簽，也就是那些出現(xiàn)在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P標簽表達了這樣一種語義：“這是一個文本段?！?/p>

網頁的表示層（presentationlayer）由CSS負責創(chuàng)建。CSS對“如何顯示有關內容”的問題做出了回答。

網頁的行為層（behaviorlayer）負責回答“內容應該如何對事件做出反應”這一問題。這是Javascript語言和DOM主宰的領域。css的基本語句構成是？

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

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

非IE內核瀏覽器：firefoxoperasafarichrome

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

2.文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定line-height。確保所有文字都有默認的line-height值。這點很重要，在高度上我們不能容忍1px的差異。

3.ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會被內容撐大，而ie下是會被內容撐大，高度限定失效。所以不要輕易給容器定義height。

4.還討論內容撐破容器問題，橫向上的。如果float容器未定義寬度，ff下內容會盡可能撐開容器寬度，ie下則會優(yōu)先考慮內容折行。故，內容可能撐破的浮動容器需要定義width。

5.浮動的清除，ff下不清除浮動是不行的。

6.mirrormarginbug，當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現(xiàn)類似問題，都是ie6下的特產，該類bug出現(xiàn)的情況較為復雜，遠不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。解決方案：外層元素設定border或設定float。

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

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

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

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

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

12.鏈接的hover狀態(tài)。a:hoverimg{width: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或者overflow-y的特性，ie7、ff不支持。

15.ie6下嚴重的bug，float元素如沒定義寬度，內部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復雜的容器，都要給個寬度的。

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

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

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

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

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

HTML5標簽的改變：<header>,<footer>,<dialog>,<aside>,<figure>,<section>等

IE9以上開始支持

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