1 . CSS 屬性是否區(qū)分大小寫？
答：不區(qū)分剥悟。 HTML灵寺，CSS都對大小寫不敏感，但為了更好的可讀性和團(tuán)隊(duì)協(xié)作一般都小寫区岗，而在XHTML 中元素名稱和屬性是必須小寫的略板。
2 . 行內(nèi)(inline)元素 設(shè)置margin-top和margin-bottom 是否起作用？padding-top和padding-bottom是否會(huì)增加它的高度慈缔？
答：行內(nèi)元素又分為替換元素（replaced element）和非替換元素（non-replaced element）叮称。
- 替換元素: 是指用作為其他內(nèi)容占位符的一個(gè)元素。如： img藐鹤、input 等起作用;
- 非替換元素:是指內(nèi)容包含在文檔中的元素 如：span等不起作用瓤檐；
3 . 設(shè)置p的font-size:10rem，當(dāng)用戶重置或拖曳瀏覽器窗口時(shí)娱节，文本大小是否會(huì)也隨著變化距帅？
答：rem是以html根元素中font-size的大小為基準(zhǔn)的相對度量單位，文本的大小不會(huì)隨著窗口的大小改變而改變括堤。
4 . translate()方法能移動(dòng)一個(gè)元素在z軸上的位置碌秸？
答：不能。translate()方法只能改變x軸悄窃，y軸上的位移讥电。
5 . only 選擇器的作用是？ @media only screen and (max-width: 1024px) {margin: 0;}
答：停止舊版本瀏覽器解析選擇器的其余部分轧抗。
only 用來定某種特定的媒體類型恩敌，可以用來排除不支持媒體查詢的瀏覽器。
其實(shí)only很多時(shí)候是用來對那些不支持Media Query 但卻支持Media Type 的設(shè)備隱藏樣式表的横媚。
其主要有：支持媒體特性（Media Queries）的設(shè)備纠炮，正常調(diào)用樣式，此時(shí)就當(dāng)only 不存在灯蝴；
對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備恢口，這樣就會(huì)不讀了樣式，因?yàn)槠湎茸xonly 而不是screen穷躁；
另外不支持Media Qqueries 的瀏覽器耕肩，不論是否支持only，樣式都不會(huì)被采用。
6 . 瀏覽器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ī)則和元素。
7 . display:none 和visibilty:hidden的區(qū)別：
答：display:none和visibility:hidden都是把網(wǎng)頁上某個(gè)元素隱藏起來的功能竖螃，
但兩者有所區(qū)別淑廊， visibility:hidden屬性會(huì)使對象不可見逗余，但該對象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到）特咆，
等于留出了一塊空白區(qū)域，而display:none`屬性會(huì)使這個(gè)對象徹底消失（看不見也摸不到）
8 . 請描述 BFC(Block Formatting Context) 及其如何工作录粱。：
答：浮動(dòng)元素和絕對定位元素腻格，非塊級(jí)盒子的塊級(jí)容器
（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子啥繁，
都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）
會(huì)觸發(fā)BFC的條件有：
- float的值不為none菜职。
- overflow的值不為visible。
- display的值為table-cell, table-caption, inline-block 中的任何一個(gè)旗闽。
- position的值不為relative 和static酬核。
折疊的結(jié)果：
- 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值适室。
- 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)嫡意，折疊結(jié)果是兩者絕對值的較大值。
- 兩個(gè)外邊距一正一負(fù)時(shí)捣辆，折疊結(jié)果是兩者的相加的和蔬螟。
9 . 談?wù)剺邮降膬?yōu)先級(jí)
優(yōu)先級(jí)逐級(jí)增加
- 0.元素(類型)選擇器 （h1） 和 偽元素選擇器 （:before）
- 1.類選擇器（.demo）屬性選擇器（[type="radio"]）
- 2.ID選擇器（#demo）
- 內(nèi)聯(lián)樣式
當(dāng)在一個(gè)樣式聲明上使用 !important規(guī)則時(shí)，該樣式聲明會(huì)覆蓋CSS中任何其他的聲明汽畴。
一些經(jīng)驗(yàn)法則：
- Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important
- Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
- Never 永遠(yuǎn)不要在你的插件中使用 !important
- Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來解決問題而不是 !important
10 . 了解過FOUC嗎旧巾？如何解決FOUC
答：Flash of Unstyled Content (FOUC) 文檔樣式短暫失效
只需要在文檔的head元素中添加一個(gè)link元素或者添加script元素就可以防止FOUC的發(fā)生.
link元素解決方案
<head>
<title>My Page</title>
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” mce_href=”print.css”>
<style type=”text/css” media=”screen”>@import “style.css”;</style>
</head>
script元素解決方案
<head>
<title>My Page</title>
<script type=”text/javascript”> </script>
<style type=”text/css” media=”screen”>@import “style.css”;</style>
</head>
