1. 首頁 > 生活百科 > >

web前端筆試題庫之CSS篇

小知識it知識

之前的文章《web前端筆試題庫之HTML篇》中 ， 我們分享了一些關于HTML的前端面試題 。 下面本篇文章就接著上一篇 ， 分享css部分的筆試題（附答案） ， 大家快看看能答對幾個！

web前端筆試題庫之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 (<input type="radio">), checkbox (<input type="checkbox">) or option (<option>in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.
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;}

推薦閱讀