好程序員web前端開發測驗之css部分

　　 好程序員 web前端開發測驗之css部分 Front End Web Development Quiz CSS 部分問題與解答
　 　Q: CSS 屬性是否區分大小寫?

1.  <p><font size="3">　　ul {</font></p>

2.  <p><font size="3">　　MaRGin: 10px;</font></p>

3.  <p><font size="3">　　}</font></p>

　　A: 不區分。

　　HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。

　　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:

　　Q: 對內聯元素設置padding-top和padding-bottom是否會增加它的高度?(原題是Does setting padding-top and padding-bottom on an inline element add to its dimensions?)

　　A: 答案是不會。同上題比較糾結，不太明白這里的 dimensions指的是到底是什么意思?放置一邊，咱們來分析下。對于行內元素，設置左右內邊距，左右內邊距將是可見的。而設置上下內邊距，設置背景顏色后可以看見內邊距區域有增加，對于行內非替換元素，不會影響其行高，不會撐開父元素。而對于替換元素，則撐開了父元素。看下demo，更好的理解下：

　　Q: 設置p的font-size:10rem，當用戶重置或拖曳瀏覽器窗口時，文本大小是否會也隨著變化?

　　A: 不會。

　　rem是以html根元素中font-size的大小為基準的相對度量單位，文本的大小不會隨著窗口的大小改變而改變。

　　Q: 偽類選擇器:checked將作用與input類型為radio或者checkbox,不會作用于option。

　　A: 不對。

　　偽類選擇器 checked的定義很明顯:

　　The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (