前端程序員面試分類真題5

前端程序員面試分類真題5一、單項(xiàng)選擇題1.

IE獨(dú)有的數(shù)據(jù)存儲(chǔ)技術(shù)是______A.cookieB.localStorageC.sessionStorageD.userData正確答案：D（江南博哥）[考點(diǎn)]數(shù)據(jù)存儲(chǔ)[解析]userData是IE獨(dú)有的數(shù)據(jù)存儲(chǔ)技術(shù)，這是一種持久化存儲(chǔ)方式，因此即使關(guān)閉瀏覽器也不會(huì)清除這些數(shù)據(jù)，但可以設(shè)置失效日期。userData可將數(shù)據(jù)寄存在HTML元素中，能夠存儲(chǔ)1M左右的數(shù)據(jù)。

2.

以下選項(xiàng)中不屬于Cookie缺陷的是______A.增加HTTP首部的內(nèi)容B.容易被劫持C.保持請(qǐng)求狀態(tài)D.存儲(chǔ)4KB左右的信息正確答案：C[考點(diǎn)]數(shù)據(jù)存儲(chǔ)[解析]當(dāng)用戶訪問(wèn)網(wǎng)站的時(shí)候，會(huì)發(fā)起大量請(qǐng)求，大部分是基于HTTP的HTTP請(qǐng)求，而HTTP是無(wú)狀態(tài)的(每個(gè)請(qǐng)求都是獨(dú)立的，前后沒(méi)有聯(lián)系)，這會(huì)嚴(yán)重阻礙交互式Web的實(shí)現(xiàn)。Cookie的出現(xiàn)，可以使得在瀏覽器和服務(wù)器之間傳遞額外的數(shù)據(jù)，通過(guò)Cookie可以保持請(qǐng)求狀態(tài)，解決這個(gè)問(wèn)題，所以，選項(xiàng)C恰恰是Cookie的優(yōu)點(diǎn)。

3.

以下對(duì)Web存儲(chǔ)的描述中，錯(cuò)誤的是______A.Web存儲(chǔ)的存儲(chǔ)容量一般在2.5MB～10MB之間B.Web存儲(chǔ)分為本地存儲(chǔ)和會(huì)話存儲(chǔ)C.作為請(qǐng)求報(bào)文中的額外信息傳遞給服務(wù)器D.比較容易實(shí)現(xiàn)網(wǎng)頁(yè)或應(yīng)用的離線化正確答案：C[考點(diǎn)]數(shù)據(jù)存儲(chǔ)[解析]Web存儲(chǔ)分為本地存儲(chǔ)(localstorage)和會(huì)話存儲(chǔ)(sessionstorage)，可以簡(jiǎn)單地把它們看作改進(jìn)版的Cookie，彌補(bǔ)了Cookie的諸多不足，例如增加了HTTP首部的內(nèi)容、容易被劫持、大小被瀏覽器限制在4KB左右等。Web存儲(chǔ)與Cookie相比，不但擁有更大的存儲(chǔ)容量，還能避免將存儲(chǔ)的信息傳遞給服務(wù)器。

4.

以下瀏覽器前綴能被IE支持的是______A.-ms-B.-webkit-C.-moz-D.-o-正確答案：A[考點(diǎn)]CSS與CSS3[解析]瀏覽器擁有各自的渲染引擎，這使得瀏覽器可以實(shí)現(xiàn)自己私有的屬性。這些私有屬性不但可以試驗(yàn)還未成為標(biāo)準(zhǔn)或自創(chuàng)的屬性，還可以對(duì)新出現(xiàn)的標(biāo)準(zhǔn)屬性做試驗(yàn)性應(yīng)用。選項(xiàng)B中的-webkit-可被Chrome或Safari支持；選項(xiàng)C中的-moz-可被Firefox支持；選項(xiàng)D中的-o-可被早期版本的Opera支持。

5.

執(zhí)行下面的代碼，在IE6、IE7、IE8+和Firefox中的情況是______

div{

width:20px;

*width:15px!important;

*width:10px;

}A.Firefox和IE8+的寬度為20px；IE7的寬度為15px；IE6的寬度為10pxB.Firefox和IE8+的寬度為20px；IE7和IE6的寬度為15pxC.Firefox和IE8+的寬度為15px；IE7的寬度為15px；IE6的寬度為10pxD.Firefox和IE8+的寬度為15px；IE7和IE6的寬度為10px正確答案：A[考點(diǎn)]CSS與CSS3[解析]因?yàn)镕irefox和IE8+會(huì)忽略帶星號(hào)的屬性，所以它們的寬度為20px。IE6和IE7都能識(shí)別帶星號(hào)的屬性，但I(xiàn)E7能夠正確提升帶!important屬性的權(quán)重，所以IE7的寬度為15px。IE6在當(dāng)前的聲明塊中有一個(gè)BUG，不能正確解析!important，所以最后的寬度為10px。

