国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 基本測試題

ASCH / 762人閱讀

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

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

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

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

ul {
    MaRgIn: 10px;
}

這種寫法是否正確？

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

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

4.如果你有一個

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

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

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

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

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

8.

html:

    
    
  • Milk
    • 
    
  • Sausage
    •

css:

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

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

9.

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不區(qū)分大小寫，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操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式?？梢酝ㄟ^它讓選中的樣式在老式瀏覽器中不被應用,防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式。

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

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

相關文章

  • CSS 基本測試題

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

    iamyoung001 評論0 收藏0

  • CSS 基本測試題

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

    Sunxb 評論0 收藏0

  • 前端—初級階段2(5-8)

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

    Aldous 評論0 收藏0

  • 前端—初級階段2(5-8)

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

    qianfeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<