好程序員
web前端開發(fā)測驗(yàn)之css部分
Front End Web Development Quiz CSS 部分問題與解答
Q: CSS 屬性是否區(qū)分大小寫?
1.
ul {
2.
MaRGin: 10px;
3.
}
A: 不區(qū)分。
HTML,CSS都對大小寫不敏感,但為了更好的可讀性和團(tuán)隊(duì)協(xié)作一般都小寫,而在XHTML 中元素名稱和屬性是必須小寫的。
Q: 行內(nèi)(inline)元素 設(shè)置margin-top和margin-bottom 是否起作用?
A: 不起作用。(答案是起作用,個人覺得不對。)
html 里的元素分為替換元素(replaced element)和非替換元素(non-replaced element)。
替換元素是指用作為其他內(nèi)容占位符的一個元素。最典型的就是
img,它只是指向一個圖像文件。以及大多數(shù)表單元素也是替換,例如input等。 非替換元素是指內(nèi)容包含在文檔中的元素。例如,如果一個段落的文本內(nèi)容都放在該元素本身之內(nèi),則這個段落就是一個非替換元素。
討論
margin-top和margin-bottom對行內(nèi)元素是否起作用,則要對行內(nèi)替換元素和行內(nèi)非替換元素分別討論。
首先我們應(yīng)該明確外邊距可以應(yīng)用到行內(nèi)元素,規(guī)范中是允許的,不過由于在向一個行內(nèi)非替換元素應(yīng)用外邊距,對行高
(line-height)沒有任何影響。由于外邊距實(shí)際上是透明的。所以對聲明margin-top和margin-bottom沒有任何視覺效果。其原因就在于行內(nèi)非替換元素的外邊距不會改變一個元素的行高。而對于行內(nèi)非替換元素的左右邊距則不是這樣,是有影響的。
而為替換元素設(shè)置的外邊距會影響行高,可能會使行高增加或減少,這取決于上下外邊距的值。行內(nèi)替換元素的左右邊距與非替換元素的左右邊距的作用一樣。來看看
demo:
Q: 對內(nèi)聯(lián)元素設(shè)置padding-top和padding-bottom是否會增加它的高度?(原題是Does setting padding-top and padding-bottom on an inline element add to its dimensions?)
A: 答案是不會。同上題比較糾結(jié),不太明白這里的 dimensions指的是到底是什么意思?放置一邊,咱們來分析下。對于行內(nèi)元素,設(shè)置左右內(nèi)邊距,左右內(nèi)邊距將是可見的。而設(shè)置上下內(nèi)邊距,設(shè)置背景顏色后可以看見內(nèi)邊距區(qū)域有增加,對于行內(nèi)非替換元素,不會影響其行高,不會撐開父元素。而對于替換元素,則撐開了父元素。看下demo,更好的理解下:
Q: 設(shè)置p的font-size:10rem,當(dāng)用戶重置或拖曳瀏覽器窗口時,文本大小是否會也隨著變化?
A: 不會。
rem是以html根元素中font-size的大小為基準(zhǔn)的相對度量單位,文本的大小不會隨著窗口的大小改變而改變。
Q: 偽類選擇器:checked將作用與input類型為radio或者checkbox,不會作用于option。
A: 不對。
偽類選擇器
checked的定義很明顯:
The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (