A项鬼、問(wèn)答題
一哑梳、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用？
直白點(diǎn)解釋就是一種CSS圖片合成技術(shù)即指集合網(wǎng)頁(yè)中的小圖標(biāo)或背景圖像到一張圖片上绘盟，然后通過(guò)CSS背景定位進(jìn)行選取所需的部位鸠真，這個(gè)集成的圖片就是雪碧圖（或叫精靈圖）；其作用是可以1龄毡、減少加載圖片時(shí)對(duì)服務(wù)器請(qǐng)求次數(shù)吠卷；2、減少頁(yè)面的加載時(shí)間沦零；3祭隔、減少鼠標(biāo)劃過(guò)的一些bug；
注：
- CSS雪碧調(diào)用的圖默認(rèn)情況下不可被打印路操，除非在@media中特別添加 print聲明疾渴；
- 雪碧圖合成前的圖片和合成后的圖片不宜太大；
二寻拂、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別程奠？
img標(biāo)簽適合使用在圖片內(nèi)容可變的或者圖片有實(shí)際內(nèi)容的情況下（img里可設(shè)alt對(duì)圖片進(jìn)行描述）；而css背景圖適合使用在圖片內(nèi)容固定不變比如一些小的logo或icon等等（這種情況可以采用雪碧圖的方法）情況下祭钉；
注：如果一張較大的圖片放在img標(biāo)簽中丁屎，則待該圖片加載完后再加載后續(xù)的網(wǎng)頁(yè)內(nèi)容；若放在css背景圖中荤牍，則待網(wǎng)頁(yè)內(nèi)容及樣式全部加載完后再加載該圖片框杜，其不影響瀏覽網(wǎng)頁(yè)全部?jī)?nèi)容（如果此時(shí)圖片無(wú)法加載或加載失敗的時(shí)候，不會(huì)有圖片占用標(biāo)記塑陵， 不會(huì)出現(xiàn)紅色叉）。
三、title 和 alt屬性分別有什么作用师幕？
title的作用是給鏈接a標(biāo)簽、img標(biāo)簽或p標(biāo)簽等注明額外信息用诬滩，同時(shí)它也是abbr（縮寫）及acronym（首字母縮寫霹粥，HTML5不支持該標(biāo)簽可用abbr替代）標(biāo)簽必不可少的屬性。（當(dāng)然如果它被當(dāng)作標(biāo)簽來(lái)看待則表示頁(yè)面的標(biāo)題疼鸟。）當(dāng)這些元素使用title時(shí)后控，鼠標(biāo)放在對(duì)應(yīng)的元素上面，會(huì)出現(xiàn)一個(gè)工具提示文本空镜，如下圖：
上述代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#" title="a鏈接出現(xiàn)的工具提示文本">這是一個(gè)a鏈接</a>
<p title="p標(biāo)簽出現(xiàn)的工具提示文本">這是段落</p>
<abbr title="超文本標(biāo)記語(yǔ)言"> HTML</abbr> 語(yǔ)言很有趣
</body>
</html>
而alt是專門給圖片進(jìn)行內(nèi)容描述用的（圖片上是什么東西浩淘，如上面的代碼中的alt="百度logo" ），這樣當(dāng)瀏覽器無(wú)法加載圖片時(shí)或者當(dāng)用戶使用屏幕閱讀器時(shí)吴攒，可以通過(guò)alt的值了解圖片里的內(nèi)容到底是什么张抄。另:圖片使用alt時(shí)也利于網(wǎng)站的SEO，便于搜素引擎爬蟲(chóng)識(shí)別洼怔；
四署惯、background: url(abc.png) 0 0 no-repeat;這句話是什么意思？
這句話的意思是引用abc.png這樣圖片作為背景圖茴厉，這張圖片不偏移泽台，不重復(fù)；
五矾缓、background-size有什么作用? 兼容性如何? 常用的值是?
作用是設(shè)置背景圖片的大小怀酷，兼容性如下圖：
常用的值有：數(shù)字（如果有兩組數(shù)字，則前者表示寬度后者表示高度嗜闻，如果只有一組數(shù)字蜕依，則表示寬度，高度為auto）琉雳、百分?jǐn)?shù)（以父元素的百分比來(lái)設(shè)置---- 如果有兩組數(shù)值样眠，則前者表示寬度后者表示高度，如果只有一組數(shù)值翠肘，則表示寬度檐束，高度為auto）、contain（圖片擴(kuò)展至最大尺寸以使其寬度和高度正好適應(yīng)內(nèi)容區(qū)域即其正好被包含）束倍、cover（把圖片擴(kuò)展至較大以使得圖片完全覆蓋內(nèi)容區(qū)域被丧，這樣會(huì)導(dǎo)致圖片部分區(qū)域未顯示出來(lái)）
具體可看下面的例子代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.try-number{
background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
height: 200px;
width: 200px;
color: #000;
background-color: #f00;
background-size: 100px 100px;
}
div.try-per{
background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
height: 200px;
width: 200px;
color: #000;
background-color: #0f0;
background-size: 50% 100%;
}
div.try-contain{
background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
height: 200px;
width: 200px;
color: #000;
background-color: #0f0;
background-size: contain;
}
div.try-cover{
background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
height: 200px;
width: 200px;
color: #000;
background-color: #0f0;
background-size: cover;
}
</style>
</head>
<body>
<div class="try-number">這是數(shù)字表示</div>
<div class="try-per">這是百分比表示的方法</div>
<div class="try-contain">這是contain的表示方法</div>
<div class="try-cover">這是cover的表示方法</div>
</body>
</html>
運(yùn)行結(jié)果可見(jiàn)：
http://jsbin.com/gixuqe/edit?html,output
六盟戏、如何讓一個(gè)div水平居中？如何讓圖片水平居中甥桂？
可以使用margin:數(shù)字 auto 讓div水平居中柿究；如下面代碼中的margin:10px auto;使得div水平居中了；
圖片水平居中可采用text-align:center; 如下面的代碼中的```text-align:center``使得圖片及div中的文本居中了黄选。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
border:1px solid red;
margin:10px auto;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<div class="txtCenter">我是文本蝇摸，我想要在父容器中水平居中顯示。</div>
<div class="imgCenter"></div>
</body>
</html>
運(yùn)行結(jié)果見(jiàn)：
http://jsbin.com/hozugid/edit?html,output
七办陷、如何設(shè)置元素透明? 兼容性貌夕？
可使用opacity屬性；
兼容性如下圖所示：
八懂诗、opacity 和 rgba都能設(shè)置透明蜂嗽，有什么區(qū)別？
區(qū)別是opacity不僅能夠作用所對(duì)應(yīng)的元素還作用在該元素內(nèi)所有相關(guān)的透明度殃恒，且opacity還會(huì)繼承父元素的opacity的屬性；而rgba則不存在繼承的情況辱揭，且其只針對(duì)元素的顏色或背景色有效离唐；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.try-opacity{
height: 300px;
width: 300px;
opacity: 0.5;
filter:alpha(opacity=50);
background-color: red;
border: 4px solid blue;
margin: 40px;
}
.try-rgba{
height: 300px;
width: 300px;
background-color:rgba(255,0,0,0.5);
border: 4px solid blue;
margin: 40px;
}
</style>
</head>
<body>
<div class="try-opacity">這是opacity的div</div>
<div class="try-rgba">這是rgba的div</div>
</body>
</html>
B、代碼題
1问窃、使用CSS Sprite 把如下6張圖標(biāo)圖片合并成一張圖片亥鬓，做出如下效果, 當(dāng) hover 時(shí)背景變色
2、使用字體圖標(biāo)(如 iconfont, 查找->加入購(gòu)物車->下載 demo 域庇、 fortawesome 或者fontello)實(shí)現(xiàn)上例效果
3嵌戈、使用css border實(shí)現(xiàn)如下三角形
代碼詳見(jiàn)此處
**本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處听皿。謝謝熟呛！ *
