1.CSS 中類(lèi) (classes) 和 ID 的區(qū)別。
1.書(shū)寫(xiě)上的差別：class名用“.”號(hào)開(kāi)頭來(lái)定義，id名用“#”號(hào)開(kāi)頭來(lái)定義； 2.調(diào)用上的區(qū)別：在同一個(gè)html網(wǎng)頁(yè)頁(yè)面中class是可以被多次調(diào)用的（在不同的地方）备埃。而id名作為標(biāo)簽的身份則是唯一的，id在頁(yè)面中只能出現(xiàn)一次褐奴。在js腳本中經(jīng)常會(huì)用到id來(lái)修改一個(gè)標(biāo)簽的屬性 3.id作為元素的標(biāo)簽按脚，用于區(qū)分不同結(jié)構(gòu)和內(nèi)容，而class作為一個(gè)樣式敦冬，它可以應(yīng)用到任何結(jié)構(gòu)和內(nèi)容上辅搬。 4.在布局思路上，一般堅(jiān)持這樣的原則：id是先確定頁(yè)面的結(jié)構(gòu)和內(nèi)容脖旱，然后再為它定義樣式：而class相反伞辛，它先定義好一類(lèi)樣式烂翰，然后再頁(yè)面中根據(jù)需要把類(lèi)樣式應(yīng)用到不同的元素和內(nèi)容上面。 5.在實(shí)際應(yīng)用時(shí)蚤氏，class更多的被應(yīng)用到文字版塊以及頁(yè)面修飾等方面，而id更多地被用來(lái)實(shí)現(xiàn)宏偉布局和設(shè)計(jì)包含塊踊兜，或包含框的樣式竿滨。

2.請(qǐng)問(wèn) “resetting” 和 “normalizing” CSS 之間的區(qū)別？你會(huì)如何選擇捏境，為什么于游？
Normalize 相對(duì)「平和」，注重通用的方案垫言，重置掉該重置的樣式贰剥，保留有用的 user agent 樣式，同時(shí)進(jìn)行一些 bug 的修復(fù)筷频，這點(diǎn)是 reset 所缺乏的蚌成。 Reset 相對(duì)「暴力」，不管你有沒(méi)有用凛捏，統(tǒng)統(tǒng)重置成一樣的效果担忧，且影響的范圍很大，講求跨瀏覽器的一致性坯癣∑渴ⅲ【摘自知乎】 http://jerryzou.com/posts/aboutNormalizeCss/ Normalize.css是一種CSS reset的替代方案。它們的區(qū)別有： 1. Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值示罗，Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式惩猫，強(qiáng)行使得元素有相同的視覺(jué)效果。相比之下蚜点，Normalize.css保持了許多默認(rèn)的瀏覽器樣式轧房。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)禽额，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合锯厢。 2. Normalize.css 修復(fù)了瀏覽器的bug，它修復(fù)了常見(jiàn)的桌面端和移動(dòng)端瀏覽器的bug脯倒。這往往超出了Reset所能做到的范疇实辑。關(guān)于這一點(diǎn)，Normalize.css修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置藻丢、預(yù)格式化文字的font-size問(wèn)題剪撬、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug悠反。 3.Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂 4. Normalize.css 是模塊化的 5. Normalize.css 擁有詳細(xì)的文檔 選擇Normalize.css 残黑，主要是reset.css為幾乎所有的元素施加默認(rèn)樣式馍佑，所以需要對(duì)所有公共的排版元素重新設(shè)置樣式，這是一件很麻煩的工作梨水。

3.請(qǐng)解釋浮動(dòng) (Floats) 及其工作原理拭荤。
答：float屬性定義了元素是否浮動(dòng)及在哪個(gè)方向浮動(dòng)，在CSS中任何元素都可以浮動(dòng)疫诽，且浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框舅世，而不論它本身是何種元素。并且盒子的寬度不在伸展奇徒，而是根據(jù)盒子里面的內(nèi)容的寬度來(lái)確定雏亚。浮動(dòng)屬性會(huì)使得浮動(dòng)的元素脫離文檔流，所以文檔的普通流中的塊框會(huì)表現(xiàn)的像浮動(dòng)框不存在一樣摩钙。

