1哲银、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧 即CSS Sprite闰挡，也有人叫它CSS精靈涕蜂，是一種CSS圖像合并技術(shù)馒稍，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上潮孽，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分。
優(yōu)點(diǎn):
減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)
可以合并多數(shù)背景圖片和小圖標(biāo)筷黔，方便在任何位置使用往史，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)佛舱，降低服務(wù)器壓力椎例，同時(shí)提高了頁(yè)面的加載速度，節(jié)約服務(wù)器的流量请祖。
提高頁(yè)面的加載速度
sprite 技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多 sprite 時(shí)订歪，單張圖片的加載時(shí)間)。由所需圖片拼成的一張 GIF 圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小肆捕。單張的 GIF 只有相關(guān)的一個(gè)色表刷晋，而單獨(dú)分割的每一張 GIF 都有自己的一個(gè)色表，這就增加了總體的大小慎陵。因此眼虱，單獨(dú)的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來(lái)的圖片總尺寸小席纽。
減少鼠標(biāo)滑過(guò)的一些bug
IE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過(guò)即a:hover中的背景圖片捏悬，所以，如果使用多張圖片润梯，鼠標(biāo)滑過(guò)會(huì)出現(xiàn)閃白的現(xiàn)象过牙。使用CSS雪碧，由于一張圖片即可纺铭，所以不會(huì)出現(xiàn)這種現(xiàn)象寇钉。
缺點(diǎn):
內(nèi)存使用
影響瀏覽器的縮放功能
拼圖維護(hù)比較麻煩
使CSS的編寫變得困難
CSS 雪碧調(diào)用的圖片不能被打印
錯(cuò)誤得使用 Sprites 影響可訪問(wèn)性
2、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
img標(biāo)簽的圖片一般是可變的舶赔，例如網(wǎng)站上的廣告扫倡，用戶頭像，產(chǎn)品介紹顿痪、網(wǎng)頁(yè)介紹镊辕，這些能傳達(dá)更多內(nèi)容的東西。
css背景圖片一般比較少變化蚁袭，除非網(wǎng)頁(yè)改版或者一些樣式需要改版才會(huì)改變征懈。
3、title和 alt屬性分別有什么作用?
title 屬性是在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示揩悄，像是標(biāo)簽批注一類的作用卖哎。title屬性可以用在除了 base，basefont删性，head亏娜，html，meta蹬挺，param维贺，script 和 title 之外的所有標(biāo)簽。
alt 屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息巴帮，它會(huì)直接輸出在原本加載圖片的地方溯泣。alt屬性只能用在img、area和input元素中榕茧。
4垃沦、background: url(abc.png) 0 0 no-repeat;這句話是什么意思
背景圖引用相對(duì)目錄路徑為abc.png的圖片。
backgroun-position：0 0為左上角（背景圖片放置容器位置）用押。
x% y% ( 第一個(gè)值是水平位置肢簿，第二個(gè)值是垂直位置。左上角是 0% 0%蜻拨。右下角是 100% 100%池充。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%缎讼。)
mpx npx (第一個(gè)值是水平位置纵菌，第二個(gè)值是垂直位置。左上角是 0 0休涤。單位是像素 (0px 0px) 或任何其他的 CSS 單位咱圆。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%功氨。)
no-repeat:不重復(fù)序苏。
repeat:重復(fù)
no-repeat:不重復(fù)
repeat-x:僅水平重復(fù)
repeat-y:僅垂直重復(fù)
inherit:繼承自父輩元素。
5捷凄、background-size有什么作用? 兼容性如何? 常用的值是?
background-size 屬性規(guī)定背景圖像的尺寸
常用值:
length設(shè)置背景圖像的高度和寬度忱详。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度跺涤。如果只設(shè)置一個(gè)值匈睁，則第二個(gè)值會(huì)被設(shè)置為 "auto"监透。
percentage以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度航唆，第二個(gè)值設(shè)置高度胀蛮。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"糯钙。
cover把背景圖像擴(kuò)展至足夠大粪狼，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中任岸。
contain把圖像圖像擴(kuò)展至最大尺寸再榄，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
6享潜、如何讓一個(gè)div水平居中困鸥？如何讓圖片水平居中?
div水平居中:margin:0 auto；
圖片水平居中:1剑按、//ie8及以上
display:table-cell;
vertical-align:middle;
2窝革、在內(nèi)層容器內(nèi)加一個(gè)空元素
.item:before{
display:inline-block;
height:100%;
vertical-align:middle;
}
.item2 img{
vertical-align:middle;
}
3、js處理吕座，設(shè)置上下外邊距等高
7虐译、如何設(shè)置元素透明? 兼容性？
opacity:從 0.0 （完全透明）到 1.0（完全不透明）
8吴趴、opacity和 rgba都能設(shè)置透明漆诽，有什么區(qū)別
opacity：一般用于調(diào)整圖片或者模塊的整體不透明度，設(shè)置opacity元素的所有后代元素會(huì)隨著一起具有透明性锣枝。opacity取值0~1之間厢拭。
rgba：設(shè)置顏色的不透明度，一般用于調(diào)整background-color撇叁、color供鸠、box-shadow等的不透明度。Alpha透明度陨闹。取值0~1之間楞捂。
