Front End Web Development Quiz CSS 部分問題與解答
-
Q: CSS 屬性是否區(qū)分大小寫？
ul { MaRGin: 10px; }A: 不區(qū)分。
HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團隊協(xié)作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。
-
Q: 行內(nèi)(inline)元素 設(shè)置
margin-top和margin-bottom是否起作用？A: 不起作用。(答案是起作用，個人覺得不對。)
html 里的元素分為替換元素（replaced element）和非替換元素（non-replaced element）。
- 替換元素是指用作為其他內(nèi)容占位符的一個元素。最典型的就是
img，它只是指向一個圖像文件。以及大多數(shù)表單元素也是替換，例如input等。 - 非替換元素是指內(nèi)容包含在文檔中的元素。例如，如果一個段落的文本內(nèi)容都放在該元素本身之內(nèi)，則這個段落就是一個非替換元素。
討論
margin-top和margin-bottom對行內(nèi)元素是否起作用，則要對行內(nèi)替換元素和行內(nèi)非替換元素分別討論。首先我們應(yīng)該明確外邊距可以應(yīng)用到行內(nèi)元素，規(guī)范中是允許的，不過由于在向一個行內(nèi)非替換元素應(yīng)用外邊距，對行高(line-height)沒有任何影響。由于外邊距實際上是透明的。所以對聲明
margin-top和margin-bottom沒有任何視覺效果。其原因就在于行內(nèi)非替換元素的外邊距不會改變一個元素的行高。而對于行內(nèi)非替換元素的左右邊距則不是這樣，是有影響的。而為替換元素設(shè)置的外邊距會影響行高，可能會使行高增加或減少，這取決于上下外邊距的值。行內(nèi)替換元素的左右邊距與非替換元素的左右邊距的作用一樣。來看看demo:
- 替換元素是指用作為其他內(nèi)容占位符的一個元素。最典型的就是
-
Q: 對內(nèi)聯(lián)元素設(shè)置
padding-top和padding-bottom是否會增加它的高度？（原題是Does setting padding-top and padding-bottom on an inline element add to its dimensions?）A: 答案是不會。同上題比較糾結(jié)，不太明白這里的 dimensions指的是到底是什么意思？放置一邊，咱們來分析下。對于行內(nèi)元素，設(shè)置左右內(nèi)邊距，左右內(nèi)邊距將是可見的。而設(shè)置上下內(nèi)邊距，設(shè)置背景顏色后可以看見內(nèi)邊距區(qū)域有增加，對于行內(nèi)非替換元素，不會影響其行高，不會撐開父元素。而對于替換元素，則撐開了父元素。看下demo，更好的理解下：
-
Q: 設(shè)置
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 中指的是同一個元素嗎？的答案：
單指創(chuàng)建的根。這個根可能不是 html ，如果是片段html，沒有創(chuàng)建根，則為片段的根。把這下面 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 的設(shè)備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時就當only 不存在；對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會不讀了樣式，因為其先讀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：會形成。
會觸發(fā)BFC的條件有：
- float的值不為none。
- overflow的值不為visible。
- display的值為table-cell, table-caption, inline-block 中的任何一個。
- position的值不為relative 和static。
-
Q:
screen關(guān)鍵詞是指設(shè)備物理屏幕的大小還是指瀏覽器的視窗？@media only screen and (max-width: 1024px) {margin: 0;}A: 瀏覽器視窗
知識點總結(jié)：
tips:根據(jù)以上考點總結(jié)下如下知識點，后期會寫文章進行總結(jié)，這里只挑出重點進行解析。
-
關(guān)于CSS選擇器以及優(yōu)先級的知識可查閱如下文章：
-
如何計算優(yōu)先級：
那么你如何計算指定選擇器的優(yōu)先級？如果你考慮到將優(yōu)先級表示為用逗號隔開的四個數(shù)字就會相當簡單，比如：1, 1, 1, 1 或0, 2, 0, 1
* 第一個數(shù)字(a)通常就是0，除非在標簽上使用style屬性；
* 第二個數(shù)字(b)是該選擇器上的id的數(shù)量的總和；
* 第三個數(shù)字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如li[id=red])；
* 第四個數(shù)字(d)計算元素(就像table、p、div等等)和偽元素(就像:first-line等)；
* 通用選擇器(*)是0優(yōu)先級；
* 如果兩個選擇器有同樣的優(yōu)先級，在樣式表中后面的那個起作用。 -
瀏覽器CSS匹配順序：
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如
#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。 -
display:none和visibilty:hidden的區(qū)別：可參考：
- What is the difference between visibility:hidden and display:none?
- display:none和visibility:hidden的區(qū)別！
display:none和visibility:hidden都是把網(wǎng)頁上某個元素隱藏起來的功能，但兩者有所區(qū)別，經(jīng)過親自實驗，我發(fā)現(xiàn)使用`` visibility:hidden屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到），等于留出了一塊空白區(qū)域，而display:none`屬性會使這個對象徹底消失（看不見也摸不到）display:nonemeans 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:nonewould be:test | | test
visibility:hiddenwould be:test |?????| test
In visibility:hidden the tag is rendered, it just isn't seen on the page.
-
瀏覽器如何渲染，可以查閱如下文章：
-
BFC( block formatting contexts ) 塊級格式上下文
- margin，padding相關(guān)的知識可以參考查閱《CSS權(quán)威指南》
