摘要：部分問題與解答屬性是否區分大小寫不區分。對于行內元素，設置左右內邊距，左右內邊距將是可見的。而對于替換元素，則撐開了父元素。如下代碼中文本的顏色是。

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

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

ul {
    MaRGin: 10px;
}

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:

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

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

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 (in a ) 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.




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

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

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


data:application/xhtml+xml,




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

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


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




    
Milk
    
Sausage




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


A: blue。


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




    
Milk
    
Sausage




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


A: blue。


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




    
Milk
    
Sausage




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


A: blue。


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




    
Milk
    
Sausage




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


A: blue。


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




    
Milk
    
Sausage




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


A: blue。


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




    
Milk
    
Sausage




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


A: blue。


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




    
Milk
    
Sausage




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


A: blue。


Q:#example位置如何變化：



Hello



#example {margin-bottom: -5px;}


A: 向上移動5px。


Q: #example位置如何變化：



Hello



#example {margin-left: -5px;}


A: 想做移動5px。


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




    




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


A: 不會


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




    




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


A: 會被下載。


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




    




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


A: 不會被下載。


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，樣式都不會被采用。


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




    
I am floated
    
So am I




div {overflow: hidden;}
p {float: left;}


A：會形成。

會觸發BFC的條件有：


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



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:


test | Appropriate style in this tag | test

  
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權威指南》

           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務器
                                             
                         GPU云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               web前端前端開發
                                                                                                           前端web前端開發
                                                                                                           web前端開發前端
                                                                                                           前端開發和web前端
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110939.html
               
                      
               

                 
                                  
上一篇：該如何選擇 background-image 和 img 標簽
  
                                                
                                       
下一篇：值得參考的css理論：OOCSS、SMACSS與BEM
                                  
              
              

                
相關文章
                

                             
                                                                    

                                                

                          
web前端開發測驗之HTML部分
                                                     
摘要：標簽規定用于表單的密鑰對生成器字段。元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。中元素表現為一個超鏈接，支持任何行內元素和塊級元素。

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



Q:  是正確的HTML5標簽嗎？

A:...
                                                   
                          

                                

                                    DoINsiSt
                                    2019-08-01 14:41
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                                                       

                                                

                          
網易微專業之《前端開發工程師》學習筆記（1）
                                                     
摘要：點擊此處了解網易微專業課程前段時間報名參加了網易云課堂微專業課程前端開發工程師，這周課程開始了，正式學習。以下內容為前端開發工程師微專業的第一門課網頁制作的課程學習指南，學習視頻課程后自己整理的學習筆記，會持續更新內容。

何為網易微專業？
微專業是由網易云課堂聯合各領域知名專家，以就業為導向，精心打造的職業培訓方案。按要求完成學習，考試通過可獲得專業認定證書，令你求職或加薪多一份獨特優...
                                                   
                          

                                

                                    geekzhou
                                    2019-08-28 18:28
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
網易微專業之《前端開發工程師》學習筆記（1）
                                                     
摘要：點擊此處了解網易微專業課程前段時間報名參加了網易云課堂微專業課程前端開發工程師，這周課程開始了，正式學習。以下內容為前端開發工程師微專業的第一門課網頁制作的課程學習指南，學習視頻課程后自己整理的學習筆記，會持續更新內容。

何為網易微專業？
微專業是由網易云課堂聯合各領域知名專家，以就業為導向，精心打造的職業培訓方案。按要求完成學習，考試通過可獲得專業認定證書，令你求職或加薪多一份獨特優...
                                                   
                          

                                

                                    劉東
                                    2019-08-01 15:00
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論
   
                
 
                      

              
           
           

              
 
                

                    
                    
Ajian
                    
男|高級講師
                    

                     
                                                                      我要關注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
Python0基礎（上）——期末不掛科
                            
閱讀 3048·2021-11-22 09:34
                                                       
SWR 發布 1.0 版本、Microsoft Edge 新標簽頁底部出現無法關閉的廣告 | 淘系前
                            
閱讀 3640·2021-08-31 09:45
                                                       
關于SVG
                            
閱讀 3850·2019-08-30 13:57
                                                       
前端每日實戰：4# 視頻演示如何用純 CSS 創作一個金屬光澤 3D 按鈕特效
                            
閱讀 1676·2019-08-29 15:11
                                                       
織夢做網站過程中引用bootstrap產生css沖突的解決
                            
閱讀 1685·2019-08-28 18:04
                                                       
web前端開發測驗之css部分
                            
閱讀 3225·2019-08-28 17:59
                                                       
每日 30 秒 ? JSON對象數組轉換 CSV 表格數據
                            
閱讀 1564·2019-08-26 13:35
                                                       
JS正則表達式學習筆記2
                            
閱讀 2191·2019-08-26 10:12
                                                
                      
                

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
閱讀需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    













<