本篇內(nèi)容主要講解“web前端中CSS的筆試題有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“web前端中CSS的筆試題有哪些”吧!

做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠(chéng)為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)建站把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

1、Q: CSS 屬性是否區(qū)分大小寫？

 ```
 ul {
     MaRGin: 10px;
 }
 ```

A: 不區(qū)分。 HTML，CSS都對(duì)大小寫不敏感，但為了更好的可讀性和團(tuán)隊(duì)協(xié)作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。

2、Q: 行內(nèi)(inline)元素 設(shè)置margin-top和margin-bottom 是否起作用？

A: 不起作用。(答案是起作用，個(gè)人覺得不對(duì)。)

html 里的元素分為替換元素（replaced element）和非替換元素（non-replaced element）。

• 替換元素是指用作為其他內(nèi)容占位符的一個(gè)元素。最典型的就是img，它只是指向一個(gè)圖像文件。以及大多數(shù)表單元素也是替換，例如input等。

• 非替換元素是指內(nèi)容包含在文檔中的元素。例如，如果一個(gè)段落的文本內(nèi)容都放在該元素本身之內(nèi)，則這個(gè)段落就是一個(gè)非替換元素。

討論margin-top和margin-bottom對(duì)行內(nèi)元素是否起作用，則要對(duì)行內(nèi)替換元素和行內(nèi)非替換元素分別討論。

首先我們應(yīng)該明確外邊距可以應(yīng)用到行內(nèi)元素，規(guī)范中是允許的，不過由于在向一個(gè)行內(nèi)非替換元素應(yīng)用外邊距，對(duì)行高(line-height)沒有任何影響。由于外邊距實(shí)際上是透明的。所以對(duì)聲明margin-top和margin-bottom沒有任何視覺效果。其原因就在于行內(nèi)非替換元素的外邊距不會(huì)改變一個(gè)元素的行高。而對(duì)于行內(nèi)非替換元素的左右邊距則不是這樣，是有影響的。

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

3、Q: 對(duì)內(nèi)聯(lián)元素設(shè)置padding-top和padding-bottom是否會(huì)增加它的高度？

（原題是Does setting padding-top and padding-bottom on an inline element add to its dimensions?）

A: 答案是不會(huì)。同上題比較糾結(jié)，不太明白這里的 dimensions指的是到底是什么意思？放置一邊，咱們來分析下。對(duì)于行內(nèi)元素，設(shè)置左右內(nèi)邊距，左右內(nèi)邊距將是可見的。而設(shè)置上下內(nèi)邊距，設(shè)置背景顏色后可以看見內(nèi)邊距區(qū)域有增加，對(duì)于行內(nèi)非替換元素，不會(huì)影響其行高，不會(huì)撐開父元素。而對(duì)于替換元素，則撐開了父元素?？聪耫emo，更好的理解下：

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

4、Q: 設(shè)置p的font-size:10rem，當(dāng)用戶重置或拖曳瀏覽器窗口時(shí)，文本大小是否會(huì)也隨著變化？

A: 不會(huì)。

rem是以html根元素中font-size的大小為基準(zhǔn)的相對(duì)度量單位，文本的大小不會(huì)隨著窗口的大小改變而改變。

5、Q: 偽類選擇器:checked將作用與input類型為radio或者checkbox,不會(huì)作用于option。

A: 不對(duì)。

偽類選擇器checked的定義很明顯:

The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (in a ) 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 中指的是同一個(gè)元素嗎？的答案：

單指創(chuàng)建的根。這個(gè)根可能不是 html ，如果是片段html，沒有創(chuàng)建根，則為片段的根。把這下面 URL 打到支持 data URL 的瀏覽器看看（Firefox, Chrome, Safari, Opera），可見一斑：

data:application/xhtml+xml,

7、Q:translate()方法能移動(dòng)一個(gè)元素在z軸上的位置？

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

8、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

ul {color:red;}
li {color:blue;}

A: blue。

9、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

ul {color:red;}
#must-buy {color:blue;}

A: blue。

10、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

A: blue。

11、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

A: blue。

12、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

A: blue。

13、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

A: blue。

14、Q: 如下代碼中文本“Sausage”的顏色是?

    
Milk
    Sausage

