這是網(wǎng)易微專業(yè)之《前端工程師》CSS單元測(cè)試題蔬将，我做了兩次斋扰，第一次在沒(méi)上課之前做的渡八，全靠邊寫(xiě)邊測(cè)試啃洋，錯(cuò)了五六題吧，這次學(xué)完課后呀狼，沒(méi)有動(dòng)用瀏覽器測(cè)試萨蚕，全部都是根據(jù)掌握的知識(shí)點(diǎn)推到的粹胯。

(一)

已知這樣一段HTML：

<div class="a"><div class="b"></div></div>

如果應(yīng)用了這樣一段CSS：

.a{ width:100px; padding:10px; box-sizing:border-box; }
.b{ width:100%; height:10px; background-color:red; }

那么紅色區(qū)域的寬度為

A.110px ;B.120px;C.100px;D.80px

解：這題考的是盒模型的怪異模式缅糟，也就是當(dāng)盒模型定義的box-sizing:border-box;的時(shí)候估脆，.a的width=內(nèi)容寬度+padding+border较幌。所以.a的真正內(nèi)容區(qū)的寬度是80px废累，所以子元素.b:width:100%,就是父元素內(nèi)容區(qū)的寬度十气，是80px丧蘸。所以選D窟勃。

（二）

（單選）以下哪個(gè)box-shadow能模擬出border:1px solid #000; 的效果

• A.box-shadow:1px 1px 1px #000;

• B.box-shadow:0 0 0 1px #000;

• C.box-shadow:1px 1px #000;

• D.box-shadow:0 0 1px #000;

解：box-shadow的語(yǔ)法是

box-shadow: h-shadow v-shadow blur spread color inset; 

所以答案就是B了磷仰。

（三）

（單選）如果設(shè)置margin:1px 2px 3px 4px;抡爹，那么這四個(gè)值依次代表的是

• A.margin-top、margin-right芒划、margin-bottom冬竟、margin-left

• B.margin-top、margin-bottom民逼、margin-left泵殴、margin-right

• C.margin-left、margin-right拼苍、margin-top笑诅、margin-bottom

• D.margin-left调缨、margin-top、margin-right吆你、margin-bottom

解：margin的四個(gè)寫(xiě)法的意思分別是

（1）margin:10px弦叶；///意思是所有的外邊距（上下左右）都是10px。
（2）margin:10px 50px妇多；//意思是上下外邊距是 10px伤哺，左右外邊距是 50px。
（3）margin:10px 50px 20px者祖；//上外邊距是 10px立莉，而左右外邊距是 50px，下外邊距是 20px七问。
（4）margin:10px 50px 20px 30px蜓耻；//上外邊距是10px，右外邊距是50 px械巡，下外邊距是 20px刹淌，左外邊距是 30px〖ズ模可以用順時(shí)針的順序來(lái)記芦鳍。

所以答案就是A。

（四）

（單選）已知這樣一段HTML：

<div class="a"></div>

如果應(yīng)用了這樣一段CSS：

.a{ width:100px; height:100px; padding:10px; background-color:red; }

那么紅色區(qū)域的大小為

• A.寬：90px葛账，高：90px

• B.寬：80px柠衅，高：80px

• C.寬：100px，高：100px

• D.寬：120px籍琳，高：120px

解：這題考的是background-color的繪制區(qū)域菲宴。background有個(gè)繪制區(qū)域設(shè)置的屬性叫做background-clip：規(guī)定背景的繪制區(qū)域。它的語(yǔ)法是這樣的：

background-clip:border-box|padding-box|content-box;

