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

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

下面關(guān)于Bootstrap的描述中，錯誤的是______A.Bootstrap是一種前端類庫B.Bootstrap給元素配置了合適的ARIA屬性C.Boo（江南博哥）tstrap提供了柵格系統(tǒng)D.Bootstrap實現(xiàn)了響應(yīng)式布局正確答案：A[考點]預(yù)處理器和框架[解析]Bootstrap是目前比較流行的前端框架，它不是類庫，它由Twitter公司設(shè)計，在2011年8月開源。除了選項A之外，其余3個選項對Bootstrap的描述都正確。

2.

Bootstrap中的類前綴.col-xs-適用的屏幕是______A.超小屏幕(＜768px)B.小屏幕(≥768px)C.中等屏幕(≥992px)D.大屏幕(≥1200px)正確答案：A[考點]預(yù)處理器和框架[解析]小屏幕使用的類前綴是.col-sm-；中等屏幕使用的類前綴是.col-md-；大屏幕使用的類前綴是.col-lg-。

3.

在下面的CSS類中，能變成Bootstrap提供的默認輸入框樣式的是______A..form-horizontalB..form-controlC..form-groupD..form-inline正確答案：B[考點]預(yù)處理器和框架[解析]除了選項B之外，其他3個選項中的CSS類都用于控制表單的排列。選項A中的.form-horizontal表示水平排列；選項C中的.form-group表示垂直排列；選項D中的.form-inline表示內(nèi)聯(lián)排列。

4.

在多列布局中，可讓元素跨列的屬性是______A.column-countB.column-gapC.column-ruleD.column-span正確答案：D[考點]布局[解析]多列布局是CSS3新增的功能，這里的多列主要針對的是文本。以上4個選項都是多列布局的屬性。其中選項A中的column-count可指定允許的最大列數(shù)；選項B中的column-gap可指定列與列之間的間隔；選項C中的column-rule可指定列的邊框。

5.

在下面的屬性中，能讓伸縮容器中的子元素沿主軸對齊的是______A.align-itemsB.align-selfC.align-contentD.justify-content正確答案：D[考點]布局[解析]選項A、選項B和選項C中的屬性都用于側(cè)軸對齊。align-items屬性控制容器中所有子元素的對齊方式；align-self屬性只能控制一個子元素的對齊方式；align-content屬性只有在多行的時候才會有效果。

二、填空題1.

執(zhí)行下面的代碼后，p元素的字體顏色是______。

＜metahttp-equiv="Default-Style"content=="red"/＞

＜styletitle="red"＞

p{

color:red;

}

＜/style＞

＜styletitle="blue"＞

p{

color:blue;

}

＜/style＞正確答案：red[考點]HTML元素元數(shù)據(jù)[解析]在上面的代碼中，為兩段內(nèi)嵌樣式定義了title屬性(即為該樣式表命名)，可用于設(shè)置首選樣式表。由于在meta元素中把名為red的樣式表設(shè)為了首選樣式表，因此p元素中的文本將會顯示為紅色。

2.

table元素的colspan屬性可用于______，rowspan屬性可用于______。正確答案：合并列、合并行[考點]HTML元素表單和表格[解析]table元素有兩個特殊的屬性：colspan和rowspan。colspan屬性可合并列，rowspan屬性可合并行，通過這兩個屬性可制作出不規(guī)則的表格。

3.

下面的div元素，在W3C盒模型中的寬度是______px，在IE盒模型中的寬度是______px。

div{

padding:10px;

margin:10px;

border:1pxsolid#000;

width:100px;

}正確答案：122、100[考點]視覺格式模型[解析]IE盒模型中內(nèi)容的寬或高將會包含內(nèi)邊距和邊框，題目中div元素的寬度為100px，那么IE盒模型中的寬度也是100px。而W3C盒模型中內(nèi)容的寬或高并不會包含內(nèi)邊距和邊框，如果要獲取W3C盒模型的寬度，那么需要把內(nèi)容的寬度、內(nèi)邊距以及邊框相加，在此題中得到的結(jié)果是122px。

4.

兩個相鄰的兄弟元素，分別定義下外邊距和上外邊距，如以下代碼所示，此時兩個元素之間的間隔是______px。

＜divstyle="margin-bottom:20px"＞兄弟元素＜/div＞

＜divstyle="margin-top:10px"＞兄弟元素＜/div＞正確答案：20[考點]視覺格式模型[解析]由于兩個元素之間發(fā)生了外邊距塌陷，所以此時下外邊距和上外邊距會合并在一起。并且因為兩個屬性設(shè)置的都是正數(shù)，所以兩個元素之間的間隔就是其中的較大值。

5.

執(zhí)行下面的代碼后，ul元素的高度是______px。

