前端開發面試題收集(css部分)

時間 2019-12-15

原文原文鏈接

http://davidshariff.com/quiz/ 作了下這裏面前端開發面試的題，發現有些不會，因此在此作個整理以供本身學習，參考，總結。css

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

ul {
    MaRGin: 10px;
}

答：不區分。（HTML, CSS都不區分，但爲了更好的可讀性和團隊協做，通常都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。）前端

2.問：對行內元素設置margin-top 和margin-bottom是否起做用css3

答：不起做用。（須要注意行內元素的替換元素img、input，他們是行內元素，可是能夠爲其設置寬高，而且margin屬性也是對其起做用的，有着相似於Inline-block的行爲）。看具體效果：git

 <style> 
    div {
      width: 500px;
      height: 500px;
      margin-top: 100px;
      margin-left: 100px;
      background: lightblue;
    }
    span {
      margin: 100px;
    }
    img {
      margin: 100px;
    }
 </style>  
</head> 
<body class="claro"> 
  <div class="test_wrap">
    <span>
      我是行內元素，設置margin看是否對我起做用
    </span>
    <img src="" alt="我是行內替換元素，margin-top,margin-bottom對我起做用">
  </div>
</body>

3.問：對內聯元素設置padding-top和padding-bottom是否會增長它的高度github

答：不會。同上題，要注意行內元素的替換元素，img設置padding-top/bottom是會起做用的。面試

4.問：若是設置<p>的font-size: 10rem;那麼當用戶重置或拖拽瀏覽器窗口時，它的文本會不會受到影響？shell

答：不會。瀏覽器

rem是css3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。less

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

答：不對。

能夠做用於option，試了下感受並無什麼用，雖然能選中，可是這個不能改變其中的屬性。

 <style>  
    option:checked {
      color: red;
    }
    input:checked {
      background: red;
    }
  </style> 

<div>
  <select>
    <option>Volvo</option>
    <option selected="selected">Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
  </select>
  <br>
  <br>
  <input type="radio" name="sex" value="male" checked>Male
  <br>
  <input type="radio" name="sex" value="female">Female
</div>

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

答：是。

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

答：不能。它只能移動x,y軸的位置。translate3d能夠。

8-14.這六個題都是在考css選擇器的優先級，看下14題：

問：以下代碼中文本「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;
  }

答：red

:nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 n 個子元素的每一個元素.

:nth-last-of-type(n) 選擇器匹配屬於父元素的特定類型的第 n 個子元素的每一個元素，從最後一個子元素開始計數。

15.

html:

<p id="example">Hello</p>

css:

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

問：#example的位置會發什麼什麼？

答：全部帶id爲example的元素的位置都會向上移動5px.(通常id不取重複，若是真的這樣設置了就和class效果同樣）

16.省略。。。

17-21.公用一個例子：

<div id="test1">
    <span id="test2"></span>
</div>

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

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

答：不會。

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

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

答：會。

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

#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

答：會。

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

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

答：不會。

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

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

答：會.

22-23.

css:

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

22.問：only選擇器的做用是？

答：中止舊版本瀏覽器解析選擇器的其他部分。

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

23.問：screen關鍵詞是指設備的物理屏幕大小仍是指瀏覽器的視窗。

答：瀏覽器的視窗。

24.問:overfloa:hidden 是否造成新的塊級格式化上下文？

答：會。

會觸發BFC的條件有：

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

總結：

一.css選擇器，優先級知識點考的挺多。如何計算優先級，參考http://www.cnblogs.com/wangfupeng1988/p/4285251.html 這篇文章引入的一個概念：特指度。特指度表示一個css選擇器表達式的重要程度，能夠經過一個公式來計算出一個數值，數越大，越重要。

這個計算叫作「I-C-E」計算公式，

I——Id；
C——Class；
E——Element；

即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。

舉例：

CSS選擇器表達式	特指度計算結果
p	1
p.large	11
P#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.list li	114

注意：!important優先級最高，高於上面一切。* 選擇器最低，低於一切。

瀏覽器CSS匹配順序：

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

二：display:none 和visibilty:hidden的區別。

二者都是將某個元素隱藏起來，區別是：display:none會使對象完全消失，不佔據空間；可是visibility:hidden所佔的空間還在，留了一塊空白區域。（不過上述例子，關於img加載的，還有些不是很懂第18問，爲何display:none仍是要加載圖片，第20問，卻沒有加載圖片）

三：瀏覽器渲染，這個本身要着重學習下：

四：BFC 塊級格式化上下文

參考：

前端試題css部分