課程目標
- 熟悉常見的樣式寫法，如背景圖片、居中、透明等
學習建議
問答題一定要動手寫 demo ，否則學習效果只能達到5成
課程任務
1. CSS Sprite(雪碧圖|精靈圖)指什么？有什么作用
雪碧圖被運用在眾多使用了很多小圖標的網(wǎng)站上。相對于把每張小圖標以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內(nèi)存和帶寬更加友好。
把多張圖片拼到一張圖中。把小圖標放在同一張圖片文件里，通過 background-position 顯示那張圖片文件的不同位置，以減少 HTTP 請求的數(shù)量。（sprites 適用于 icon 級的小圖片。）
雪碧圖簡單總結(jié)：
優(yōu)勢
- 減少 HTTP 請求數(shù)
- 可以是任意圖形，也可以是任意色彩
- 兼容性極好（位于位圖的 Sprites 兼容性都非常的好，但對于 SVG 的 Sprites，還是受到瀏覽器的限制，最起碼要支持 SVG 的瀏覽器才能得到支持）
劣勢
- 增加開發(fā)時間，需要人肉或通過相關(guān)工具，將零散的圖形合并到一起，而不同的合并方式，圖形的色彩對 Web 的性能有直接的影響
- 增加維護成本，要增加新的圖標合成進來，是件較難的事情，甚至直接會影響到前面定位好的圖片。目前為止，使用自動編譯工具，相對比人肉處理要理想一些
- 圖片尺寸固定，在位圖的 Sprites 中無法通過 CSS 來修改圖標的大小，但在 SVG 的 Sprites 中可以配合CSS 的
background-size調(diào)整圖標的大小
來個demo
在線工具合并：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprites-demo</title>
<style media="screen">
.icon {
width: 225px;
height: 225px;
background: url(result.png) no-repeat;
border: 1px solid red;
}
.s1 {
background-position: 0px 0px;
}
.s2 {
background-position: 0px -235px;
}
.s3 {
background-position: 0px -470px;
}
/*
下，右，都是負。
*/
</style>
</head>
<body>
<div class="icon s1"></div>
<div class="icon s2"></div>
<div class="icon s3"></div>
</body>
</html>
在瀏覽器上
拓展閱讀：
2. img 標簽和 CSS 背景使用圖片在使用場景上有何區(qū)別
對于固定不變的內(nèi)容，如圖標等用背景圖。（不可點擊的）
對于可變的內(nèi)容，圖片是和內(nèi)容相關(guān)的，用圖片。（可點擊的，跳轉(zhuǎn)到別的頁面）
例如，用戶頭像（可變的），網(wǎng)站logo（可點擊的）等。
注意：padding 有背景色，margin 沒有。
就是 border 里面有顏色，外面沒有顏色。
- 行內(nèi)元素上下 padding 雖然不會占位，但是設了背景顏色，依然可以看見上下 padding 有顏色。（所以行內(nèi)元素最好不要直接用 padding ，而改用 padding-left 和 padding-right。-- 除非給這個行內(nèi)元素加 block 或者 inline-block。）行內(nèi)元素設置不了 height。
- 塊級元素可以設置 width, height, margin, padding 。而行內(nèi)元素不可以設置上下 margin padding 以及 width height。
拓展閱讀
3. title 和 alt 屬性分別有什么作用？
title 屬性規(guī)定關(guān)于元素的額外信息。這些信息通常會在鼠標移到元素上時顯示“提示文本”。
alt 屬性規(guī)定圖像無法顯示時的替代文本。
4. background: url(abc.png) 0 0 no-repeat; 這句話是什么意思
選用當前目錄下的 abc.png 充當背景圖片，在瀏覽器左上角顯示，不重復。
5. background-size 有什么作用？兼容性如何？常用的值是？
background-size 用來指定背景圖片的大小。屬于 CSS3 的屬性。
常用值有：length(px)、percentage(%)、cover、contain
其中，cover 會讓背景鋪滿容器（調(diào)整背景圖片的寬度或高度（較小者），以鋪滿整個容器。而且還會保持背景圖片的寬高比。）
contain 會讓容器包含整個背景圖片（調(diào)整背景圖片的寬度或高度（較大者），令背景圖片全部包含在元素中。同時還會保持背景圖片的寬高比。）
來個 demo
無論 cover 還是 contain，都會保持寬高比
這是圖片的原始大?。?28px-128px
當background: cover;
.img-wrap {
width: 128px;
height: 50px;
border: 1px solid red;
background-image: url(http://www.w3school.com.cn/i/eg_smile.gif);
background-size: cover;
}
可以看出，cover 為了讓背景圖片鋪滿容器，圖片下半部分"不得不"沒了。
當background: contain;
.img-wrap {
width: 128px;
height: 50px;
border: 1px solid red;
background-image: url(http://www.w3school.com.cn/i/eg_smile.gif);
background-size: contain;
}
可以看出，當容器變小時，contain 為了讓容器包含整個背景圖片而調(diào)整圖片的寬高，使之整體變小，且會出現(xiàn)重復背景圖片。
cover 會讓圖片鋪滿容器而不去考慮圖片是否能完整展示；
contain 優(yōu)先考慮展現(xiàn)圖片而不去考慮圖片是否會重復。
而且兩者都會保持原始圖片的寬高比！
總結(jié)：結(jié)合「容器寬高」和「圖片的寬高」以及 「cover 和 contain 都會保持圖片寬高比這個特性」，可以很快得出 cover 和 contain 在不同條件下會如何展示背景圖片。
拓展閱讀：
6. 如何讓一個 div 水平居中？如何讓圖片水平居中
讓 div（塊級元素）水平居中可以設置兩邊 margin 為 auto。
讓 img（行內(nèi)元素）水平居中可以設置 text-align: center;
來個demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div-img-"水平居中"</title>
<style media="screen">
.test {
width: 500px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
/*塊級元素居中*/
text-align: center;
/*行內(nèi)元素居中*/
}
</style>
</head>
<body>
<div class="test">
<img src="icon1.png" alt="icon" />
</div>
</body>
</html>
7. 如何設置元素透明？兼容性？
opacity，指定不透明度。從 0.0（完全透明）到 1.0 （完全不透明）
主流瀏覽器都支持這個特性（IE8以上）。
8. opacity 和 rgba 都能設置透明，有什么區(qū)別
簡單來說，opacity 會讓子元素也變成半透明。
而 ragb 方式只會對該元素有效，不會影響到子元素。
來個 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opacity-rgba</title>
<style media="screen">
.opacity,.rgba {
width: 500px;
height: 400px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 30px;
}
.opacity {
background-color: red;
opacity: 0.5;
}
.rgba {
background-color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<div class="opacity">
opacity不僅會對該元素有效，而且還會影響到子元素
</div>
<div class="rgba">
rgba只會對該元素有效
</div>
</body>
</html>
opacity里面的字都變透明了，額，對比很明顯。
