1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
答：因?yàn)槊恳粋€(gè)url都會(huì)發(fā)送一次網(wǎng)絡(luò)請(qǐng)求吨瞎，然而icon本身就不大拾因，所以要把頁面中所有小的icon圖標(biāo)集合在同一張大圖上毅弧，然后用position屬性定位圖片宇挫。作用是減少網(wǎng)絡(luò)請(qǐng)求嵌巷，每次加載的都是緩存绸狐。
- 減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù):可以合并多數(shù)背景圖片和小圖標(biāo)花吟，方便在任何位置使用胞锰，這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片爽茴，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)葬凳，降低服務(wù)器壓力，同時(shí)提高了頁面的加載速度室奏，節(jié)約服務(wù)器的流量火焰。
- 提高頁面的加載速度:sprite 技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多 sprite 時(shí)，單張圖片的加載時(shí)間)胧沫。由所需圖片拼成的一張 GIF 圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小昌简。單張的 GIF 只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張 GIF 都有自己的一個(gè)色表绒怨，這就增加了總體的大小纯赎。因此，單獨(dú)的一張 JPEG 或者 PNG sprite 在大小上非衬硝澹可能比把一張圖分成多張得來的圖片總尺寸小犬金。
- 減少鼠標(biāo)滑過的一些bug:IE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片，所以，如果使用多張圖片晚顷，鼠標(biāo)滑過會(huì)出現(xiàn)閃白的現(xiàn)象峰伙。使用CSS雪碧，由于一張圖片即可音同，所以不會(huì)出現(xiàn)這種現(xiàn)象词爬。
2.img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
答：一般來說，Img標(biāo)簽更多的定義是“活”的東西权均，可變的顿膨。比如在網(wǎng)站中banner廣告肯定是運(yùn)用了img標(biāo)簽來添加圖片，Img會(huì)包裹在a鏈接里面方便用戶點(diǎn)開叽赊。而CSS中的背景圖片就是一些比較固定的圖片恋沃，在網(wǎng)站中存在而不會(huì)變化也不能被點(diǎn)開。
3.title和 alt屬性分別有什么作用?
答：title屬性更多是提供一個(gè)額外信息的意思必指，當(dāng)鼠標(biāo)放在連接上的同時(shí)會(huì)出現(xiàn)提示或者補(bǔ)充信息囊咏。alt更多體現(xiàn)一個(gè)代替的作用，當(dāng)原本應(yīng)該出現(xiàn)的圖片沒有正常顯示塔橡，Alt的值會(huì)被現(xiàn)實(shí)出來以便用戶解讀梅割。
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思？
答：這句話代表在背景圖片的設(shè)置葛家，首先abc這張圖來自與htm文檔l同一個(gè)文件夾户辞；0 0 代表 在頁面中的水平與垂直位置則為左上角；no-repeat表示背景圖片不會(huì)重復(fù)平鋪癞谒。
5.background-size有什么作用? 兼容性如何? 常用的值是?
答：background-size用來規(guī)定背景圖片的尺寸底燎。
常用的值有：length/percentage/cover/contain;
length
設(shè)置背景圖像的高度和寬度。
第一個(gè)值設(shè)置寬度弹砚，第二個(gè)值設(shè)置高度双仍。
如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"桌吃。
percentage
以父元素的百分比來設(shè)置背景圖像的寬度和高度朱沃。
第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度茅诱。
如果只設(shè)置一個(gè)值为流，則第二個(gè)值會(huì)被設(shè)置為 "auto"。
cover
把背景圖像擴(kuò)展至足夠大让簿，以使背景圖像完全覆蓋背景區(qū)域敬察。
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain
把圖像圖像擴(kuò)展至最大尺寸尔当，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域莲祸。
6.如何讓一個(gè)div水平居中蹂安？如何讓圖片水平居中
答：讓div水平居中可以寫 margin :o auto語句。給div設(shè)置一個(gè)固定的寬度锐帜，左右margin相等（auto）田盈。因?yàn)橐粋€(gè)div是一個(gè)區(qū)塊，區(qū)塊中的內(nèi)容可以直接對(duì)div設(shè)置text-align：center缴阎，也就是針對(duì)父級(jí)元素設(shè)置允瞧。
7.如何設(shè)置元素透明? 兼容性？
答：opacity屬性可以設(shè)置透明度蛮拔。0-1述暂，0是完全透明，1是完全不透明建炫。 如果讓div透明的話 整個(gè)區(qū)塊都是透明的畦韭；背景色透明只是針對(duì)背景顏色。
8.opacity和 rgba都能設(shè)置透明肛跌，有什么區(qū)別艺配？
答：RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度的意思衍慎。它與opacity的區(qū)別在于opacity會(huì)繼承父元素的 opacity 屬性转唉，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。
本文版權(quán)歸作者和饑人谷所有稳捆，轉(zhuǎn)載請(qǐng)注明出處
