http://davidshariff.com/quiz/ 做了下這里面前端開發面試的題，發現有些不會，所以在此做個整理以供自己學習，參考，總結。
1.問: CSS屬性是否區分大小寫？
ul {
MaRGin: 10px;
}
答：不區分。（HTML, CSS都不區分，但為了更好的可讀性和團隊協作，一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。）
2.問：對行內元素設置margin-top 和margin-bottom是否起作用
答：不起作用。（需要注意行內元素的替換元素img、input，他們是行內元素，但是可以為其設置寬高，並且margin屬性也是對其起作用的，有着類似於Inline-block的行為）。看具體效果：
<style> div { width: 500px; height: 500px; margin-top: 100px; margin-left: 100px; background: lightblue; } span { margin: 100px; } img { margin: 100px; } </style> </head> <body class="claro"> <div class="test_wrap"> <span> 我是行內元素，設置margin看是否對我起作用 </span> <img src="" alt="我是行內替換元素，margin-top,margin-bottom對我起作用"> </div> </body>
3.問：對內聯元素設置padding-top和padding-bottom是否會增加它的高度
答：不會。同上題，要注意行內元素的替換元素，img設置padding-top/bottom是會起作用的。
4.問：如果設置<p>的font-size: 10rem;那么當用戶重置或拖拽瀏覽器窗口時，它的文本會不會受到影響？
答：不會。
rem是css3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
5.問: 偽類選擇器:checked將作用與input類型為radio或者checkbox, 不會作用於option？
答：不對。
可以作用於option，試了下感覺並沒有什么用，雖然能選中，但是這個不能改變其中的屬性。
<style> option:checked { color: red; } input:checked { background: red; } </style> <div> <select> <option>Volvo</option> <option selected="selected">Saab</option> <option>Mercedes</option> <option>Audi</option> </select> <br> <br> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </div>
6.問: 在HTML文本中，偽類:root總是指向html元素？
答：是。
7.問:translate()方法能移動一個元素在z軸上的位置？
答：不能。它只能移動x,y軸的位置。translate3d可以。
8-14.這六個題都是在考css選擇器的優先級，看下14題：
問：如下代碼中文本“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;
}
答：red
:nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 n 個子元素的每個元素.
:nth-last-of-type(n) 選擇器匹配屬於父元素的特定類型的第 n 個子元素的每個元素，從最后一個子元素開始計數。
15.
html:
<p id="example">Hello</p>
css:
#example {
margin-bottom: -5px;
}
問：#example的位置會發什么什么？
答：所有帶id為example的元素的位置都會向上移動5px.(一般id不取重復，如果真的這樣設置了就和class效果一樣）
16.省略。。。
17-21.公用一個例子：
<div id="test1"> <span id="test2"></span> </div>
17.問：#i-am-useless 會被瀏覽器加載嗎？
#i-am-useless {background-image: url('mypic.jpg');}
答：不會。
18.問：mypic.jpg 會被瀏覽器加載嗎？
#test2 {
background-image: url('mypic.jpg');
display: none;
}
答：會。
19.問：mypic.jpg 會被瀏覽器加載嗎？
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}
答：會。
20.問：mypic.jpg 會被瀏覽器加載嗎？
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}
答：不會。
21.問：mypic.jpg 會被瀏覽器加載嗎？
#test1 {
visibility: hidden;
}
#test2 {
background-image: url('mypic.jpg');
display: none;
}
答：會.
22-23.
css:
@media only screen and (max-width: 1024px) {
margin: 0;
}
22.問：only選擇器的作用是？
答：停止舊版本瀏覽器解析選擇器的其余部分。
only 用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query 但卻支持Media Type 的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only 不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，因為其先讀only 而不是screen；另外不支持Media Qqueries 的瀏覽器，不論是否支持only，樣式都不會被采用。
23.問：screen關鍵詞是指設備的物理屏幕大小還是指瀏覽器的視窗。
答：瀏覽器的視窗。
24.問:overfloa:hidden 是否形成新的塊級格式化上下文？
答：會。
會觸發BFC的條件有：
- float的值不為none。
- overflow的值不為visible。
- display的值為table-cell, table-caption, inline-block 中的任何一個。
- position的值不為relative 和static。
- 根元素。
總結：
一.css選擇器，優先級知識點考的挺多。如何計算優先級，參考http://www.cnblogs.com/wangfupeng1988/p/4285251.html 這篇文章引入的一個概念：特指度。特指度表示一個css選擇器表達式的重要程度，可以通過一個公式來計算出一個數值，數越大，越重要。
這個計算叫做“I-C-E”計算公式，
- I——Id；
- C——Class；
- E——Element；
即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。
舉例：
| CSS選擇器表達式 |
特指度計算結果 |
| p |
1 |
| p.large |
11 |
| P#large |
101 |
| div p#large |
102 |
| div p#large ul.list |
113 |
| div p#large ul.list li |
114
|
注意：!important優先級最高，高於上面一切。* 選擇器最低，低於一切。
瀏覽器CSS匹配順序：
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。
二：display:none 和visibilty:hidden的區別。
兩者都是將某個元素隱藏起來，區別是：display:none會使對象徹底消失，不占據空間；但是visibility:hidden所占的空間還在，留了一塊空白區域。（不過上述例子，關於img加載的，還有些不是很懂 第18問，為什么display:none還是要加載圖片，第20問，卻沒有加載圖片）
三：瀏覽器渲染，這個自己要着重學習下：
四：BFC 塊級格式化上下文
參考：