6.

以下能夠控制元素的盒模型的屬性是______A.box-sizingB.box-shadowC.box-flexD.box-pack正確答案：A[考點(diǎn)]視覺(jué)格式模型[解析]CSS3中新增了一種能夠更改盒模型的屬性，叫box-sizing。這個(gè)屬性有兩個(gè)值：content-box和border-box，前者對(duì)應(yīng)W3C盒模型，后者對(duì)應(yīng)IE盒模型。選項(xiàng)B中的box-shadow屬性用于添加陰影；另外兩個(gè)選項(xiàng)中的box-flex和box-pack都是舊版本的伸縮屬性，前者用來(lái)創(chuàng)建伸縮容器，后者用于主軸對(duì)齊。

7.

以下屬性選擇器表示屬性值以“val-”開(kāi)頭的是______A.[attr^="val"]B.[attr～="val"]C.[attrl="val"]D.[attr$="val"]正確答案：C[考點(diǎn)]選擇器和層疊[解析]以上4個(gè)選項(xiàng)都是屬性選擇器，通過(guò)匹配部分屬性值來(lái)選擇元素。選項(xiàng)A中的[attr^="val"]表示屬性值以字符串“val”開(kāi)頭；選項(xiàng)B中的[attr～="val"]表示屬性值用空格分割為多個(gè)值，其中一個(gè)值與字符串“val”相同；選項(xiàng)D中的[attr$="val"]表示屬性值以字符串“val”結(jié)尾。

8.

在下列關(guān)系選擇器中，找出相鄰選擇器______A..bfc+divB..bfcdivC..bfc＞divD..bfc～div正確答案：A[考點(diǎn)]選擇器和層疊[解析]每個(gè)元素在HTML文檔中都有自己的位置，元素與元素之間存在著某種關(guān)系，例如父與子的關(guān)系、祖先與后代的關(guān)系、兄弟關(guān)系等，可以用關(guān)系選擇器來(lái)描述這種關(guān)系。選項(xiàng)A中的加號(hào)表示相鄰選擇器；選項(xiàng)B中的空格表示后代選擇器；選項(xiàng)C中的大于號(hào)表示子選擇器；選項(xiàng)D中的波浪號(hào)表示兄弟選擇器。

9.

下列無(wú)法賦給CSS中content屬性的選項(xiàng)是______A.content:123B.content:"\6211"C.content:no-open-quoteD.content:no-close-quote正確答案：A[考點(diǎn)]選擇器和層疊[解析]content屬性的值不能用數(shù)字表示，因此選項(xiàng)A中的值無(wú)法賦給content屬性。選項(xiàng)B中的“\6211”是“我”的十六進(jìn)制Unicode編碼，content屬性能解析使用十六進(jìn)制Unicode編碼的字符。其余兩個(gè)選項(xiàng)中的no-open-quote和no-close-quote可分別刪除open-quote與close-quote的引用。

10.

下面特殊性最高的選擇器是______A..bfcdivB.#bfcpC.a:hoverD.#bfc.bfc正確答案：D[考點(diǎn)]選擇器和層疊[解析]每個(gè)選擇器都有自己的特殊性，也就是權(quán)重值。在每個(gè)選擇器中，都會(huì)包含一個(gè)或多個(gè)選擇器，將這些選擇器的特殊性相加，再把這個(gè)和附加到選擇器中的各個(gè)聲明，如果有沖突，特殊性最高的勝出，也就是特殊性高的聲明覆蓋特殊性低的聲明。ID選擇器的特殊性為100；類選擇器、屬性選擇器和偽類選擇器的特殊性為10；類型選擇器和偽元素選擇器的特殊性為1；關(guān)系選擇器中的分隔符(如+、＞、～、”)和通配選擇器的特殊性為0。經(jīng)過(guò)計(jì)算后，選項(xiàng)D的特殊性最高。

二、多項(xiàng)選擇題1.

以下屬于CSS3中全新特性的是______A.選擇器B.動(dòng)畫(huà)C.伸縮盒D.陰影正確答案：BCD[考點(diǎn)]CSS與CSS3[解析]CSS3是一個(gè)規(guī)范集合，包括升級(jí)到版本3的CSS規(guī)范以及版本1的新規(guī)范，動(dòng)畫(huà)、伸縮盒以及陰影是CSS3的全新特性。而選項(xiàng)A中的選擇器原先就存在，CSS3只是完善了它，使其擁有更豐富的功能。

