之前的文章《web前端筆試題庫之HTML篇》中，我們分享了一些關於HTML的前端面試題。以下這篇文章就接著上一篇，分享css部分的筆試題（附答案），大家快看看能答對幾個！
1、Q: CSS 屬性是否區分大小寫？
```
ul {
MaRGin: 10px;
}
```A: 不區分。 HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。
2、Q: 行內(inline)元素 設定margin-top和margin-bottom 是否起作用？
A: 不起作用。 (答案是起作用，個人覺得不對。)
html 裡的元素分為替換元素（replaced element）和非替換元素（non-replaced element）。
取代元素是指用作為其他內容佔位符的一個元素。最典型的就是img，它只是指向一個影像檔。以及大多數表單元素也是替換，例如input等。
非替換元素是指內容包含在文件中的元素。例如，如果一個段落的文字內容都放在該元素本身之內，則這個段落就是一個非替換元素。
討論margin-top和margin-bottom對行內元素是否起作用，則要對行內替換元素和行內非替換元素分別討論。
首先我們應該明確外邊距可以應用到行內元素，規範中是允許的，不過由於在向一個行內非替換元素應用外邊距，對行高(line-height)沒有任何影響。由於外邊距實際上是透明的。所以對聲明margin-top和margin-bottom沒有任何視覺效果。原因在於行內非替換元素的外邊距不會改變一個元素的行高。而對於行內非替換元素的左右邊距則不是這樣，是有影響的。
而為替換元素設定的外邊距會影響行高，可能會使行高增加或減少，這取決於上下外邊距的值。行內替換元素的左右邊距與非替換元素的左右邊距的作用一樣。來看看demo:
http://codepen.io/paddingme/pen/JwCDF
3、Q: 對內嵌元素設定padding-top和padding-bottom是否會增加它的高度？
（原題是Does setting padding-top and padding-bottom on an inline element add to its dimensions?）
A: 答案是不會。同上題比較糾結，不太明白這裡的 dimensions指的是到底是什麼意思？放置一邊，咱們來分析下。對於行內元素，設定左右內邊距，左右內邊距將是可見的。而設定上下內邊距，設定背景顏色後可以看見內邊距區域有增加，對於行內非替換元素，不會影響其行高，不會撐開父元素。而對於替換元素，則撐開了父元素。看下demo，更好的理解下：
http://codepen.io/paddingme/pen/CnFpa
4、Q: 設定p的font-size:10rem ，當使用者重置或拖曳瀏覽器視窗時，文字大小是否會也隨著變化？
A: 不會。
rem是以html根元素中font-size的大小為基準的相對度量單位，文字的大小不會隨著視窗的大小改變而改變。
5、Q: 偽類選擇器:checked將作用與input類型為radio或checkbox,不會作用於option。
A: 不對。
偽類選擇器checked的定義很明顯:
The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (
6、Q: 在HTML文本中，偽類別:root總是指向html元素？
A: 不是（答案中給了是 ==||）。以下摘自知乎:root 與 html 在 CSS3 中指的是同一個元素嗎？的答案：
單指創建的根。這個根可能不是 html ，如果是片段html，沒有建立根，則為片段的根。把這下面URL 打到支援data URL 的瀏覽器看看（Firefox, Chrome, Safari, Opera），可見一斑：
data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>7、Q:translate()方法能移動一個元素在z軸上的位置？
A: 不能。 translate()方法只能改變x軸，y軸上的位移。
8、Q: 如下程式碼中文字「Sausage」的顏色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul {color:red;}
li {color:blue;}A: blue。
9、Q: 如下程式碼中文字「Sausage」的顏色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul {color:red;}
#must-buy {color:blue;}A: blue。
10、Q: 如下程式碼中文字「Sausage」的顏色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}A: blue。
11、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}A: blue。
12、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}A: blue。
13、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}A: blue。
14、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}A: blue。
15、Q:#example位置如何变化：
<p id="example">Hello</p>
#example {margin-bottom: -5px;}A: 向上移动5px。
16、Q: #example位置如何变化：
<p id="example">Hello</p>
#example {margin-left: -5px;}A: 向左移动5px。
17、#i-am-useless 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#i-am-useless {background-image: url('mypic.jpg');}A: 不会
18、mypic.jpg 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#test2 {
background-image: url('mypic.jpg');
display: none;
}A: 会被下载。
19、mypic.jpg 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}A: 不会被下载。
20、Q: only 选择器的作用是？
@media only screen and (max-width: 1024px) {argin: 0;}A：停止旧版本浏览器解析选择器的其余部分。
only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。
21、Q:overfloa:hidden 是否形成新的块级格式化上下文？
<div>
<p>I am floated</p>
<p>So am I</p>
</div>div {overflow: hidden;}
p {float: left;}A：会形成。
会触发BFC的条件有：
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。
22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？
@media only screen and (max-width: 1024px) {margin: 0;}A: 浏览器视窗
（学习视频分享：css视频教程）
以上是web前端筆試題庫之CSS篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！
