CSS 基本測(cè)試題

Sunxb 發(fā)布于2019-08-01 16:17 / 1967人閱讀

摘要：下面提供了道有關(guān)的測(cè)試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識(shí)點(diǎn)。測(cè)試題的答案在尾部。對(duì)于這種替換元素，和各方向均有作用。操作符表示僅在媒體查詢匹配成功的情況下應(yīng)用指定樣式。

下面提供了18道有關(guān)css的測(cè)試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識(shí)點(diǎn)。

測(cè)試題的答案在尾部。大家可以在評(píng)論區(qū)進(jìn)行討論。

1.css區(qū)分大小寫嗎？

ul {
    MaRgIn: 10px;
}

這種寫法是否正確？

2.為行內(nèi)元素設(shè)置 margin-top 和 margin-bottom是否會(huì)產(chǎn)生影響？

3.為行內(nèi)元素設(shè)置 padding-top 和 padding-bottom是否會(huì)改變它的位置？

4.如果你有一個(gè)

元素，它的font-size為10rem, 當(dāng)用戶改變?yōu)g覽器窗口大小時(shí)，該元素的字體是否會(huì)響應(yīng)式改變？

5.偽類:checked作用于radio 或者 checkbox，但是不作用于

6.在HTML中，偽類:root總是匹配元素？

7.translate()函數(shù)實(shí)現(xiàn)了沿著 z 軸移動(dòng)元素？

8-14題是針對(duì)同一個(gè)html,循序漸進(jìn)。

html:


    Milk
    Sausage

css:

ul {
    color: red;
}
li {
    color: blue;
}

文字Sausage的顏色最終顯示的是什么？

html:


    Milk
    Sausage

css:

ul li {
    color: red;
}
#must-buy {
    color: blue;
}

文字Sausage的顏色最終顯示的是什么？

10.

html:


    Milk
    Sausage

css:

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

11.

html:


    Milk
    Sausage

css:

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

文字Sausage的顏色最終顯示的是什么？

12.

html:


    Milk
    Sausage

css:

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

13.

html:


    Milk
    Sausage

css:

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

14.

html:


    Milk
    Sausage

css:

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

文字Sausage的顏色最終顯示的是什么？

15-17題是針對(duì)同一個(gè)html,循序漸進(jìn)
15.

html:

css:

#i-am-useless {
    background-image: url("mypic.jpg");
}

沒有引用到的樣式所包含的資源是否會(huì)被瀏覽器下載下來？

16.

html:

css:

#test2 {
    background-image: url("mypic.jpg");
    display: none;
}

頁面加載的時(shí)候，mypic.jpg該圖片是否會(huì)被下載下來？

17.

html:

css:

#test1 {
    display: none;
}
#test2 {
    background-image: url("mypic.jpg");
    visibility: hidden;
}

頁面加載的時(shí)候，mypic.jpg該圖片是否會(huì)被下載下來？

18.

@media only screen and (max-width: 1024px) {
    margin: 0;
}

only的作用是什么？

答案：
1.css不區(qū)分大小寫，MaRgIn這種寫法是正確的。
2.否。
3.否。
問題二跟問題三是同一個(gè)問題范圍內(nèi)，會(huì)有點(diǎn)坑，
行內(nèi)元素還分為行內(nèi)不可替換元素和行內(nèi)替換元素。
對(duì)于input這種替換元素，margin和padding各方向均有作用。
對(duì)于span，a等這些不可替換元素，padding-left,padding-right,margin-right,margin-left均有效果,padding-top,padding-bottom,margin-top,margin-bottom無效果。
4.否。
5.否。 https://developer.mozilla.org...
6.是。
7.否。
8.blue。
9.blue。
10.blue。
11.blue。
12.blue。即使沒有!important，也是blue
13.blue。
14.red。
15.否。
16.會(huì)。
17.否。
18.only操作符表示僅在媒體查詢匹配成功的情況下應(yīng)用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應(yīng)用,防止老舊的瀏覽器不支持帶媒體屬性的查詢而應(yīng)用到給定的樣式。