＜style＞

li{

width:100px;

height:100px;

}

＜/style＞

＜ulstyle="overflow:hidden"＞

＜listyle="float:left"＞＜/li＞

＜/ul＞正確答案：100[考點]視覺格式模型[解析]雖然ul元素包含一個浮動的子元素，但因為創(chuàng)建了BFC，所以不會引起ul元素的高度塌陷，它的高度就是li元素的高度。

6.

執(zhí)行下面的代碼后，第一個div元素和p元素之間的間距是______px。

＜style＞

.section{

width:100px;

height:100px;

background:#FFCC00;

}

＜/style＞

＜divclass="section"＞＜/div＞

＜divstyle="margin-top:10px;overflow:hidden"＞

＜pstyle="margin-top:10px"class="section"＞＜/p＞

＜/div＞正確答案：20[考點]視覺格式模型[解析]第二個div元素在創(chuàng)建BFC后，就能避免外邊距塌陷，阻止div元素和p元素的上外邊距合并在一起。此時第一個div元素和p元素之間的間距就是20px。

7.

執(zhí)行下面的代碼，p元素最終的字體顏色是______

p{

color:red!important;

color:blue;正確答案：red[考點]選擇器和層疊[解析]將樣式標記為重要(在聲明的分號之前插入“!important”)，就能立刻提升權(quán)重，改變層疊次序。如果重要聲明和非重要聲明發(fā)生沖突，那么勝出的永遠是重要聲明。

8.

執(zhí)行下面的代碼，p元素最終的字體顏色是______。

＜style＞

.bfcp{

color:#FCO;

}

.ovhp{

color:#F60;

}

＜/style＞

＜divclass="bfcovh"＞

＜p＞文字顏色＜/p＞

＜/div＞正確答案：#F60[考點]選擇器和層疊[解析]當重要性和特殊性都相同的時候，選擇器在樣式表中所處的位置決定權(quán)重，越是在后面，權(quán)重越高。在上面的代碼中，兩組選擇器的特殊性相同，但由于.ovh排在.bfc后面，.bfc中的聲明將會被覆蓋。

9.

假設(shè)視口的寬是70px，高為50px，執(zhí)行下面的代碼后，div元素的寬為______px，高為______px。

＜style＞

section{

margin:6px;

}

sectiondiv{

width:50vw;

height:50vh;

}

＜/style＞

＜section＞

＜div＞＜/div＞

＜/section＞正確答案：35、25[考點]值和單位[解析]50vw等于視口寬度的50%，50vh等于視口高度的50%。雖然section元素有6px的外邊距，但不會影響子元素div寬和高的計算，它們的計算結(jié)果分別為35px和25px。

10.

假設(shè)視口的寬是50px，高為70px，執(zhí)行下面的代碼后，div元素的寬為______px，高為______px。

div{

width:10vmax;

height:10vmin;

}正確答案：7、5[考點]值和單位[解析]如果將視口的寬和高均分為100份，那么vmax會取較大的百分之一，而vmin會取較小的百分之一。

11.

執(zhí)行下面的代碼后，p元素的字體大小為______。

＜style＞

section{

font-size:32px;

}

section＞div{

font-size:50%;

}

＜/style＞

＜section＞

＜div＞

＜p＞文字說明＜/p＞

＜/div＞

＜/section＞正確答案：16px[考點]值和單位[解析]div元素的字體大小是一個百分數(shù)，它會和繼承而來的字體大小相乘得到真實的字體大小，計算后的結(jié)果為16px。由于p元素會繼承div元素的字體大小，因此它的字體大小也是16px。

12.

執(zhí)行下面的代碼后，p元素的left屬性值為______px，top屬性值為______px。

＜style＞

div{

width:200px;

height:100px;

position:relative;

}

divp{

position:absolute;

left:50%;

top:50%;

}

＜/style＞

＜div＞

＜p＞＜/p＞

＜/div＞正確答案：100、50[考點]值和單位[解析]定位(position)用于將元素擺放在某個位置，參照的是元素的包含塊。四個偏移屬性分為兩組，left和right參照的是包含塊的寬度，bottom和top參照的是包含塊的高度。如果元素的position屬性為absolute，那么它的包含塊就是離它最近的position不為static的祖先元素的內(nèi)容區(qū)域。根據(jù)剛剛的規(guī)則能夠得知，p元素的包含塊是div元素的內(nèi)容區(qū)域，因此p元素的偏移值會參照div元素的寬高來計算。

13.

執(zhí)行下面的代碼，p元素經(jīng)過計算后的margin為______px，padding為______px。

div{

width:200px;

height:100px;

}

div＞p{

margin:10%;

padding:10%;

}正確答案：20、20[考點]值和單位[解析]外邊距(margin)和內(nèi)邊距(padding)參照的都是包含塊的寬度，注意，上下邊距并沒有參照包含塊的高度。在上面的代碼中，div元素是p元素的包含塊，p元素的margin和padding屬性都會參照div元素的寬度計算。經(jīng)過計算后，p元素的margin和padding屬性值都是20px。

14.

執(zhí)行下面的代碼，div元素經(jīng)過計算后，水平位移______px，垂直位移______px。

div{

width:200px;

height:100px;

padding:10px;

transform:translate(50%,50%);

}正確答案：110、60[考點]值和單位[解析]位移(translate)是CSS3新增的功能，元素可進行水平或垂直位移，水平方向參照的是元素的寬度，垂直方向參照的是元素的高度。HTML元素默認都是W3C盒模型，因此如果元素有內(nèi)邊距(padding)或邊框(border)，那么在計算時還要包含這兩個屬性值。上面代碼中的兩個百分數(shù)參照的兩個值分別為220px和120px，經(jīng)過計算后的位移值分別是100px和60px。

15.

執(zhí)行下面的代碼，經(jīng)過計算后，p元素的真實行高為______px。

div{

font-size:18px;

line-height:14px;

}

divp{

line-height:50%;

}正確答案：9[考點]值和單位[解析]行高(line-height)參照的是元素自身的字體大小(font-size)，p元素自身沒有定義字體，需要從父元素div中繼承，繼承過來的值為18px，再與50%相乘后，可以得到p元素的最終行高，這個值就是9px。

三、簡答題1.

用CSS中的定位實現(xiàn)元素的水平居中。正確答案：要水平居中的元素通常會被定義為絕對定位或固定定位，如果是絕對定位，那么容器將被定義為相對定位，作為元素的包含塊；如果是固定定位，那么元素相對視口(此時視口為包含塊)居中。由于使用這兩種定位后，元素會脫離正常流，所以容器需要固定高度，避免高度塌陷導(dǎo)致后面的元素擠上來。這種方法通常要先將定位元素從包含塊的左邊界向右偏移50%的距離(也就是容器一半寬度的距離，代碼如下所示)，再反向偏移元素一半寬度的距離，最后實現(xiàn)居中。

＜divstyle="position:relative;height:100px"＞

＜sectionstyle="position:absolute;left:50%"＞＜/section＞

＜/div＞

按下來用兩種方式實現(xiàn)效果，分別是外邊距和位移。

如果定位元素的寬度已定義，那么可以用負外邊距來實現(xiàn)反向偏移，例如寬度是40px，左外邊距設(shè)為負的二分之一寬度(也就是-20px)，如下所示。

section{

width:40px;

margin-left:-20px;

}

如果定位元素的寬度未知，那么就不能用外邊距，而是用CSS3新增的位移，在水平方向反向位移50%(代碼如下所示)，水平位移中的百分數(shù)參照的是自身寬度，所以50%就是元素寬度的一半。

section{

transform:translateX(-50%);

}[考點]布局

2.

用CSS中的表格盒類型(即把display屬性設(shè)為表格相關(guān)的盒類型)實現(xiàn)元素的垂直居中。正確答案：用CSS模擬的表格除了包含表格元素的普通規(guī)則之外，還擁有特殊規(guī)則。它能夠以匿名方式創(chuàng)建缺少的表格元素，例如單元格本來必須在表格行(tr)之內(nèi)，而在模擬的表格中，將元素調(diào)整為單元格(使用盒類型table-cell)后，不用把父元素變?yōu)楸砀裥?使用盒類型table-row)，瀏覽器會自動創(chuàng)建出表格行，如下所示。

＜divstyle="display:table"＞

＜pstyle="display:table-cell;vertical-align:middle"＞垂直居中＜/p＞

＜/div＞[考點]布局

3.

用伸縮盒實現(xiàn)子元素的水平和垂直居中。正確答案：當普通容器被調(diào)整為伸縮容器后，如果要讓里面的子元素水平居中，那么就相當于主軸的居中對齊，代碼如下所示。

＜divstyle="display:flex;justify-content:center"＞

＜section＞＜/section＞

＜/div＞

在伸縮容器中，子元素垂直居中，相當于側(cè)軸的居中對齊，如下所示。

＜divstyle="display:flex;align-items:center"＞

＜section＞＜/section＞

＜/div＞[考點]布局

4.

如何讓一個浮動中的元素水平居中?正確答案：浮動元素通常會在水平方向上往左或往右移動，如果要居中，首先需要往反方向偏移一定距離。元素的偏移可以用相對定位和偏移屬性實現(xiàn)，代碼如下所示。如果容器和浮動元素的寬度都已定義，那么偏移距