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

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

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

二、對行內元素設置margin-top 和margin-bottom是否起做用

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

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

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

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

答：不會。

rem是css3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？

區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

<div>
　　<p> <span></span> </p>
</div>

em是繼承父級的大小的，

例如html、body統一設置font-size：16px;  p：{font-size:12px;} 而後給span：{font-size：2em；} 那麼span就是2em = 12*2,

是2em，即24px，這裏是相對父級字號*2的，而不是相對body裏面的16px

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

答：不對。

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

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效果同樣）

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

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。
• 根元素。

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

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

四：BFC 塊級格式化上下文

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

參考：

前端試題css部分