web前端中CSS的筆試題有哪些

本篇內容主要講解“web前端中CSS的筆試題有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“web前端中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沒有任何視覺效果。其原因就在于行內非替換元素的外邊距不會改變一個元素的行高。而對于行內非替換元素的左右邊距則不是這樣，是有影響的。

而為替換元素設置的外邊距會影響行高，可能會使行高增加或減少，這取決于上下外邊距的值。行內替換元素的左右邊距與非替換元素的左右邊距的作用一樣。

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: 瀏覽器視窗

到此，相信大家對“web前端中CSS的筆試題有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！