#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位置如何變化：

Hello

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

A: 向上移動(dòng)5px。

16、Q: #example位置如何變化：

Hello

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

A: 向左移動(dòng)5px。

17、#i-am-useless 會(huì)被瀏覽器加載嗎？

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

A: 不會(huì)

18、mypic.jpg 會(huì)被瀏覽器加載嗎？

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

A: 會(huì)被下載。

19、mypic.jpg 會(huì)被瀏覽器加載嗎？

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

A: 不會(huì)被下載。

20、Q: only 選擇器的作用是？

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

A：停止舊版本瀏覽器解析選擇器的其余部分。

only 用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來對(duì)那些不支持Media Query 但卻支持Media Type 的設(shè)備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only 不存在；對(duì)于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會(huì)不讀了樣式，因?yàn)槠湎茸xonly 而不是screen；另外不支持Media Qqueries 的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。

21、Q:overfloa:hidden 是否形成新的塊級(jí)格式化上下文？

    
I am floated
    
So am I

div {overflow: hidden;}
p {float: left;}

A：會(huì)形成。

會(huì)觸發(fā)BFC的條件有：

• float的值不為none。

• overflow的值不為visible。

• display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。

• position的值不為relative 和static。

22、Q: screen關(guān)鍵詞是指設(shè)備物理屏幕的大小還是指瀏覽器的視窗？

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

A: 瀏覽器視窗

到此，相信大家對(duì)“web前端中CSS的筆試題有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前名稱：web前端中CSS的筆試題有哪些
文章位置：http://weahome.cn/article/pipgcj.html

其他資訊

• Linux未找到的命令 linux未找到命令但是安裝成功
• 包含linux調(diào)出后臺(tái)命令的詞條
• 怎么修路由器 怎么修路由器紅頂
• 帝國(guó)cms擴(kuò)展變量刷新 帝國(guó)cms生成慢
• linux切換到純命令行 linux系統(tǒng)切換到命令行

• 網(wǎng)站制作

  綿陽網(wǎng)站制作公司廣安網(wǎng)站制作公司梓潼網(wǎng)站制作公司成都網(wǎng)站制作定制網(wǎng)站制作成都營(yíng)銷網(wǎng)站制作

• 企業(yè)服務(wù)

  分類目錄免費(fèi)建站模板網(wǎng)站免費(fèi)收錄網(wǎng)絡(luò)文化經(jīng)營(yíng)許可證代理記賬互聯(lián)網(wǎng)信息經(jīng)營(yíng)許可證

• 網(wǎng)站建設(shè)

  成都定制網(wǎng)站建設(shè)網(wǎng)站建設(shè)公司成都網(wǎng)站建設(shè)網(wǎng)站建設(shè)公司成都模版網(wǎng)站建設(shè)品牌網(wǎng)站建設(shè)公司

• 服務(wù)器托管

  成都光華機(jī)房綿陽服務(wù)器托管成都機(jī)柜租用資陽天府云計(jì)算中心棕樹服務(wù)器托管重慶移動(dòng)機(jī)房托管

全國(guó)免費(fèi)咨詢:

400-028-6601

業(yè)務(wù)咨詢：028-86922220 / 13518219792

節(jié)假值班：18980820575 / 13518219792

聯(lián)系地址：成都市太升南路288號(hào)錦天國(guó)際A幢1002號(hào)

Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 渝ICP備2021005571號(hào)

友情鏈接:： 成都網(wǎng)站建設(shè) 重慶網(wǎng)站建設(shè) 四川網(wǎng)站建設(shè) 重慶建設(shè)網(wǎng)站 移動(dòng)服務(wù)器托管 成都服務(wù)器托管 云服務(wù)器 廣告設(shè)計(jì)制作 重慶網(wǎng)頁設(shè)計(jì) 重慶做網(wǎng)站 重慶網(wǎng)站制作 重慶網(wǎng)站建設(shè) 重慶網(wǎng)站公司 渝中網(wǎng)站制作 重慶網(wǎng)站設(shè)計(jì)

• 在線咨詢
• 電話咨詢
• QQ咨詢
• 預(yù)約顧問

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部

<dfn id="su08e"><td id="su08e"></td></dfn>