background-clip的默認(rèn)值是border-box趋急，意思是背景繪制在border的外邊距內(nèi)喝峦，什么是border的外邊距呢，border是有寬度的呜达，內(nèi)邊距和padding接壤谣蠢，外邊距和margin接壤，所以默認(rèn)的意思是繪制區(qū)域包括border+padding+內(nèi)容部分查近，padding-box就是背景繪制在padding內(nèi)眉踱，包括padding，也就是在border的內(nèi)邊距以內(nèi)的區(qū)域霜威，而content-box就是背景繪制在內(nèi)容區(qū)內(nèi)谈喳。IE6、IE7戈泼、IE8不支持這個(gè)屬性婿禽。

所以這個(gè)答案就是D赏僧。

（五）

（單選）已知這樣一段HTML：

<div class="parent">
<p>a</p>
<p>b</p>
<p>c</p>
</div>

如果應(yīng)用了這樣一段CSS：

.parent{ width:90px;}
.parent p{ float:right; width:30px; }

那么看到的字母從左往右依次是

• A.acb

• B.cba

• C.cab

• D.bac
  解：這一題是考float的特點(diǎn)。float有下面這些特點(diǎn)扭倾。

float的特點(diǎn)

所以如果給abc三個(gè)都設(shè)置浮動(dòng)淀零，a先偏移到最右邊，然后b偏移到和a重疊的位置膛壹，c也偏移到和a重疊的位置驾中，但是實(shí)際上卻不會(huì)這樣，因?yàn)閒loat元素之間雖然脫離了文檔流恢筝，但是在浮動(dòng)元素之間也存在文檔流哀卫，所以b偏移到緊挨著a就停止了巨坊，c偏移到緊挨著b就停止了撬槽，所以他們的順序就是cba，就選B趾撵。

（六）

（多選）以下和padding:2px 3px 2px 3px;等價(jià)的有

• A.padding:3px 2px 3px;

• B.padding:2px 3px 2px;

• C.padding:2px 3px;

• D.padding:3px 2px;

解：這題可以參考第三題侄柔，答案是B、C占调。

（七）

（多選）已知HTML如下：

<div class="a"><div class="b"></div></div>

已有CSS如下：

.a{ width:200px; }
.b{ width:100px; }

請(qǐng)問(wèn)暂题，再增加以下哪些CSS可以使得這個(gè)子元素(.b)在它的父元素里水平居中

• A..b{ margin:0 auto; }

• B..a{ text-align:center; }

• C..b{ float:center; }

• D..a{ text-align:center; } .b{ display:inline-block; }

解：這題考的是常規(guī)的兩種水平居中的使用區(qū)別。text-align:center 是用來(lái)設(shè)置文本或img標(biāo)簽等一些內(nèi)聯(lián)對(duì)象（或與之類似的元素）的居中究珊。margin:0 auto 設(shè)置塊元素（或與之類似的元素）的居中薪者。

我們來(lái)舉個(gè)栗子說(shuō)明，這其中的區(qū)別剿涮。比如我們?cè)O(shè)置一個(gè)段落P言津，在段落內(nèi)存在一個(gè)圖片img標(biāo)簽。

當(dāng)設(shè)置body{text-align:center;}取试。 在IE中悬槽，段落P，圖片img同時(shí)實(shí)現(xiàn)了居中對(duì)齊瞬浓，也就是說(shuō)text-align:center;同時(shí)作用于元素p與元素img初婆。 在FF中，段落P猿棉，沒(méi)有能實(shí)現(xiàn)居中對(duì)齊磅叛，而圖片img實(shí)現(xiàn)了居中對(duì)齊，也就是說(shuō)text-align:center;作用于img標(biāo)簽萨赁，而段落p標(biāo)簽沒(méi)有起到居中的作用宪躯。

當(dāng)設(shè)置段落 p {margin:0 auto;}。 在IE與FF中位迂，段落P均實(shí)現(xiàn)了居中對(duì)齊访雪。圖片img由于不是作用對(duì)象详瑞，所以不會(huì)居中對(duì)齊。