4.描述z-index和疊加上下文是如何形成的罢低。
首先來(lái)看在CSS中疊加上下文形成的原因： 1.負(fù)邊距 margin為負(fù)值時(shí)元素會(huì)依參考線向外偏移。margin-left/margin-top的參考線為左邊的元素/上面的元素（如無(wú)兄弟元素則為父元素的左內(nèi)側(cè)/上內(nèi)側(cè)）,margin-right和margin-bottom的參考線為元素本身的border右側(cè)/border下側(cè)胖笛。一般可以利用負(fù)邊距來(lái)就行布局网持，但沒(méi)有計(jì)算好的話就可能造成元素重疊。堆疊順序由元素在文檔中的先后位置決定匀钧，后出現(xiàn)的會(huì)在上面翎碑。 2.position的relative/absolute/fixed定位 當(dāng)為元素設(shè)置position值為relative/absolute/fixed后，元素發(fā)生的偏移可能產(chǎn)生重疊之斯，且z-index屬性被激活日杈。z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面佑刷。 z-index屬性 z-index只能在position屬性值為relative或absolute或fixed的元素上有效莉擒。 基本原理：z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面瘫絮。 使用相對(duì)性：z-index值只決定同一父元素中的同級(jí)子元素的堆疊順序涨冀。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）。向上追溯找不到含有z-index值的父元素的情況下麦萤，則可以視為自由的z-index元素鹿鳖，它可以與父元素的同級(jí)兄弟定位元素或其他自由的定位元素來(lái)比較z-index的值，決定其堆疊順序壮莹。同級(jí)元素的z-index值如果相同翅帜，則堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面命满。所以如果當(dāng)你發(fā)現(xiàn)一個(gè)z-index值較大的元素被值較小的元素遮擋了涝滴，請(qǐng)先檢查它們之間的dom結(jié)點(diǎn)關(guān)系，多半是因?yàn)槠涓附Y(jié)點(diǎn)含有激活并設(shè)置了z-index值的position定位元素。

5.請(qǐng)描述 BFC(Block Formatting Context) 及其如何工作歼疮。
BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”杂抽。

6.block，inline和inline-block的概念以及區(qū)別
首先這是display中的三個(gè)屬性值韩脏，不是元素指類(lèi)型缩麸，元素類(lèi)型在HTML5之前分為兩種分別是塊級(jí)元素（ block-level elements）和內(nèi)連元素（ inline elements）。但是當(dāng)display的屬性值被設(shè)置為block時(shí)骤素，元素會(huì)以塊級(jí)元素（ block-level elements）顯示匙睹，而設(shè)置為inline時(shí)會(huì)以?xún)?nèi)連元素（ inline elements）顯示。 display:block block元素會(huì)獨(dú)占一行济竹，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下霎槐，block元素寬度自動(dòng)填滿(mǎn)其父元素寬度送浊。 block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行丘跌。 block元素可以設(shè)置margin和padding屬性袭景。 display:inline inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里闭树，直到一行排列不下耸棒，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化与殃。 inline元素設(shè)置width,height屬性無(wú)效。 inline元素的margin和padding屬性幅疼，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果昼接；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果爽篷。 display:inline-block 簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)慢睡。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值漂辐，使其既具有block的寬度高度特性又具有inline的同行特性。即對(duì)inline-block元素可以設(shè)置寬度和高度者吁，同時(shí)inline-block元素又可以在同行進(jìn)行排列窘俺。 備注：屬性為inline-block元素之間的空格或者換行在瀏覽器上會(huì)是一個(gè)空白的間隙。且IE6和7是不支持這個(gè)屬性的，需要通過(guò)display:inline;zoom:1做hack處理瘤泪。

7.列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景赦邻。
首先來(lái)說(shuō)明為什么要清除浮動(dòng)？ 當(dāng)一個(gè)容器中的元素全部浮動(dòng)之后惶洲，由于浮動(dòng)會(huì)讓元素脫離普通文檔流膳犹，所以對(duì)于外面的這個(gè)容器來(lái)講它就沒(méi)有內(nèi)容將它撐開(kāi)，背景設(shè)置無(wú)法顯示须床，margin設(shè)置無(wú)法顯示。 清除浮動(dòng)的方法： 一豺旬、添加新的元素 、應(yīng)用 clear：both族阅； 例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0} 優(yōu)點(diǎn)：簡(jiǎn)單，代碼少愧沟，瀏覽器支持好，不容易出現(xiàn)怪問(wèn)題 缺點(diǎn)是要增加很多無(wú)效布局央渣，但這是清除浮動(dòng)用的比較多的一種方法渴频。
二、父級(jí)div定義overflow：auto或者h(yuǎn)idden <div class="outer over-flow"> //這里添加了一個(gè)class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問(wèn)題 } 原理：必須定義width或zoom:1拔第，同時(shí)不能定義height，使用overflow屬性來(lái)清除浮動(dòng)有一點(diǎn)需要注意蚊俺，overflow屬性共有三個(gè)屬性值：hidden,auto,visible逛万。我們可以使用hiddent和auto值來(lái)清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無(wú)法達(dá)到清除浮動(dòng)效果埋心。 優(yōu)點(diǎn)：簡(jiǎn)單忙上，代碼少，瀏覽器支持好 缺點(diǎn)：使用auto時(shí)內(nèi)部寬高超過(guò)父級(jí)div時(shí)疫粥，會(huì)出現(xiàn)滾動(dòng)條，使用hidden時(shí)會(huì)被隱藏
三梗逮、after 方法 原理：利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果伙狐。其實(shí)現(xiàn)原理類(lèi)似于clear:both方法瞬欧，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽罢防，而這種方法則是利用其偽類(lèi)clear:after在元素內(nèi)部增加一個(gè)類(lèi)似于div.clear的效果艘虎。下面來(lái)看看其具體的使用方法：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div> <div class="div3">3</div>
</div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;} 其中clear:both;指清除所有浮動(dòng)野建；content: ‘.’; display:block;對(duì)于FF/chrome/opera/IE8不能缺少恬叹，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它绽昼，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清除浮動(dòng)硅确。 所以總的來(lái)說(shuō)，推薦使用偽類(lèi)的辦法缭付。

