一、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用？
1.雪碧圖是把頁(yè)面中需要用到的若干小圖標(biāo)集合在一張整圖中。如果需要其中某個(gè)小圖標(biāo)，就使用background-position屬性定位到需要展示的位置。
2.作用：將頁(yè)面的小圖標(biāo)集中在一張圖片，這樣不同位置的請(qǐng)求只需要調(diào)用一次整圖即可，減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)，提高頁(yè)面的加載速度。
二、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別？
1.寫(xiě)在CSS里面的圖片是以背景圖形式存在的，而寫(xiě)在html里的img標(biāo)簽是以標(biāo)簽形式存在的；
2.在網(wǎng)頁(yè)加載的過(guò)程中，寫(xiě)在html里的img標(biāo)簽會(huì)先加載，寫(xiě)在CSS里面的背景圖片后加載；
3.沒(méi)有實(shí)質(zhì)內(nèi)容，只做背景的圖片一般使用CSS背景，有實(shí)質(zhì)內(nèi)容的，可以點(diǎn)擊交互的，用img標(biāo)簽；
4.CSS背景圖片，在圖片沒(méi)加載或者加載失敗的時(shí)候，不會(huì)有圖片的占位標(biāo)記，不會(huì)出現(xiàn)紅叉的標(biāo)識(shí)；
5.使用img標(biāo)簽更有利于SEO；
三、title和alt屬性分別有什么作用？
1.title有兩個(gè)作用：
- 聲明文檔的標(biāo)題；
- 對(duì)標(biāo)簽提供額外信息，當(dāng)鼠標(biāo)放在標(biāo)簽上時(shí)，標(biāo)簽上方會(huì)出現(xiàn)提示信息；
2.alt屬性是對(duì)標(biāo)簽內(nèi)容的注釋?zhuān)?dāng)頁(yè)面無(wú)法加載標(biāo)簽內(nèi)容時(shí)，就會(huì)顯示出alt注釋的內(nèi)容；而且alt注釋更有利于搜索引擎的查找。
四、background: url(abc.png) 0 0 no-repeat;這句話(huà)是什么意思？
1.背景圖片是當(dāng)前文件夾下的“abc.png”，橫向和縱向定位為0，圖片平鋪不重復(fù)；
五、background-size有什么作用? 兼容性如何? 常用的值是?
1.作用：規(guī)定背景圖像的尺寸；
2.兼容性：
3.常用的值：
- 值：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ū)域。
六、如何讓一個(gè)div水平居中？如何讓圖片水平居中？
1.給div設(shè)置“margin:0 auto”屬性；
2.在圖片的父容器中設(shè)置“text-align:center”屬性；
七、如何設(shè)置元素透明? 兼容性？
1.rgba()和opacity都能實(shí)現(xiàn)元素透明效果；
2.兼容性：
八、opacity和rgba都能設(shè)置透明，有什么區(qū)別？
1.opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度;
2.rgba()只作用于元素的顏色或其背景色;
