web前端開發測驗之css部分

Tip：這是http://davidshariff.com/quiz/給出的web前端開發測試題,的CSS部分,我根據自己的理解給出的答案，歡迎拍磚，一起刷題==>Github 倉庫地址。

Front End Web Development Quiz CSS 部分問題與解答

1. Q: CSS 屬性是否區分大小寫？

   ul {
       MaRGin: 10px;
   }
   

   A: 不區分。

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

2. 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:

   http://codepen.io/paddingme/pen/JwCDF

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

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

   http://codepen.io/paddingme/pen/CnFpa

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

   A: 不會。

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

5. Q: 僞類選擇器:checked將作用與input類型爲radio或者checkbox,不會作用於option。

   A: 不對。

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

   The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option>in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

6. Q: 在HTML文本中，僞類:root總是指向html元素？

   A: 不是（答案中給出了是 ==||）。以下摘自知乎:root 與 html 在 CSS3 中指的是同一個元素嗎？的答案：

   單指創建的根。這個根可能不是 html ，如果是片段html，沒有創建根，則爲片段的根。把這下面 URL 打到支持 data URL 的瀏覽器看看（Firefox, Chrome, Safari, Opera），可見一斑：

   data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>
   

7. Q:translate()方法能移動一個元素在z軸上的位置？

   A: 不能。translate()方法只能改變x軸，y軸上的位移。

8. Q: 如下代碼中文本“Sausage”的顏色是?

   
   
   <ul class="shopping-list" id="awesome">
       <li><span>Milk</span></li>
       <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
   </ul>
   
   
   
   ul {color:red;}
   li {color:blue;}
   

   A: blue。

9. Q: 如下代碼中文本“Sausage”的顏色是?

   
   
   <ul class="shopping-list" id="awesome">
       <li><span>Milk</span></li>
       <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
   </ul>
   
   
   
   ul {color:red;}
   #must-buy {color:blue;}
   

   A: blue。

10. Q: 如下代碼中文本“Sausage”的顏色是?

    
    
    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    
    
    
    .shopping-list .favorite {
        color: red;
    }
    #must-buy {
        color: blue;
    }
    

    A: blue。

11. Q: 如下代碼中文本“Sausage”的顏色是?

    
    
    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    
    
    
    ul#awesome {
        color: red;
    }
    ul.shopping-list li.favorite span {
        color: blue;
    }
    

    A: blue。

12. Q: 如下代碼中文本“Sausage”的顏色是?

    
    
    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    
    
    
    ul#awesome #must-buy {
        color: red;
    }
    .favorite span {
        color: blue!important;
    }
    

    A: blue。

13. Q: 如下代碼中文本“Sausage”的顏色是?

    
    
    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    
    
    
    ul.shopping-list li .highlight {
        color: red;
    }
    ul.shopping-list li .highlight:nth-of-type(odd) {
        color: blue;
    }
    

    A: blue。

14. Q: 如下代碼中文本“Sausage”的顏色是?

    
    
    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    
    
    
    #awesome .favorite:not(#awesome) .highlight {
        color: red;
    }
    #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
        color: blue;
    }
    

    A: blue。

15. Q:#example位置如何變化：

    
    
    <p id="example">Hello</p>
    
    
    
    #example {margin-bottom: -5px;}
    

    A: 向上移動5px。

16. Q: #example位置如何變化：

    
    
    <p id="example">Hello</p>
    
    
    
    #example {margin-left: -5px;}
    

    A: 想做移動5px。

17. #i-am-useless 會被瀏覽器加載嗎？

    
    
    <div id="test1">
        <span id="test2"></span>
    </div>
    
    
    
    #i-am-useless {background-image: url('mypic.jpg');}
    

    A: 不會

18. mypic.jpg 會被瀏覽器加載嗎？

    
    
    <div id="test1">
        <span id="test2"></span>
    </div>
    
    
    
    #test2 {
        background-image: url('mypic.jpg');
        display: none;
    }
    

    A: 會被下載。

