資訊專欄INFORMATION COLUMN
摘要：部分問題與解答屬性是否區(qū)分大小寫不區(qū)分。對(duì)于行內(nèi)元素，設(shè)置左右內(nèi)邊距，左右內(nèi)邊距將是可見的。而對(duì)于替換元素，則撐開了父元素。如下代碼中文本的顏色是。
Tip：這是http://davidshariff.com/quiz/給出的web前端開發(fā)測試題,的CSS部分,我根據(jù)自己的理解給出的答案，歡迎拍磚，一起刷題==>Github 倉庫地址。
Front End Web Development Quiz CSS 部分問題與解答
Q: CSS 屬性是否區(qū)分大小寫？
ul {
MaRGin: 10px;
}
A: 不區(qū)分。
HTML，CSS都對(duì)大小寫不敏感，但為了更好的可讀性和團(tuán)隊(duì)協(xié)作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。
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)替換元素的左右邊距與非替換元素的左右邊距的作用一樣。來看看demo:
http://codepen.io/paddingme/pen/JwCDF
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
Q: 設(shè)置p的font-size:10rem，當(dāng)用戶重置或拖曳瀏覽器窗口時(shí)，文本大小是否會(huì)也隨著變化？
A: 不會(huì)。
rem是以html根元素中font-size的大小為基準(zhǔn)的相對(duì)度量單位，文本的大小不會(huì)隨著窗口的大小改變而改變。
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.
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,
Q:translate()方法能移動(dòng)一個(gè)元素在z軸上的位置？
A: 不能。translate()方法只能改變x軸，y軸上的位移。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q: 如下代碼中文本“Sausage”的顏色是?
A: blue。
Q:#example位置如何變化：
Hello
#example {margin-bottom: -5px;}
A: 向上移動(dòng)5px。
Q: #example位置如何變化：
Hello
#example {margin-left: -5px;}
A: 想做移動(dòng)5px。
#i-am-useless 會(huì)被瀏覽器加載嗎？
#i-am-useless {background-image: url("mypic.jpg");}
A: 不會(huì)
mypic.jpg 會(huì)被瀏覽器加載嗎？
#test2 { background-image: url("mypic.jpg"); display: none; }
A: 會(huì)被下載。
mypic.jpg 會(huì)被瀏覽器加載嗎？
#test1 { display: none; } #test2 { background-image: url("mypic.jpg"); visibility: hidden; }
A: 不會(huì)被下載。
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ì)被采用。
Q:overfloa:hidden 是否形成新的塊級(jí)格式化上下文？
div {overflow: hidden;} p {float: left;}I am floated
So am I
A：會(huì)形成。
會(huì)觸發(fā)BFC的條件有：
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。
position的值不為relative 和static。
Q: screen關(guān)鍵詞是指設(shè)備物理屏幕的大小還是指瀏覽器的視窗？
@media only screen and (max-width: 1024px) {margin: 0;}
A: 瀏覽器視窗
知識(shí)點(diǎn)總結(jié)：tips:根據(jù)以上考點(diǎn)總結(jié)下如下知識(shí)點(diǎn)，后期會(huì)寫文章進(jìn)行總結(jié)，這里只挑出重點(diǎn)進(jìn)行解析。
關(guān)于CSS選擇器以及優(yōu)先級(jí)的知識(shí)可查閱如下文章：
CSS 選擇器參考手冊(cè)
CSS選擇器筆記
高級(jí)CSS樣式選擇器
征服高級(jí)CSS選擇器
詳解CSS選擇器、優(yōu)先級(jí)與匹配原理
優(yōu)先級(jí)
牢記 31 種 CSS 選擇器用法
如何計(jì)算優(yōu)先級(jí)：
那么你如何計(jì)算指定選擇器的優(yōu)先級(jí)？如果你考慮到將優(yōu)先級(jí)表示為用逗號(hào)隔開的四個(gè)數(shù)字就會(huì)相當(dāng)簡單，比如：1, 1, 1, 1 或0, 2, 0, 1
第一個(gè)數(shù)字(a)通常就是0，除非在標(biāo)簽上使用style屬性；
第二個(gè)數(shù)字(b)是該選擇器上的id的數(shù)量的總和；
第三個(gè)數(shù)字(c)是用在該選擇器上的其它屬性選擇器和偽類的總和。這里包括class (.example) 和屬性選擇器(比如 li[id=red])；
第四個(gè)數(shù)字(d)計(jì)算元素(就像table、p、div等等)和偽元素(就像:first-line等)；
通用選擇器(*)是0優(yōu)先級(jí)；
如果兩個(gè)選擇器有同樣的優(yōu)先級(jí)，在樣式表中后面的那個(gè)起作用。
瀏覽器CSS匹配順序：
瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class="red"的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(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)頁上某個(gè)元素隱藏起來的功能，但兩者有所區(qū)別，經(jīng)過親自實(shí)驗(yàn)，我發(fā)現(xiàn)使用`` visibility:hidden屬性會(huì)使對(duì)象不可見，但該對(duì)象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到），等于留出了一塊空白區(qū)域，而display:none`屬性會(huì)使這個(gè)對(duì)象徹底消失（看不見也摸不到）
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:
test | Appropriate style in this tag | test
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.
瀏覽器如何渲染，可以查閱如下文章：
瀏覽器的渲染原理簡介
專題：瀏覽器:渲染重繪、重排兩三事
瀏覽器加載和渲染HTML的順序以及Gzip的問題
從FE的角度上再看輸入url后都發(fā)生了什么
BFC( block formatting contexts ) 塊級(jí)格式上下文
深入理解BFC和Margin Collapse
CSS布局中一個(gè)簡單的應(yīng)用BFC的例子
理解BFC(Block Formatting Context)
margin，padding相關(guān)的知識(shí)可以參考查閱《CSS權(quán)威指南》
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110939.html
摘要：標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。中元素表現(xiàn)為一個(gè)超鏈接，支持任何行內(nèi)元素和塊級(jí)元素。 Tip：這是http://davidshariff.com/quiz/給出的前端開發(fā)測試題的HTML部分,我根據(jù)自己的理解給出的答案，歡迎拍磚，一起刷題==>Github 倉庫地址。 Q: 是正確的HTML5標(biāo)簽嗎？ A:...
摘要：點(diǎn)擊此處了解網(wǎng)易微專業(yè)課程前段時(shí)間報(bào)名參加了網(wǎng)易云課堂微專業(yè)課程前端開發(fā)工程師，這周課程開始了，正式學(xué)習(xí)。以下內(nèi)容為前端開發(fā)工程師微專業(yè)的第一門課網(wǎng)頁制作的課程學(xué)習(xí)指南，學(xué)習(xí)視頻課程后自己整理的學(xué)習(xí)筆記，會(huì)持續(xù)更新內(nèi)容。 何為網(wǎng)易微專業(yè)？ 微專業(yè)是由網(wǎng)易云課堂聯(lián)合各領(lǐng)域知名專家，以就業(yè)為導(dǎo)向，精心打造的職業(yè)培訓(xùn)方案。按要求完成學(xué)習(xí)，考試通過可獲得專業(yè)認(rèn)定證書，令你求職或加薪多一份獨(dú)特優(yōu)...
摘要：點(diǎn)擊此處了解網(wǎng)易微專業(yè)課程前段時(shí)間報(bào)名參加了網(wǎng)易云課堂微專業(yè)課程前端開發(fā)工程師，這周課程開始了，正式學(xué)習(xí)。以下內(nèi)容為前端開發(fā)工程師微專業(yè)的第一門課網(wǎng)頁制作的課程學(xué)習(xí)指南，學(xué)習(xí)視頻課程后自己整理的學(xué)習(xí)筆記，會(huì)持續(xù)更新內(nèi)容。 何為網(wǎng)易微專業(yè)？ 微專業(yè)是由網(wǎng)易云課堂聯(lián)合各領(lǐng)域知名專家，以就業(yè)為導(dǎo)向，精心打造的職業(yè)培訓(xùn)方案。按要求完成學(xué)習(xí)，考試通過可獲得專業(yè)認(rèn)定證書，令你求職或加薪多一份獨(dú)特優(yōu)...
閱讀 3054·2021-11-22 09:34
閱讀 3645·2021-08-31 09:45
閱讀 3859·2019-08-30 13:57
閱讀 1681·2019-08-29 15:11
閱讀 1687·2019-08-28 18:04
閱讀 3231·2019-08-28 17:59
閱讀 1570·2019-08-26 13:35
閱讀 2195·2019-08-26 10:12
