极速快3大小投注技术|最新极速快3开奖结果

WEB前端開發工程師面試題

導語 WEB前端開發工程師面試題[HTML && CSS]1 Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?Doctype聲明位于文檔中的最前面的位置,處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或
WEB前端開發工程師面試題

[HTML && CSS]

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

當瀏覽器廠商開始創建與標準兼容的瀏覽器時,他們希望確保向后兼容性。為了實現這一點,他們創建了兩種呈現模式:標準模式和混雜模式(quirks mode)。在標準模式中,瀏覽器根據規范呈現頁面;在混雜模式中,頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器(比如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。
http://www.hlwom.icu/ true WEB前端開發工程師面試題 http://www.hlwom.icu/show-66-506-1.html report 6463 WEB前端開發工程師面試題[HTML && CSS]1 Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?Doctype聲明位于文檔中的最前面的位置,處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或
TAG:前端 工程師
本站歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動成果
轉載請注明: 文章轉載自:愛思資源網 http://www.hlwom.icu/show-66-506-1.html

[前端插件推薦] Plugin

1 2 3 4
  • jQuery實現逐字逐句顯示插件l-by-l.min.js
  • jQuery帶方向感知的鼠標滑過圖片邊框特效插件
  • jQuery HotKeys監聽鍵盤按下事件keydown插件
  • 響應式無限輪播jQuery旋轉木馬插件
響應式無限輪播jQuery旋轉木馬插件
web前端開發
愛思資源網 Copyright 2012-2014 www.hlwom.icu All rights reserved.(晉ICP備13001436號-1)
极速快3大小投注技术 时时彩开奖号码能否控制 2019048深圳风采 会员登陆49c彩票 福彩湖南平台 北京pk赛车冠军定位走势图 双色球2019057期开奖号码是多少 腾讯10分彩票开奖查询 体育彩票口袋彩店 飞艇官网开奖结果 新浪爱彩混合过关