2.

CSS3新增的屬性有______A.column-countB.border-radiusC.box-shadowD.background-size正確答案：ABCD[考點(diǎn)]CSS與CSS3[解析]本題中，以上4個(gè)選項(xiàng)都是CSS3新增的屬性。選項(xiàng)A中的column-count屬性用于多列布局，可指定允許的最大列數(shù)；選項(xiàng)B中的border-radius屬性用于設(shè)置邊框圓角；選項(xiàng)C中的box-shadow屬性可向邊框添加一個(gè)或多個(gè)陰影；選項(xiàng)D中的background-size屬性可指定背景圖像的尺寸或把原圖像縮放到合適大小，使其適應(yīng)元素的背景區(qū)。

3.

可以作為CSS中display屬性值的有______A.list-itemB.tableC.run-inD.flex正確答案：ABCD[考點(diǎn)]視覺(jué)格式模型[解析]在CSS中用display屬性指定元素的盒類型(框類型)，以上4個(gè)選項(xiàng)都是它的值。其中選項(xiàng)A中的list-item指定元素為列表；選項(xiàng)B中的table指定元素為表格；選項(xiàng)C中的run-in根據(jù)周?chē)貋?lái)決定當(dāng)前元素的盒類型；選項(xiàng)D中的flex能讓普通元素變成一個(gè)伸縮容器。

4.

在偽元素：:before和::after中可定義content屬性，下面對(duì)該屬性的功能描述正確的是______A.將內(nèi)容指定為某個(gè)CSS屬性的值B.把內(nèi)容變?yōu)橐粭l超鏈接C.將內(nèi)容指定為某個(gè)圖像D.為內(nèi)容指定一段動(dòng)畫(huà)正確答案：AC[考點(diǎn)]選擇器和層疊[解析]在content屬性中應(yīng)用attr()函數(shù)，可將內(nèi)容指定為某個(gè)CSS屬性的值，符合選項(xiàng)A中的描述；在content屬性中應(yīng)用url()函數(shù)，能將內(nèi)容指定為某個(gè)圖像，符合選項(xiàng)C中的描述。

5.

能把p元素中的文本設(shè)置為紅色的選項(xiàng)有______A.color:redB.color:#F00C.color:rgb(0,0,255)D.color:hsl(120,100%,50%)正確答案：ABCD[考點(diǎn)]值和單位[解析]在CSS中，有3種方式設(shè)置顏色，分別是顏色名稱、RGB或HSL。選項(xiàng)A使用了合法的顏色名稱，選項(xiàng)B使用了RGB中的十六進(jìn)制標(biāo)記法，選項(xiàng)C使用了rgb()函數(shù)，選項(xiàng)D使用了hsl()函數(shù)，4個(gè)選項(xiàng)生成的顏色都是紅色。

6.

元素浮動(dòng)后的缺陷包括______A.包含塊高度塌陷B.讓內(nèi)容環(huán)繞在浮動(dòng)元素周?chē)鶦.影響兄弟元素的位置或樣式D.讓多個(gè)元素排列在一行中正確答案：AC[考點(diǎn)]CSS屬性浮動(dòng)和定位[解析]選項(xiàng)A和選項(xiàng)C是浮動(dòng)的兩大缺陷，選項(xiàng)B是浮動(dòng)的本職功能，選項(xiàng)D是浮動(dòng)的一大特點(diǎn)。

7.

可以用來(lái)清除浮動(dòng)的方法有______A.給浮動(dòng)元素的包含塊設(shè)置高度B.為浮動(dòng)元素的包含塊創(chuàng)建BFCC.在浮動(dòng)元素后面設(shè)置clear屬性為bothD.為浮動(dòng)元素設(shè)置寬度正確答案：BC[考點(diǎn)]CSS屬性浮動(dòng)和定位[解析]浮動(dòng)有許多副作用，選項(xiàng)B和C是清除浮動(dòng)的兩種方法。前者利用了BFC隔離的特點(diǎn)，后者的clear屬性會(huì)增加元素的上外邊距，使它能夠出現(xiàn)在浮動(dòng)元素的下面。

8.

在定位(position)屬性中，可以讓元素脫離正常流的關(guān)鍵字有______A.absoluteB.staticC.relativeD.fixed正確答案：AD[考點(diǎn)]CSS屬性浮動(dòng)和定位[解析]絕對(duì)定位(absolute)和固定定位(fixed)都會(huì)使元素脫離正常流，這兩個(gè)關(guān)鍵字能刪除元素所占的空間，并且讓元素相對(duì)于包含塊偏移。

9.

以下選項(xiàng)中表示CSS中通用字體系列的是______A.sans-serifB.cursiveC.fantasyD.MicrosoftYaHei正確答案：ABC[考點(diǎn)]CSS屬性文本和字體[解析]CSS定義了5種通用字體系列，分別是serif、sans-serif、monospace、cursive和fantasy。選項(xiàng)D中的MicrosoftYaHei表示微軟雅黑，是sans-serif中的一種字體。

10.

用CSS把一個(gè)寬和高都為100px的正方形變成圓形，可以實(shí)現(xiàn)此效果的選項(xiàng)有______A.border-radius:50%B.border-radius:100%C.border-radius:50pxD.border-radius:0正確答案：ABC[考點(diǎn)]CSS屬性邊框和背景[解析]在CSS3中新增了邊框圓角(border-radius)，可將邊框的4個(gè)直角設(shè)為圓角。在下圖中，可以看到元素的四個(gè)角：左上角、右上角、左下角和右下角。右上角有一個(gè)橢圓，橢圓的四分之一是實(shí)線，實(shí)線圓弧就是邊框的圓角。圓角就是用橢圓或圓與元素合成而來(lái)的，當(dāng)垂直半徑和水平半徑相同時(shí)，可以畫(huà)出圓；不同時(shí)，可以畫(huà)出橢圓。

元素的4個(gè)角

由于正方形的寬和高相同，因此只要垂直半徑和水平半徑取寬或高的一半，就能實(shí)現(xiàn)圓形。有一點(diǎn)要注意，垂直半徑最多只能取元素高度的一半，水平半徑最多只能取元素寬度的一半，選項(xiàng)B中雖然設(shè)置了100%，但最終得到的其實(shí)還是50%。

三、簡(jiǎn)答題1.

偽元素：:before和:before有什么區(qū)別?正確答案：早期的時(shí)候，偽元素和偽類都使用單冒號(hào)(:)。但最新的CSS3規(guī)定偽元素使用雙冒號(hào)(::)，偽類用單冒號(hào)，兩者區(qū)分更明顯。[考點(diǎn)]選擇器和層疊

2.

偽類:first-child與:first-of-type有什么區(qū)別?正確答案：偽類:first-child表示父元素中的第一個(gè)子元素，只要這個(gè)元素是在第一個(gè)位置，就能匹配。偽類:first-of-type表示父元素中的第一個(gè)相同類型的子元素，即具有相同的元素名。用一個(gè)例子來(lái)展示兩者之間的不同，先創(chuàng)建一個(gè)HTML文檔，代碼如下所示，在div元素中包含span元素和p元素。

＜div＞

＜span＞第一個(gè)span元素＜/span＞

＜p＞第一個(gè)p元素＜/p＞

＜p＞第二個(gè)p元素＜/p＞

＜/div＞

然后用下面的兩個(gè)選擇器來(lái)匹配元素，第一個(gè)選擇器(包含:first-child)匹配的是div元素的第一個(gè)子元素，也就是span元素，第二個(gè)選擇器(包含:first-of-type)匹配的是第一個(gè)類型為p的子元素，也就是p元素。

/*匹配第一個(gè)span元素*/

div:first-child{}

/*匹配第一個(gè)p元素*/

divp:first-of-type{}[考點(diǎn)]選擇器和層疊

3.

在移動(dòng)端，經(jīng)常會(huì)做整屏的專題頁(yè)面。如何設(shè)置元素的高度，使得頁(yè)面的背景能鋪滿整個(gè)屏幕?正確答案：為了能讓背景鋪滿整個(gè)屏幕，可以把根元素(html)的高度設(shè)為100%(代碼如下所示)，然后在該元素中設(shè)置背景。

html{

height:100%;

}

根元素的百分比高度之所以有效，是因?yàn)楦氐陌瑝K是由視口提供的初始包含塊(initialcontainingblock)，初始包含塊的高度就是視口高度。[考點(diǎn)]值和單位

4.

鏈接有4種狀態(tài)，包括未訪問(wèn)(:link)、已訪問(wèn)(:visited)、激活(:active)和懸停(:hover)，聲明的順序是怎么樣的?正確答案：推薦使用LVHA的順序，通常這4個(gè)狀態(tài)會(huì)使用同一個(gè)源聲明，也不會(huì)單獨(dú)給某個(gè)狀態(tài)標(biāo)記重要性，4個(gè)狀態(tài)的特殊性也相同(代碼如下所示)，因此影響權(quán)重的只有在樣式表中所處的位置了。

a:link{

color:blue;