前端面試題（CSS部分）

時間 2019-11-06

標籤端面試題 css 部分欄目 CSS 简体版

原文原文鏈接

CSS 部分問題與解答

這裏是 Front End Web Development Quiz 中的 CSS部分問題與解答.html

Q: CSS 屬性是否區分大小寫？git
```
```
 ul {
     MaRGin: 10px;
 }
 ```
複製代碼
```
A: 不區分。 HTML，CSS都對大小寫不敏感，但爲了更好的可讀性和團隊協做通常都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。github
Q: 行內(inline)元素設置margin-top和margin-bottom 是否起做用？shell

A: 不起做用。(答案是起做用，我的以爲不對。)瀏覽器

html 裏的元素分爲替換元素（replaced element）和非替換元素（non-replaced element）。bash
- 替換元素是指用做爲其餘內容佔位符的一個元素。最典型的就是img，它只是指向一個圖像文件。以及大多數表單元素也是替換，例如input等。
- 非替換元素是指內容包含在文檔中的元素。例如，若是一個段落的文本內容都放在該元素自己以內，則這個段落就是一個非替換元素。
討論margin-top和margin-bottom對行內元素是否起做用，則要對行內替換元素和行內非替換元素分別討論。app

首先咱們應該明確外邊距能夠應用到行內元素，規範中是容許的，不過因爲在向一個行內非替換元素應用外邊距，對行高(line-height)沒有任何影響。因爲外邊距其實是透明的。因此對聲明margin-top和margin-bottom沒有任何視覺效果。其緣由就在於行內非替換元素的外邊距不會改變一個元素的行高。而對於行內非替換元素的左右邊距則不是這樣，是有影響的。less

而爲替換元素設置的外邊距會影響行高，可能會使行高增長或減小，這取決於上下外邊距的值。行內替換元素的左右邊距與非替換元素的左右邊距的做用同樣。來看看demo:dom

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

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

codepen.io/paddingme/p…
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 (<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.
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>
複製代碼
```
Q:translate()方法能移動一個元素在z軸上的位置？

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

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。

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。

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。

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。

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。

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。

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。

Q:#example位置如何變化：

<p id="example">Hello</p>
複製代碼

#example {margin-bottom: -5px;}
複製代碼

A: 向上移動5px。

Q: #example位置如何變化：

<p id="example">Hello</p>
複製代碼

#example {margin-left: -5px;}
複製代碼

A: 向左移動5px。

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

<div id="test1">
    <span id="test2"></span>
</div>
複製代碼

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

A: 不會

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

<div id="test1">
    <span id="test2"></span>
</div>
複製代碼

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

A: 會被下載。

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

<div id="test1">
    <span id="test2"></span>
</div>
複製代碼

#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 是否造成新的塊級格式化上下文？
```
<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。
Q: screen關鍵詞是指設備物理屏幕的大小仍是指瀏覽器的視窗？
```
@media only screen and (max-width: 1024px) {margin: 0;}
複製代碼
```
A: 瀏覽器視窗

知識點總結

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

關於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.
瀏覽器如何渲染，能夠查閱以下文章：
BFC( block formatting contexts ) 塊級格式上下文
margin，padding相關的知識能夠參考查閱《CSS權威指南》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。