好程式設計師web前端開發測驗之css部分

2021-09-19 17:40:13 字數 1538 閱讀 8039

好程式設計師web前端開發測驗之css部分front end web development quiz css 部分問題與解答

q: css 屬性是否區分大小寫?

1.ul {

2. margin: 10px;

3.

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 (

好程式設計師web前端開發測驗之css部分

好程式設計師web前端開發測驗之css部分front end web development quiz css 部分問題與解答 q css 屬性是否區分大小寫?ul a 不區分。html,css都對大小寫不敏感,但為了更好的可讀性和團隊協作一般都小寫,而在xhtml 中元素名稱和屬性是必須小寫的。q...

好程式設計師web前端系列之css3動畫

好程式員web前端系列之動畫,css3屬性中有關於製作動畫的三個屬性 transform,transition,animation keyframes mymoveto 或 keyframes mymove 100 中間再可以新增關鍵幀 相同點 都是隨著時間改變元素的屬性值。不同點 transiti...

好程式設計師web前端分享邏輯運算

一門計算機語言,程式設計的核心在於邏輯思想,當我們在編寫程式的時候,邏輯是否通順,是能否正確寫出程式的關鍵,可以說如果你掌握了邏輯,那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...