前端程序員面試分類真題6一、單項選擇題1.

下面可以被子元素繼承的CSS屬性是______A.borderB.marginC.colorD.width正確答案：C[考點]選擇器和層疊[（江南博哥）解析]與元素外觀相關的屬性(如字體、顏色、對齊方式等)能被繼承，與布局相關的屬性(如邊框、外邊距、內邊距、尺寸等)就不能被繼承。除了選項C之外，其余3個選項都是布局屬性。

2.

以下與角度相關的單位是______A.pcB.exC.chD.turn正確答案：D[考點]選擇器和層疊[解析]與角度相關的單位有4種，如下表所列。選項D中的turn表示轉數，1turn相當于360deg；選項A中的派卡(pc)是印刷行業常用的絕對長度單位；而另外兩個選項中的ex和ch都是相對長度單位，ex通常表示字體的一半高，ch相當于數字0的寬度。角度單位單位名稱說明deg度一個圓有360deggrad百分度常用于建筑或土木工程的角度測量，一個圓有400gradrad弧度一個圓大約有6.28rad，與度的換算公式為1rad=π/180degturn轉數轉一圈是1turn，1turn相當于360deg

3.

在下面的選項中，表示Web安全色的是______A.#BF4519B.#FF6600C.#CF6D78D.#90ED34正確答案：B[考點]值和單位[解析]Web安全色是指在各種平臺下顯示效果與預期一致。如果不是安全色，操作系統可能在處理顏色的時候產生抖動(抖動就是混合幾種顏色，模擬出系統沒有的顏色)，這樣形成的顏色在不同平臺中會有色差，例如在Mac中顯示為深綠，而在Thinkpad中卻顯示為淡綠。當用十六進制標記法表示Web安全色時，需要用00、33、66、99、CC或FF組合的值。在這6個數中選3個，正好有216種(即6的三次方)組合方式，并且所有的安全色都可用簡寫。根據以上規則可知，只有選項B中的#FF6600是安全色，它還能簡寫為#F60。

4.

執行下面的代碼后，span元素的寬度是______

span{

position:absolute;

top:10px;

left:20px;

width:100px;

height:50px;

padding:10px;

}A.120pxB.100pxC.60pxD.由內容決定正確答案：A[考點]CSS屬性浮動和定位[解析]絕對定位(absolute)會使元素脫離正常流，并且會將元素變為塊級元素。由于塊級元素默認都是W3C盒模型，因此如果元素有內邊距(padding)或邊框(border)，那么在計算寬度時還要包含這兩個屬性值，由此得出span元素的寬度是120px。

5.

假設有一個寬和高都是100px的div元素，它有兩個子元素section，寬和高都是50px。第一個設為絕對定位，第二個設為固定定位，代碼如下所示。當兩個元素都偏移到了父元素的外面，并且父元素設置了溢出內容會被裁剪時，第一個section元素會______，第二個section元素會______

＜style＞

.container{

position:relative;

overflow:hidden;

}

.absolute{

position:absolute;

left:120px;

top:10px;

}

.fixed{

position:fixed;

left:10px;

top:120px;

}

＜/style＞

＜divclass="container"＞

＜sectionclass="absolute"＞absolute＜/section＞

＜sectionclass="fixed"＞fixed＜/section＞

＜/div＞A.裁剪顯示B.裁剪裁剪C.顯示顯示D.顯示裁剪正確答案：A[考點]CSS屬性浮動和定位[解析]為父元素設置溢出內容裁剪后，固定定位的元素仍然會顯示，但換成絕對定位，就會被裁剪。第一個section元素被設為絕對定位，第二個section元素被設為固定定位，因此，選項A正確。

6.

假設4個section元素處于相同的層疊上下文中，并且都被設為絕對定位，然后分別給4個section元素定義z-index屬性，代碼如下所示。疊放在最上面的背景色是______

.zindex1{

background:blue;

z-index:auto;

}

.zindex2{

background:red;

z-index:-1;

}

.zindex3{

background:black;

z-index:0;

}

.zindex4{

background:yellow;

z-index:1;

}A.blueB.redC.blackD.yellow正確答案：D[考點]CSS屬性浮動和定位[解析]CSS屬性z-index用于改變元素的層疊順序，屬性值是一個無單位的數字(包括正數和負數)或auto(auto相當于0)。當元素處在相同的層疊上下文中時，z-index屬性的值越大越不容易被覆蓋。由于選項D中的數字最大，所以疊放在最上面的背景色是yellow，正確答案是D。

7.

能讓元素中的文本強制換行的是______A.overflow:scrollB.word-break:break-allC.text-overflow:ellipsisD.word-wrap:normal正確答案：B[考點]CSS屬性文本和字體[解析]選項A會在內容溢出時，在容器中顯示滾動條。選項C會把溢出內容替換為省略號。如果把選項D中的word-wrap屬性設為break-word，那么也能實現文本強制換行。

8.

要在文本下面添加一條紅色的波浪線，需要為元素設置______A.text-decoration:underlinewavyredB.text-decoration:overlineC.text-decoration-style:wavyD.text-decoration-color:red正確答案：A[考點]CSS屬性文本和字體[解析]CSS3將文本裝飾(text-decoration)拆分為3個屬性，分別為文本裝飾的類型(text-decoration—line)、形狀(text-decoration-style)和顏色(text-decoration-color)。根據題目的要求，需要設置這3個屬性，只有選項A滿足條件。

9.

使用CSS屬性white-space的______關鍵字可以保留HTML文檔中的空格、換行和Tab制表符A.normalB.preC.nowrapD.pre-line正確答案：B[考點]CSS屬性文本和字體[解析]white-space屬性與其他屬性不同，不會影響元素的樣式，它影響的是HTML文檔中的空格、換行和Tab制表符。white-space屬性總共有5個關鍵字可供選擇，只有選項B中的pre才會保留HTML文檔中的空格、換行和Tab制表符，下表羅列了另外4個關鍵字的行為。white-space屬性的關鍵字關鍵字空白符制表符換行符normal合并合并忽略nowrap合并合并忽略pre-wrap保留保留保留pre-line合并合并保留

10.

CSS屬性vertical-align的默認值是______A.superB.topC.baselineD.text-bottom正確答案：C[考點]CSS屬性文本和字體[解析]CSS屬性vertica-align用于行內元素和單元格元素的垂直對齊，選項C中的baseline是它的默認值，可將元素的基線與父元素的基線對齊。

11.

能夠縮放背景圖像的CSS屬性是______A.background-clipB.background-attachmentC.background-positionD.background-size正確答案：D[考點]CSS屬性邊框和背景[解析]選項A中的background-clip屬性用于定義裁剪背景區。選項B中的background-attachment屬性可指定背景圖像附著內容的方式。選項C中的background-position屬性能指定背景圖像的位置。選項D中的background-size屬性是CSS3新增的屬性，可指定背景圖像的尺寸或把原圖像縮放到合適大小，適應元素的背景區。

12.

把CSS3新增的background-size屬性設為下面的______，能在保持原圖像寬高比的前提下，縮放到能放進背景區的尺寸A.autoB.containC.coverD.100%100%正確答案：B[考點]CSS屬性邊框和背景[解析]選項A中的auto會將背景圖像保持為原始尺寸；選項C中的cover能完全覆蓋住背景區，但不會保持原圖像的寬高比；選項D中的兩個100%分別表示背景圖像的寬和高，相當于使用cover關鍵字。

13.

把CSS屬性background-attachment設為下面的______，能把背景圖像附著到內容上，使得圖像會隨著內容一起滾動A.localB.scrollC.fixedD.auto正確答案：A[考點]CSS屬性邊框和背景[解析]如果使用選項B中的scroll，那么背景圖像不會隨著內容一起滾動。如果使用選項C中的fixed，那么背景圖像會附著到視口上，圖像也不會隨著內容一起滾動。選項D中的auto是一個無效值。

14.

以下選項能實現無數次循環的動畫是______A.animation:drift2sinfinitebothB.animation:color1s5ssteps(3)C.animation:drift2s0bothD.animation:color0salternate正確答案：A[考點]CSS3屬性變形、過度和動畫[解析]動畫(animation)有8個子屬性(如下表所列)，只有當animation-iteration-count屬性被定義為infinite時，動畫才可以被循環無限次。4個選項只有選項A包含infinite關鍵字，因此選擇該選項。動畫的子屬性屬性描述animation-name動畫名稱，名稱不能定義為其他子屬性的關鍵字animation-duration動畫的持續時間animation-delay動畫的延遲時間animation-timing-function緩動函數，下面會詳細介紹一下steps()函數animation-iteration-count循環次數，可以用數字表示，也可以用關鍵字表示animation-direction播放方向animation-play-state動畫的狀態，運行(running)或暫停(paused)animation-fill-mode動畫開始之前或結束之后的狀態

15.

transform屬性的值是一個變形函數，下面選項表示傾斜函數的是______A.translate()B.scale()C.skew()D.rotate()正確答案：C[考點]CSS3屬性變形、過度和動畫[解析]選項A中的translate()是一個位移函數；選項B中的scale()是一個縮放函數；選項D中的rotate()是一個旋轉函數。

二、多項選擇題1.

下面關于border:none以及border:0的描述中，錯誤的是______A.當border為none的時候，邊框無外觀B.當border為0的時候，邊框寬度為0C.當border為none的時候，邊框寬度為0D.只要定義了邊框寬度，就能顯示邊框正確答案：CD[考點]CSS屬性邊框和背景[解析]當border為none的時候，寬度和顏色會被覆蓋，寬度變為默認值medium，顏色變為默認的前景色(元素的CSS屬性color的值)，代碼如下所示。本題的選項C中，邊框寬度為0，顯然不符合事實。

div{

border:none;

/*等效于*/

border-width:medium;

border-style:none;

border-color:前景色;

}

當border為0的時候，外觀和顏色會被覆蓋，外觀變為默認值none，顏色同樣變為默認的前景色，代碼如下所示。在選項D中，因為只定義了寬度值，默認的外觀是none，所以不會顯示邊框。

div{

border:0;

/*等效于*/

border-width:0;

border-style:none;

border-color:前景色;

}

2.

過渡(transition)的子屬性包括______A.transition-propertyB.transition-durationC.transition-delayD.transition-timing-function正確答案：ABCD[考點]CSS3屬性變形、過度和動畫[解析]過渡是為了讓元素從一個狀態到另一個狀態的時候能更連貫、更平滑、更細膩，給用戶減少一觸即發的感覺。以上4個選項都是它的子屬性。選項A中的transition-property用于設置參與過渡的屬性名；選項B中的transition-duration表示過渡持續時間；選項C中的transition-delay表示過渡開始之前的延遲時間；選項D中的transition-timing-function用于設置緩動函數。

3.

在下面的選項中，表示媒體查詢中的媒體特性的有______A.max-widthB.aspect-ratioC.device-pixel-ratioD.device-width正確答案：ABCD[考點]CSS3屬性媒體查詢[解析]有些媒體特性能和前綴min(最小)或max(最大)組合，拼接成一個新的媒體特性，選項A中的max-width就是這類媒體特性。選項B中的aspect-ratio表示視口寬度和高度的比值。選項C中的device-pixel-ratio表示設備像素比。選項D中的device-width表示設備寬度。

4.

在一條媒體查詢中，有可能包含一些操作符，在下面選項中，合法的操作符是______A.orB.andC.notD.all正確答案：BC[考點]CSS3屬性媒體查詢[解析]選項A和選項D是無效的操作符。選項B中的and操作符用來連接媒體類型和媒體特性表達式，將它們組合成一條媒體查詢。選項C中的not操作符用來否定整條媒體查詢，但要注意，不能否定查詢中的某個部分。

5.

以下選項中，屬于CSS預處理器Sass語法的是______A.混合B.繼承C.閉包D.函數正確答案：ABD[考點]預處理器和框架[解析]Sass中的混合(mixin)用于提取通用的聲明塊(即樣式)或CSS規則。函數(function)與混合最大的區別是需要有返回值，這個值可以是任何類型的數據，但不能是聲明塊或CSS規則。Sass允許一個選擇器能夠繼承另一個選擇器中的聲明塊。

三、簡答題1.

在CSS中使用background:transparent與opacity:0有什么區別?正確答案：transparent關鍵字相當于rgba(0,0,0,0)，作為background的屬性值，它僅僅是將元素的背景設為透明，而元素中的內容還能顯示。opacity會把元素和內容當成一個整體，當定義為0時，兩者都會透明。[考點]值和單位

2.

請說說你對元素浮動(float)的理解。正確答案：浮動(float)最初僅僅是為了讓內容環繞在浮動元素周圍，后來利用它的特點逐漸將其用于布局。浮動元素讓布局多樣化，但它會脫離正常流，造成一些副作用(如高度塌陷)，如果不加以解決，那么會直接影響整體布局。浮動有3個關鍵字可以選擇，left為向左浮動，right為向右浮動，none為不浮動。[考點]CSS屬性浮動和定位

3.

執行下面的代碼，效果如下圖所示，雖然給p元素定義了15px的上外邊距，但為何失效了?

＜style＞

div{

float:left;

width;80px;

height:80px;

background:#FFCC00;

}

p{

clear:both;

margin-top:15px;

}

＜/style＞

＜section＞

＜div＞＜/div＞

＜p＞已設置上外邊距＜/p＞

＜/section＞

上外邊距失效正確答案：浮動元素會脫離正常流，clear屬性會讓元素增加上外邊距，使其在浮動元素的下面。在上面的代碼中，浮動元素的高是80px，所以clear屬性會給p元素增加80px的上外邊距，比定義的15px要大，因此最終的