一、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用

雪碧圖：將多個(gè)小的icon合成一個(gè)大圖，通過(guò)css設(shè)定不同的定位與偏移顯示大圖不同的區(qū)域；
作用：減少網(wǎng)絡(luò)請(qǐng)求，也就減少了網(wǎng)絡(luò)資源的消耗，也就減少了網(wǎng)頁(yè)響應(yīng)時(shí)間；

二、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別

img標(biāo)簽：常用于圖片不固定，隨時(shí)可能出現(xiàn)更新，如qq頭像、動(dòng)態(tài)日歷、首頁(yè)產(chǎn)品展示圖等等；
CSS背景圖片：常用于固定的圖片或背景的，一般不會(huì)改變，如功能圖標(biāo)、指示箭頭等等；

三、title 和 alt屬性分別有什么作用

alt屬性：鏈接的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息，提示信息顯示在原本加載圖片的地方；
title屬性：鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示，鼠標(biāo)離開(kāi)就消失；

四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思

background：url(abc.png) 0 0 no-repeat;：用于申明背景圖片屬性
url(abc.png)：用于聲明使用abc.png作為背景圖片；
0 0：用于聲明圖片水片和垂直偏移都為0px；
no-repeat：聲明圖片不進(jìn)行重復(fù)填充；

下圖為實(shí)例：

background屬性

五、background-size有什么作用? 兼容性如何? 常用的值是?

作用：設(shè)置背景圖像的尺寸；
兼容性：

background-size兼容性

background-size值實(shí)例

六、如何讓一個(gè)div水平居中？如何讓圖片水平居中

div水平居中:為div添加margin: 0 auto聲明；
圖片水平居中:為該圖片的父容器添加text-align:center聲明；
實(shí)例如下圖：

div和img圖片居中

七、如何設(shè)置元素透明? 兼容性？

元素透明：為元素添加opacity：0~1(0為完全透明,1為不透明)聲明
兼容性如下圖：

opacity兼容性

八、opacity 和 rgba都能設(shè)置透明，有什么區(qū)別

1. 語(yǔ)法區(qū)別：
opacity使用語(yǔ)法：opacity: value|inherit;/*value:0~1，0為完全透明，1為完全不透明*/
rgba使用語(yǔ)法：rgba(r,g,b,a)/*a:0~1，0為完全透明，1為完全不透明*/
2. 屬性區(qū)別：
使用opacity屬性時(shí)后代元素會(huì)繼承父元素的 opacity 屬性，使用rgba屬性值時(shí)后代元素不會(huì)繼承不透明屬性，實(shí)例如下圖：

opacity和rgba屬性區(qū)別

九、代碼題

1. 使用CSS Sprite 把如下6張圖標(biāo)圖片合并成一張圖片，做出如下效果, 當(dāng) hover 時(shí)背景變色：
   
   
   答：代碼9-2-1
2. 使用字體圖標(biāo)(如 iconfont, 查找->加入購(gòu)物車(chē)->下載 demo 、 fortawesome 或者fontello)實(shí)現(xiàn)上例效果
   答：代碼9-2-2

3.使用css border實(shí)現(xiàn)如下三角形