有三種情況需要說(shuō)明： 1.margin:0 auto;的選擇器是作用對(duì)象臣缀，如div坝橡，p，而不是body精置，不是父元素或者祖先元素计寇。如果設(shè)置：body { margin:0 auto; }將不會(huì)達(dá)到任何效果，除非你定義body的寬度脂倦，那將會(huì)讓body內(nèi)的元素產(chǎn)生位置變化番宁。如我們?cè)O(shè)置body寬度為500px。對(duì)p段落不作任何設(shè)置赖阻， 我們最大化窗口將會(huì)看到段落并非處于窗口的最左上角蝶押。

2.設(shè)置段落 p {text-align:center;} 將要實(shí)現(xiàn)的并不是段落本身的對(duì)齊方式，而是段落內(nèi)元素居中對(duì)齊火欧。3. 設(shè)置圖片標(biāo)簽img {margin:0 auto;} 棋电，就犯了一個(gè)小錯(cuò)誤，img類于內(nèi)聯(lián)對(duì)象苇侵，不可以設(shè)置圖片img標(biāo)簽的margin屬性赶盔，如果一定要設(shè)置，那么先將它的屬性轉(zhuǎn)變?yōu)閴K元素榆浓，如下面的代 碼：img {display:block; margin:0 auto;}

所以這題的答案是AD于未。

關(guān)于居中的問(wèn)題，可以看看這篇匯總的方法《CSS制作水平垂直居中對(duì)齊》

（八）

（多選）position屬性可以有以下哪些值

• A.absolute

• B.auto

• C.normal

• D.static

解：position 屬性規(guī)定元素的定位類型陡鹃。

所以答案是AD坦喘，關(guān)于position的這些值具體的特征盲再，可以看看我這篇文章網(wǎng)易微專業(yè)之《前端工程師》學(xué)習(xí)筆記（5）-布局屬性

（九）

（多選）display屬性可以有以下哪些值

• A.visible

• B.block

• C.inline

• D.inline-block

解：display的值有哪些西设？

其中display最主要的三個(gè)值，必須要記住會(huì)用的有block梦碗、inline禽绪、inline-block。所以答案就是BCD洪规。

（十）

（多選）font-weight屬性可以有以下哪些值

• A.normal

• B.auto

• C.700

• D.bold

解：font-weight：定義字體粗細(xì)印屁，值如下

font-weight：normal|bold|bolder|lighter|數(shù)值比如100-900；400 等同于 normal斩例，而 700 等同于 bold雄人。

所以答案是ACD。

（十一）

（多選）已知HTML：

<div class="a"><p class="b">Hello World</p></div>

以下哪些CSS可以使文字“Hello World”變成紅色

• A.p.b{color:red;}

• B.p.a{color:red;}

• C..a{color:red;}

• D..b{color:red;}

解：這題考的是選擇器樱拴。答案是ACD柠衍。B如果寫(xiě)成.a p{color:red;}就對(duì)了洋满。

（十二）

（多選）已知以下HTML：

<div class="parent">
    <div class="a">This is a Demo</div>
    <p class="b c">Hello World</p>
</div>
<div class="parent">This is a Demo</div>

以下哪些CSS可以使得“Hello World”的文字顏色為白色

