CSS 基本測試題

iamyoung001 發布于2019-08-30 15:52 / 1207人閱讀

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

下面提供了18道有關css的測試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識點。

測試題的答案在尾部。大家可以在評論區進行討論。

1.css區分大小寫嗎？

ul {
    MaRgIn: 10px;
}

這種寫法是否正確？

2.為行內元素設置 margin-top 和 margin-bottom是否會產生影響？

3.為行內元素設置 padding-top 和 padding-bottom是否會改變它的位置？

4.如果你有一個

元素，它的font-size為10rem, 當用戶改變瀏覽器窗口大小時，該元素的字體是否會響應式改變？

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

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

7.translate()函數實現了沿著 z 軸移動元素？

8-14題是針對同一個html,循序漸進。

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題是針對同一個html,循序漸進
15.

html:

css:

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

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

16.

html:

css:

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

頁面加載的時候，mypic.jpg該圖片是否會被下載下來？

17.

html:

css:

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

頁面加載的時候，mypic.jpg該圖片是否會被下載下來？

18.

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

only的作用是什么？

答案：
1.css不區分大小寫，MaRgIn這種寫法是正確的。
2.否。
3.否。
問題二跟問題三是同一個問題范圍內，會有點坑，
行內元素還分為行內不可替換元素和行內替換元素。
對于input這種替換元素，margin和padding各方向均有作用。
對于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.會。
17.否。
18.only操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用,防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式。

云服務器 GPU云服務器基本性能測試基本基本查詢基本法則

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116444.html

CSS 基本測試題

摘要：下面提供了道有關的測試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識點。測試題的答案在尾部。對于這種替換元素，和各方向均有作用。操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。下面提供了18道有關css的測試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識點。測試題的答案在尾部。大家可以在評論區進行討論。 1.css區分大小寫嗎？ ul { MaRgIn: 1...

ASCH 2019-08-21 11:29 評論0 收藏0
CSS 基本測試題

摘要：下面提供了道有關的測試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識點。測試題的答案在尾部。對于這種替換元素，和各方向均有作用。操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。下面提供了18道有關css的測試題，大家可以嘗試做一下，一些題可以延伸深挖出很多知識點。測試題的答案在尾部。大家可以在評論區進行討論。 1.css區分大小寫嗎？ ul { MaRgIn: 1...

Sunxb 2019-08-01 16:17 評論0 收藏0
前端—初級階段2(5-8)

摘要：我們可以設置多個關鍵幀通過百分比將動畫序列分割成多個節點在各節點中分別定義各屬性通過將動畫應用于相應元素樣式屬性動畫名稱持續時長默認是。播放方向測試播放完的狀態最后一個關鍵幀第一個關鍵幀測試播放狀態默認是。內容介紹 CSS選擇器(基本、層級、屬性、偽類、偽狀態) CSS常用樣式屬性 CSS3 過渡、變換、動畫 CSS3 3D場景搭建與應用一、CSS選擇器 CSS選擇器一共有五種...

Aldous 2019-08-30 15:56 評論0 收藏0
前端—初級階段2(5-8)

摘要：我們可以設置多個關鍵幀通過百分比將動畫序列分割成多個節點在各節點中分別定義各屬性通過將動畫應用于相應元素樣式屬性動畫名稱持續時長默認是。播放方向測試播放完的狀態最后一個關鍵幀第一個關鍵幀測試播放狀態默認是。內容介紹 CSS選擇器(基本、層級、屬性、偽類、偽狀態) CSS常用樣式屬性 CSS3 過渡、變換、動畫 CSS3 3D場景搭建與應用一、CSS選擇器 CSS選擇器一共有五種...

qianfeng 2019-08-02 14:28 評論0 收藏0