19. mypic.jpg 會被瀏覽器加載嗎？

    
    
    <div id="test1">
        <span id="test2"></span>
    </div>
    
    
    
    #test1 {
        display: none;
    }
    #test2 {
        background-image: url('mypic.jpg');
        visibility: hidden;
    }
    

    A: 不會被下載。

20. Q: only 選擇器的作用是？

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

    A：停止舊版本瀏覽器解析選擇器的其餘部分。

    only 用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query 但卻支持Media Type 的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only 不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，因爲其先讀only 而不是screen；另外不支持Media Qqueries 的瀏覽器，不論是否支持only，樣式都不會被採用。

21. Q:overfloa:hidden 是否形成新的塊級格式化上下文？

    
    
    <div>
        <p>I am floated</p>
        <p>So am I</p>
    </div>
    
    
    
    div {overflow: hidden;}
    p {float: left;}
    

    A：會形成。

    會觸發BFC的條件有：

    • float的值不爲none。
    • overflow的值不爲visible。
    • display的值爲table-cell, table-caption, inline-block 中的任何一個。
    • position的值不爲relative 和static。

22. Q: screen關鍵詞是指設備物理屏幕的大小還是指瀏覽器的視窗？

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

    A: 瀏覽器視窗

知識點總結：

tips:根據以上考點總結下如下知識點，後期會寫文章進行總結，這裏只挑出重點進行解析。

• 關於CSS選擇器以及優先級的知識可查閱如下文章：

  • CSS 選擇器參考手冊
  • CSS選擇器筆記
  • 高級CSS樣式選擇器
  • 征服高級CSS選擇器
  • 詳解CSS選擇器、優先級與匹配原理
  • 優先級
  • 牢記 31 種 CSS 選擇器用法

• 如何計算優先級：

  那麼你如何計算指定選擇器的優先級？如果你考慮到將優先級表示爲用逗號隔開的四個數字就會相當簡單，比如：1, 1, 1, 1 或0, 2, 0, 1

  • 第一個數字(a)通常就是0，除非在標籤上使用style屬性；
  • 第二個數字(b)是該選擇器上的id的數量的總和；
  • 第三個數字(c)是用在該選擇器上的其它屬性選擇器和僞類的總和。這裏包括class (.example) 和屬性選擇器(比如 li[id=red])；
  • 第四個數字(d)計算元素(就像table、p、div等等)和僞元素(就像:first-line等)；
  • 通用選擇器(*)是0優先級；
  • 如果兩個選擇器有同樣的優先級，在樣式表中後面的那個起作用。

• 瀏覽器CSS匹配順序：

  瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id爲divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。

• display:none 和visibilty:hidden的區別：

  可參考：

  • What is the difference between visibility:hidden and display:none?
  • display:none和visibility:hidden的區別！

  display:none和visibility:hidden都是把網頁上某個元素隱藏起來的功能，但兩者有所區別，經過親自實驗，我發現使用`` visibility:hidden屬性會使對象不可見，但該對象在網頁所佔的空間沒有改變（看不見但摸得到），等於留出了一塊空白區域，而display:none`屬性會使這個對象徹底消失（看不見也摸不到）

  display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. so for example:

  <span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

  display:none would be:

  test | | test

  visibility:hidden would be:

  test |?????| test

  In visibility:hidden the tag is rendered, it just isn't seen on the page.

• 瀏覽器如何渲染，可以查閱如下文章：

  • 瀏覽器的渲染原理簡介
  • 專題：瀏覽器:渲染重繪、重排兩三事
  • 瀏覽器加載和渲染HTML的順序以及Gzip的問題
  • 從FE的角度上再看輸入url後都發生了什麼

• BFC( block formatting contexts ) 塊級格式上下文

  • 深入理解BFC和Margin Collapse
  • CSS佈局中一個簡單的應用BFC的例子
  • 理解BFC(Block Formatting Context)

• margin，padding相關的知識可以參考查閱《CSS權威指南》