WEB前端開發工程師面試題

WEB前端開發工程師面試題

[HTML && CSS]

1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?Doctype聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。該標簽可聲明三種DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示�；祀s模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點無法工作。

瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式呈現。對于HTML 4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。

2.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

行內元素有：a b span I b em img input select strong

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

盒模型：margin border padding width

3.CSS引入的方式有哪些? link和@import的區別是?使用 LINK標簽將樣式規則寫在.css的樣式文件中，再以標簽引入。

使用@import引入跟link方法很像，但必須放在… 中


<!–
@import url(css/example.css);
–>

使用STYLE標簽將樣式規則寫在…標簽之中。

<!–
body {color: #666;background: #f0f0f0;font-size: 12px;}
td,p {color:#c00;font-size: 12px;}
–>

使用STYLE屬性將STYLE屬性直接加在個別的元件標簽里，使用標記引入樣式cnwebshow.com 

兩者區別：加載順序的差別。當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。@import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

這樣做有一個缺點，會對網站服務器產生過多的HTTP請求，以前是一個文件，而現在卻是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站還是謹慎使用。


4. CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?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 }
h[title] { color: blue; }/* 所有具有title屬性的h對象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }

l   包含選擇符E1 E2 { sRules }
table td { font-size:14px; }

l   子對象選擇符E1 > E2 { sRules }
div 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 :lang]
E : Pseudo-Elements { sRules }
( Pseudo-Elements )[:first-letter :first-line :before :after]可以繼承的有：font-size font-family color

不可繼承的一般有：border padding margin background-color width height等
============================

關于CSS specificity

CSS 的specificity 特性或稱非凡性，它是衡量一個衡量CSS值優先級的一個標準，既然作為標準，就具有一套相關的判定規定及計算方式，specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。
 

在多個選擇符應用于同一個元素上那么Specificity值高的最終獲得優先級。

選擇符Specificity值列表：


規則：

1. 行內樣式優先級Specificity值為1,0,0,0，高于外部定義。

如：sjweb

外部定義指經由或標簽定義的規則；

2.!important聲明的Specificity值最高；

3.Specificity值一樣的情況下，按CSS代碼中出現的順序決定，后者CSS樣式居上；

4.由繼續而得到的樣式沒有specificity的計算，它低于一切其他規則(比如全局選擇符*定義的規則)。

算法：

當遇到多個選擇符同時出現時候

按選擇符得到的Specificity值逐位相加，

{數位之間沒有進制 比如說： 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,1

 
2.body div p{color: green;}

分析：

3個元素{ body div p }，Specificity值為0,0,0,3
 

3.div .sjweb{ font-size:12px;}

分析：

1個元素{ div }，Specificity值為0,0,0,1

1個類選擇符{.sjweb}，Specificity值為0,0,1, 0

最終：Specificity值為 0,0,1,1
 

4.Div # sjweb { font-size:12px;}

分析：

1個元素{ div }，Specificity值為0,0,0,1

1個類選擇符{.sjweb}，Specificity值為0,1,0, 0

最終：Specificity值為 0,1,0,1
 

5.html > body div [id=”totals”] ul li > p {color:red;}

分析：

6個元素{ html body div ul li p}  Specificity值為0,0,0,6

1個屬性選擇符{ [id=”totals”] }      Specificity值為0,0,1,0

2個其他選擇符{ >  > }            Specificity值為0,0,0,0

最終：Specificity值為 0,0,1,6
 

!important 的優先級最高使用!important可以改變優先級別為最高，其次是style對象，然后是id > class >tag ，另外在同級樣式按照申明的順序后出現的樣式具有高優先級。

5.前端頁面由哪三層構成，分別是什么?作用是什么?
網頁分成三個層次，即：結構層、表示層、行為層。

網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段。”
網頁的表示層（presentation layer） 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。
網頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。6.     css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些?怎么會出現?解決方法是什么?
IE內核瀏覽器：360，傲游，搜狗，世界之窗，騰訊TT
非IE內核瀏覽器：firefox opera safari chrome
1.就是ie6雙倍邊距的問題，在使用了float的情況下，不管是向左還是向右都會出現雙倍，最簡單的解決方法就是用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下則會優先考慮內容折行。故，內容可能撐破的浮動容器需要定義width。
5. 浮動的清除，ff下不清除浮動是不行的。
6. mirrormargin bug，當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現類似問題，都是ie6下的特產，該類bug 出現的情況較為復雜，遠不只這一種出現條件，還沒系統整理。解決方案：外層元素設定border 或 設定float。
7. 吞吃現象，限于篇幅，我就不展開了。還是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。
8. 注釋也能產生bug~~~“多出來的一只豬。”這是前人總結這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現兩遍，重復的內容量因注釋的多少而變。解決方案：用“ picRotate start ”方法寫注釋。
9. 里加 float ，這是一個典型的，棘手的兼容問題，希望引起大家正視 ，給li 不同的屬性會有不同的解釋效果，ff下的解釋稍可理解，ie6下的解釋會讓你摸不著頭腦，由于問題的復雜性，將另起一文專門討論該問題。在《ul使用心得》一文里有相關成果，卻沒給出問題解決的過程。
10. img下的留白。解決方案：給img設定 display:block。
11. 失去line-height。文字
，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。
12. 鏈接的hover狀態。a:hover img{width:300px} 我們想讓鼠標hover時，鏈接里包含的圖片寬度變化，可惜在ie6下無效，ie7、ff下有效。
13. 非鏈接的hover狀態。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，內有的情況下，position:relative層下的float層內文字無法選中。
18. 終于來了個ff的缺點。width:100%這個東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學乖了跟了ie。8.     如何居中一個浮動元素?
設置容器的浮動方式為相對定位，然后確定容器的寬高，比如寬500 高 300 的層，然后設置層的外邊距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}9.     有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況！
HTML5標簽的改變：, , , , , 等
IE9以上開始支持
CSS3實現圓角，陰影，對文字加特效，增加了更多的CSS選擇器。10.   如果讓你來制作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片?11.   你對前端界面工程師這個職位是怎么樣理解的?它的前景會怎么樣? 
 
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

.clearfix:after {clear: both;content: ‘.’;display: block;visibility: hidden;height: 0;}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}


.clearfix{*zoom:1;}.clearfix:after{content:’\20′;display:block;height:0;clear:both;}
 

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}/* Hides from IE-mac \*/

* html .clearfix{height:1%;}

.clearfix{display:block;}/* End hide from IE-mac */
 

這個clearfix的CSS使用了after這個偽對象，它將在應用clearfix的元素的結尾添加content中的內容。 在這里添加了一個句號”.”，并且把它的display設置成block；高度設為0；clear設為both；visibility設為隱藏。這樣就達到了撐開容器的目的。要讓IE也完美顯示，則必須在clearfix這個CSS定義的后面加上一些專門為IE設定的HACK。