搜尋

首頁 >web前端 >css教學 >web前端筆試題庫之CSS篇

web前端筆試題庫之CSS篇

WBOY
WBOY轉載
2022-04-21 14:33:543602瀏覽

之前的文章《web前端筆試題庫之HTML篇》中，我們分享了一些關於HTML的前端面試題。以下這篇文章就接著上一篇，分享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沒有任何視覺效果。原因在於行內非替換元素的外邊距不會改變一個元素的行高。而對於行內非替換元素的左右邊距則不是這樣，是有影響的。

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

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

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 (d11dad02a1f3abd212da65221b2dc681), checkbox (2213c9627c391f00ef101b1592023bcb) or option (5a07473c87748fb1bf73f23d45547ab8in a 221f08282418e2996498697df914ce4e) element that is checked or toggled to an on state. The user can statechange this state by clicking on the element, state. 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(&#39;mypic.jpg&#39;);}

A: 不会

18、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
#test2 {
    background-image: url(&#39;mypic.jpg&#39;);
    display: none;
}

A: 会被下载。

19、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
#test1 {
    display: none;
}
#test2 {
    background-image: url(&#39;mypic.jpg&#39;);
    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: 浏览器视窗

（学习视频分享：css视频教程）

以上是web前端筆試題庫之CSS篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！

firefox css chrome safari css3 html xhtml Static Float select checkbox class this 选择器 样式表 外边距 内边距 display position overflow margin padding 伪类 input table http
陳述：
本文轉載於：github.io。如有侵權，請聯絡admin@php.cn刪除
上一篇：關於 CSS 變數的一些你可能不了解的事！下一篇：關於 CSS 變數的一些你可能不了解的事！

相關文章

看更多