1. CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
CSS Sprite是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去谷遂，再利用CSS的“background-image”牧嫉，“background- repeat”，“background-position”的組合進行背景定位册着，background-position可以用數(shù)字精確的定位出背景圖片的位置。
作用：
a. 很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能丽惶。
b. 減少圖片的字節(jié)。
c. 解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾爬立，只需對一張集合的圖片上命名就可以了钾唬，不需要對每一個小元素進行命名，從而提高了網(wǎng)頁的制作效率侠驯。
d. 更換風(fēng)格方便抡秆，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風(fēng)格就可以改變吟策。維護起來更加方便儒士。
2. img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別?
- 如果一張圖片是網(wǎng)頁內(nèi)容的一部分，就該用
<img>檩坚，否則建議用CSS背景圖着撩。 - 頁面上固定不變或者不可點的，用背景圖匾委。對于可變的或者可點擊的就用img圖片拖叙。
3. title 和 alt屬性分別有什么作用？
- title屬性：title是為該屬性的元素提供建議性的信息赂乐，它可以用在除了base薯鳍，basefont，head挨措，html挖滤，meta崩溪，param，script和title之外的所有標(biāo)簽壶辜。
當(dāng)鼠標(biāo)放置在選定元素時悯舟，大部分可視化瀏覽器會顯示title的提示信息。
title屬性有一個很好的用途砸民，即為鏈接添加描述性文字抵怎，特別是當(dāng)連接本身并不是十分清楚的表達了鏈接的目的。這樣就使得訪問者知道那些鏈接將會帶他們到什么地方岭参，他們就不會加載一個可能完全不感興趣的頁面反惕。另外一個潛在的應(yīng)用就是為圖像提供額外的說明信息，比如日期或者其他非本質(zhì)的信息演侯。 - alt屬性：alt屬性只能用在img姿染、area和input元素中，指定了替代文本秒际，用于在圖像無法顯示或者用戶禁用圖像顯示時悬赏，代替圖像顯示在瀏覽器中的內(nèi)容。
4. background: url(abc.png) 0 0 no-repeat;這句話是什么意思娄徊？
設(shè)置背景圖片地址為abc.png闽颇，X軸方向偏移為0，Y軸方向上偏移為0寄锐，不重復(fù)兵多。
5. background-size有什么作用? 兼容性如何? 常用的值是?
- background-size屬性規(guī)定背景圖像的尺寸。
- 在IE8以上的瀏覽器被兼容
- 值
length：設(shè)置背景圖像的高度和寬度橄仆。第一個值設(shè)置寬度剩膘，第二個值設(shè)置高度。如果只設(shè)置一個值盆顾，則第二個值會被設(shè)置為 "auto"怠褐。
percentage：以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度您宪，第二個值設(shè)置高度惫搏。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"蚕涤。
cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域铣猩。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中揖铜。
contain：把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域达皿。
cover和contain既有相同點又有不同點天吓。相同點：圖片都是等比縮放贿肩。不同點：cover是鋪滿整個顯示區(qū)域，不會留下空白龄寞，如果顯示比例和顯示區(qū)域的比例相差很大背景圖像的某些部分不會顯示汰规；contain正好相反，它是按照某一邊來覆蓋的顯示區(qū)域物邑，有可能會留空白溜哮。
6.如何讓一個div水平居中？如何讓圖片水平居中色解？
div水平居中：
當(dāng)div固定寬度時茂嗓，可直接設(shè)置margin:0 auto;。
當(dāng)div不是固定寬度時科阎，可以將div設(shè)置為display:inline-block;述吸，然后對父元素設(shè)置text-align:center;；或者div設(shè)置display:table;锣笨，然后設(shè)置：margin:0 auto;蝌矛。
圖片水平居中：圖片是行內(nèi)元素，直接在父元素中設(shè)置text-align:center;就可以完成居中错英。
7. 如何設(shè)置元素透明? 兼容性入撒？
通過opacity: 0;不透明度這個屬性來設(shè)置，它的屬性值1表示完全不透明明走趋，0表示完全透明衅金。
可以使用opacity和設(shè)置alpha來設(shè)置一個元素的透明度，若其中文字需要透明簿煌，則使用opacity氮唯，對于不支持該屬性的瀏覽器，使用fliter:opacity({0~100})來設(shè)置姨伟，對于不設(shè)置文字透明的惩琉，則使用rgba的方式來設(shè)置。
8. opacity 和 rgba都能設(shè)置透明夺荒，有什么區(qū)別瞒渠？
- opacity作用于元素以及元素內(nèi)的所有內(nèi)容的透明度，而rgba()只作用于元素的顏色或其背景色技扼。
- opacity會繼承父元素的 opacity 屬性伍玖，而rgba()設(shè)置的元素的后代元素不會繼承透明性,只是針對自己本身有效，無法使內(nèi)部的所有元素透明剿吻。
版權(quán)歸本人及饑人谷所有窍箍，轉(zhuǎn)載請注明出處。