• A..parent .c{ color:#fff; }

• B..b:first-child{ color:#fff; }

• C..a .b{ color:#fff; }

• D..b.c{ color:#fff; }

解：答案是AD晶乔。B錯(cuò)是因?yàn)閜標(biāo)簽不是第一個(gè)子元素，如果設(shè)置b:last-child{color:#fff;};C錯(cuò)在.a.b不是父子元素關(guān)系牺勾，不能這樣寫(xiě)正罢。

（十三）

（多選）已知一個(gè)元素做了以下設(shè)置：

width:100px; height:100px; padding:10px; background:url(x.png) no-repeat;

請(qǐng)問(wèn)增加以下哪些CSS可以改變這張背景圖的位置

• A.background-position:0 0;

• B.background-position:0% 0%;

• C.background-position:50% 50%

• D.background-position:0%;

解：這題考的是background-position：定義背景圖像的起始位置這個(gè)屬性。它的語(yǔ)法為：

background-position：x% y%（百分比）|top left之類的|xpx ypx（具體數(shù)值）驻民；

默認(rèn)值為background-position：0 0翻具；或者left top或者0% 0%都是表示一個(gè)意思，定位到左上角回还。

注意：如果設(shè)置了background-position：top裆泳；如果僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將默認(rèn)是"center"柠硕。又比如設(shè)置了background-position：30px工禾；僅規(guī)定了一個(gè)值，納悶另一個(gè)值將是50%蝗柔。

所以這一題答案是CD闻葵。

（十四）

（多選）以下哪些屬性有誤

• A.transition-timing-function

• B.transition-name

• C.animation-direction

• D.animation-property

這題考的是課程的動(dòng)畫(huà)這個(gè)章節(jié)的知識(shí)點(diǎn)。答案是：BD癣丧。
其中transtion過(guò)渡有這些屬性值

annimation動(dòng)畫(huà)有這些屬性值

（十五）

（判斷）一個(gè)元素被設(shè)置了position:absolute; width:50%; 那么這個(gè)百分比的參照物是這個(gè)元素的父元素

• A.×
• B.√

解：這題考的是絕對(duì)定位的特點(diǎn)。絕對(duì)定位的特點(diǎn)看下面這張圖：

絕對(duì)定位的特點(diǎn)

我解釋下嗓袱，給一個(gè)小塊設(shè)置了絕對(duì)定位籍救，納悶它的寬度就是收縮成內(nèi)容寬度，就像圖中的深橘色小塊渠抹，然后會(huì)脫離文檔流蝙昙，位于它下面的小塊會(huì)竄上來(lái)取代它的位置，若是給它追加topleft的方向值逼肯，則必須要明確參照物耸黑，絕對(duì)定位的參照物，要么沒(méi)設(shè)置的時(shí)候就是html根元素篮幢，要么設(shè)置了的話就是它設(shè)置過(guò)相對(duì)定位的第一個(gè)定位的祖先元素大刊。

所以這題的答案就是A。

（十六）

（判斷）

.a{transform: rotate(45deg) translate(100%);} 

和

 .a{transform: translate(100%) rotate(45deg);}

兩個(gè)的效果相同

• A.√

• B.×

解：這題要考的知識(shí)點(diǎn)是多個(gè)transform-function合用的時(shí)候應(yīng)該注意哪些問(wèn)題。有時(shí)候變形的效果是多個(gè)transform-function多步驟合作實(shí)現(xiàn)的缺菌。那就要用到多個(gè)transform-function了葫辐，比如偏移和旋轉(zhuǎn)。但是這兩個(gè)function書(shū)寫(xiě)的順序必須不能錯(cuò)伴郁。transform中的transform-function可以多個(gè)寫(xiě)耿战，但是書(shū)寫(xiě)的順序會(huì)影響最后的視覺(jué)呈現(xiàn)的效果。

需要意識(shí)到變換函數(shù)的順序焊傅。這是因?yàn)椋?strong>每一個(gè)變換函數(shù)不僅改變了元素剂陡，同時(shí)也會(huì)改變和元素關(guān)聯(lián)的transform坐標(biāo)系，當(dāng)變換函數(shù)依次執(zhí)行時(shí)狐胎，后一個(gè)變換函數(shù)總是基于前一個(gè)變換后的新transform坐標(biāo)系鸭栖。

所以這題的答案就是B。

另外要更多的了解CSS3變形的相關(guān)知識(shí)點(diǎn)握巢，可以看看我的這篇文章《網(wǎng)易微專業(yè)之《前端工程師》學(xué)習(xí)筆記（6）-變形》晕鹊，里面有詳細(xì)的介紹。

（十七）

（判斷）在顏色值中transparent和rgba(0,0,0,0)最終的表現(xiàn)是一樣的

• A.×
• B.√

解：這題考的是透明度的問(wèn)題暴浦。答案是B溅话。

RGBA(R,G,B,A)取值：

transparent是全透明黑色(black)的速記法同规，即一個(gè)類似rgba(0,0,0,0)這樣的值循狰。

在CSS1中窟社，transparent被用來(lái)作為background-color的一個(gè)參數(shù)值券勺，用于表示背景透明。在CSS2中灿里，border-color也開(kāi)始接受transparent作為參數(shù)值关炼，IE6不支持border的顏色為transparent，邊框色會(huì)顯示為黑色匣吊。在CSS3中儒拂，transparent被延伸到任何一個(gè)有color值的屬性上。IE8及以下色鸳，color屬性值為transparent時(shí)社痛，文本顯示為黑色。

IE6及更早瀏覽器只有background-color接受transparent取值命雀。
IE7及IE8除了background-color蒜哀，還有border-color也開(kāi)始接受transparent取值。

（十八）

（判斷）一個(gè)空的div元素設(shè)置了display:inline; width:100px; 之后吏砂，實(shí)際寬度為100px

• A.×
• B.√

解：這題的考點(diǎn)就是display:inline撵儿；的特點(diǎn)了乘客，答案是A。

display:inline就是以內(nèi)聯(lián)元素方式顯示淀歇，內(nèi)聯(lián)元素是不能設(shè)置寬高的易核。另外補(bǔ)腦下另外兩個(gè)inline-block和block，這三者的區(qū)別浪默。

|display |默認(rèn)寬度 |可設(shè)置寬高| 起始位置| 代表元素有哪些|
| :-------- | --------:|| :-------- | --------:|
|block |父元素寬度| 是| 換行 |div\p\h1~h6\ol\ul\dl\table\address\blockquot\form|
|inline |內(nèi)容寬度| 否| 同行 |a\span\br\i\em\strong\label\q\var\cite\code|
|inline-block| 內(nèi)容寬度| 是 |同行 |input\textarea\select\button|

（十九）

（填空）已知這樣一段HTML：

 <p class="a"></p>

應(yīng)用了這樣一段CSS：

.a{ font:12px/2 arial; }

牡直，則這個(gè)p元素的line-height的值是_________px

解：這題考點(diǎn)是font縮寫(xiě)的寫(xiě)法。答案是24纳决。

font 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有字體屬性有這些：

font-style
font-variant
font-weight
font-size/line-height
font-family

所以對(duì)應(yīng)下來(lái)的簡(jiǎn)寫(xiě)方式就是這樣的：

font:italic bold 12px/20px arial,sans-serif;

/2沒(méi)有單位就代表相對(duì)數(shù)值井氢，是字體大小的2倍。
當(dāng)然必須注意的是font這個(gè)綜合屬性岳链，連寫(xiě)的時(shí)候必須寫(xiě)字號(hào)和定義什么字體這兩個(gè)屬性值花竞，如果只是font:12px；這樣寫(xiě)是沒(méi)效果的掸哑，必須寫(xiě)至少寫(xiě)font:12px arial;才會(huì)有效约急。所以對(duì)照起來(lái)，答案就很明顯了苗分。

（二十）

（填空）已知這樣一段HTML：

<div class="a b"><em>Hello World</em></div>

應(yīng)用了這樣一段CSS：

em{ color:red; }
.a{ color:blue; }
.b{ color:green; }
.a.b{ color:yellow; }

請(qǐng)問(wèn)厌蔽，文字“Hello World”的顏色是（回答顏色的英文名稱即可）__________

解：這題的考點(diǎn)是選擇器的優(yōu)先級(jí)。答案是em的那個(gè)顏色會(huì)有效果摔癣，就是red奴饮。為什么呢。

先來(lái)講講選擇器的優(yōu)先級(jí)方程式择浊。

行內(nèi)樣式：a
ID選擇器的數(shù)量：b
類戴卜、偽類、屬性選擇器的數(shù)量：c
標(biāo)簽選擇器和偽元素選擇器的數(shù)量：d
a,b,c,d分別給1000,100,10,1的級(jí)別值

所以選擇器的最終值value=ax1000+bx100+cx10+dx1

舉個(gè)栗子

樣式根據(jù)選擇器優(yōu)先級(jí)別呈現(xiàn)琢岩，優(yōu)先級(jí)別高的會(huì)覆蓋優(yōu)先級(jí)別低的投剥，同級(jí)別的按照css書(shū)寫(xiě)的順序，先寫(xiě)的會(huì)被后寫(xiě)的覆蓋担孔。當(dāng)然如果在樣式后面加江锨！important，那么它的級(jí)別將是最高的糕篇。

而樣式里的屬性啄育，不同的屬性會(huì)合并，同樣的屬性會(huì)根據(jù)優(yōu)先級(jí)規(guī)則以及書(shū)寫(xiě)規(guī)則進(jìn)行覆蓋拌消。

這樣說(shuō)來(lái)挑豌，是不是應(yīng)該選擇.a.b呢，color是yellow，那么為什么不對(duì)呢浮毯？
還有一條完疫，選擇器的優(yōu)先級(jí)會(huì)根據(jù)描述最清楚的來(lái)定義，在這個(gè)html里面债蓝，em定義的屬性是最直接的指法壳鹤，其他的類選擇器的指法都算是父類繼承過(guò)來(lái)的顏色屬性，所以要選擇em饰迹。

（二十一）

（填空）通過(guò)設(shè)置____________________: underline ; 可以給一段文字添加下劃線芳誓。

解：這題的答案是text-decoration ，這個(gè)屬性定義文本的修飾啊鸭。它一般有下面這些值可以寫(xiě)：

（二十二）

（填空）垂直對(duì)齊屬性vertical-align的默認(rèn)值是____________________

解：這題的答案是baseline烟号。

vertical-align的值常見(jiàn)的有這些：

（二十三）

（填空）請(qǐng)補(bǔ)全以下樣式宗弯，使得鼠標(biāo)移到該元素上時(shí)文字變成紅色：.demo_____________{color:red;}

解：這題太簡(jiǎn)單了脯燃，答案是:hover。

（二十四）

（填空）已知這樣一段HTML罕伯，一個(gè)div元素里面嵌套了一個(gè)p元素：

<div class="a"><p class="b"></p></div>

應(yīng)用了這樣一段CSS：

p{ float:left; }
.b{ height:100px; margin:0; }

則這個(gè)div元素的高度是________px

解：這題考的是float的特性曲伊，答案是0。

float的特性可以看看下面這張圖

float的特性

給p設(shè)置了float追他，納悶p就脫離文檔流了，這個(gè)時(shí)候div里面就沒(méi)內(nèi)容了岛蚤，當(dāng)然高度是0了邑狸。

（二十五）

（填空）通過(guò)設(shè)置_____________: italic ; 可以把一段文字變成斜體。

解：這題的答案是font-style涤妒。font-style的其他值順便也介紹下：

（二十六）

（填空）如果希望內(nèi)容超出容器時(shí)容器自動(dòng)出現(xiàn)滾動(dòng)條渐逃，那么可以在容器上設(shè)置overflow:____________;够掠。

解：這題的答案是auto。

（二十七）

（填空）請(qǐng)補(bǔ)全以下樣式，使得上邊框的粗細(xì)為2px（其他粗細(xì)仍然為1px）：.demo{border:1px solid #000; ___________________:2px;}

解：這題答案是border-top-width脊僚。border-width屬性是為元素的邊框設(shè)置寬度的屬性相叁。