之前的文章《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)。
討論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 (