8.請(qǐng)解釋 CSS sprites循未，以及你要如何在頁(yè)面或網(wǎng)站中實(shí)現(xiàn)它。
通常被意譯為“CSS圖像拼合”或“CSS貼圖定位”。 CSS Sprites就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中绣檬，再利用CSS的“background-image”，“background- repeat”钠右，“background-position”的組合進(jìn)行背景定位忘蟹，background-position可以用數(shù)字能精確的定位出背景圖片的位置。 優(yōu)點(diǎn)：當(dāng)頁(yè)面加載時(shí)媚值，不是加載每個(gè)單獨(dú)圖片，而是一次加載整個(gè)組合圖片嚼松。這是一個(gè)了不起的改進(jìn)，它大大減少了HTTP請(qǐng)求的次數(shù)献酗，減輕服務(wù)器壓力坷牛，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢京闰，不會(huì)停頓。 缺點(diǎn)：做圖像拼合的時(shí)候很麻煩俏站。

9.你最喜歡的圖片替換方法是什么痊土，你如何選擇使用。
設(shè)計(jì)師能夠用一張背景圖像替代某元素中的原始文字施戴，以期顯示出更美觀的字體。 實(shí)現(xiàn)方法 一：添加span標(biāo)簽 該技巧的實(shí)現(xiàn)非常簡(jiǎn)單：用span將元素中的文本包圍起來(lái)雷则，然后通過(guò)應(yīng)用CSS樣式隱藏這個(gè)span中的文本肪笋，最后將背景圖像應(yīng)用到該元素之上即可度迂。例如猜揪，對(duì)于下面的這一段HTMl標(biāo)記。 二腊凶、負(fù)text-indent屬性值 設(shè)計(jì)師Mike Rundle提出了一種使用負(fù)text-indent屬性值的方法拴念，將文本推到屏幕的左邊緣之外。雖然該方案的適用性并不廣泛——IE 5.0會(huì)將背景圖片隨文本一起推出瀏覽者的視線范圍——但卻相當(dāng)簡(jiǎn)潔優(yōu)雅政鼠。 缺點(diǎn)：并沒(méi)有解決瀏覽器禁用圖像后空白頁(yè)面的可訪問(wèn)性問(wèn)題；有時(shí)在IE 5.0中無(wú)法使用万搔。
意義：而圖像替換技術(shù)則保留了被替換元素中的原有文本官帘，因此無(wú)論對(duì)何種客戶(hù)而言，理解頁(yè)面內(nèi)容都不成問(wèn)題刽虹。主要是考慮SEO，而非視覺(jué)上的效果。

10.你會(huì)如何解決特定瀏覽器的樣式問(wèn)題膛虫？ 11.如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)钓猬？你會(huì)使用哪些技術(shù)和處理方法？ 12.有哪些的隱藏內(nèi)容的方法 (如果同時(shí)還要保證屏幕閱讀器可用呢)敞曹？ 13.你用過(guò)柵格系統(tǒng) (grid system) 嗎？如果使用過(guò)局齿，你最喜歡哪種橄登？ 14.你用過(guò)媒體查詢(xún)讥此，或針對(duì)移動(dòng)端的布局/CSS 嗎谣妻？ 15.你熟悉 SVG 樣式的書(shū)寫(xiě)嗎？ 16.如何優(yōu)化網(wǎng)頁(yè)的打印樣式蹋半？ 17.在書(shū)寫(xiě)高效 CSS 時(shí)會(huì)有哪些問(wèn)題需要考慮？ 18.使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些染突？請(qǐng)描述你曾經(jīng)使用過(guò)的 CSS 預(yù)處理器的優(yōu)缺點(diǎn)您市。 19.如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)茵休？ 20.請(qǐng)解釋瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器？