CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以並發，但是也有限制，一般瀏覽器都是6個。對於未來而言，就不需要這樣做了，因為有了`http2`。
具體請查看「background-image」，「background- repeat」，「background-position」的使用方法
B. 如何進行前端優化
1.減少 HTTP 請求....
2.使用 HTTP2
3.使用服務端渲染
4.靜態資源使用 CDN
5.將 CSS 放在文件頭部，JavaScript 文件放 ...
6.使用字體圖標 iconfont 代替圖片圖標
7.善用緩存，不重復載入相同的資源
8.壓縮文件
9.圖片優化
(1).圖片延遲載入
(2). 響應式圖片
(3). 調整圖片大小
(4). 降低圖片質量
(5). 盡可能利用 CSS3 效果代替圖片
(6). 使用 webp 格式的圖片
10. 通過 webpack 按需載入代碼，提取第三庫代碼，減少 ES6 轉為 ES5 的冗餘代碼
11. 減少重繪重排
12. 使用事件委託
13. 注意程序的局部性
14. if-else 對比 switch
15. 查找表
16. 避免頁面卡頓
17. 使用 requestAnimationFrame 來實現視覺變化
18. 使用 Web Workers
19. 使用位操作
20. 不要覆蓋原生方法
21. 降低 CSS 選擇器的復雜性
(1). 瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。
(2). CSS 選擇器優先順序
22. 使用 flexbox 而不是較早的布局模型
23. 使用 transform 和 opacity 屬性更改來實現動畫
24. 合理使用規則，避免過度優化
性能優化主要分為兩類：
載入時優化
運行時優化
C. 將網頁裡面的所有圖標做到一張圖片上，然後用css進行定位！
css精靈！即css sprite！使用方法可以參考示例！很容易明白的 最重要的是自己嘗試著去做！
D. CSS常用樣式二
實際應用，更多的使用italic屬性值
實際應用中， 行高的數值通過設計圖獲取， 量取數值時需要使用一些輔助軟體工具
選中文字工具，屬性選中：不消除鋸齒
字體、 字型大小、 行高、 加粗、 斜體 都是font綜合屬性的單一屬性。
font屬性五個單一屬性的值可以進行合寫， 屬性值可以有2到多個， 值之間用空格進行分隔。
font進行綜合書寫時， 必須有字型大小和字體參與， 而且必須字型大小在前， 字體在後， 不能顛倒順序。
font屬性經常對字體、 字型大小、 行高進行合寫， 書寫順序必須是字型大小、 行高、 字體， 字型大小和行高之間必須用/進行分隔
如果font屬性需要設置加粗和斜體， 兩個屬性值只能寫在最前面， 兩個值之間可以互換位置。 後面的字型大小、 行高、 字體不能更改位置
作用：設置文本整體是否有線條的裝飾效果
作用：設置段落首行是否進行縮進
實際應用中，常用em
屬性值區分正負， 正數表示向右縮進， 負數表示向左縮進
瀏覽器控制台中的盒模型圖
作用： 設置可以添加元素內容的區域的寬度。
作用： 設置可以添加元素內容的區域的高度。
如果一個元素不添加 height 屬性， 默認屬性值為auto， 瀏覽器會自動計算出實際高度， 也就是是內部元素內容自動撐開的高度。 元素的高度自適應內部內容的高度。
書寫四個方向單一屬性時， 一般是按照順時針規律書寫： 上、 右、 下、 左
設置四個屬性值， 分配方向上、 右、 下、 左。
設置三個值分配給上、 左右、 下。
設置兩個值， 分配給上下、 左右 。
設置屬性值只有一個， 四邊的值相同。
作用： 設置邊框的顏色。
屬性值： 顏色名或顏色值， 整體類似 padding 綜合屬性寫法。
每個單一屬性都必須與復合屬性 border 一致， 設置三個屬性值。
書寫四個方向單一屬性時， 一般是按照順時針規律書寫： 上、 右、 下、 左
設置四個屬性值， 分配方向上、 右、 下、 左。
設置三個值分配給上、 左右、 下。
設置兩個值， 分配給上下、 左右 。
設置屬性值只有一個， 四邊的值相同。
給 <body> 標簽設置整體文字樣式， 讓大部分後代標簽全部去繼承
設計圖中盒子高度佔位是固定的， 後面同級元素在高度下面載入。多餘內容會溢出盒子。
設置了高度的盒子， 如果內部元素的載入高度超過父級， 會溢出。可以通過一個溢出的屬性 overflow， 進行溢出部分內容的顯示效果設置。
要求盒子高度必須自適應內部內容的高度。
或者設置height的屬性值是自動的。
一個元素內部嵌套的子元素， 在父元素中居中。
針對類似 <div> 樣式上必須獨佔一行的盒子， 如果子盒子寬度低於父盒子寬度， 可以設置子盒子的 margin 值， 水平方向的值都設置為 auto。
原因： auto 只在水平方向有作用， 水平方向的 margin 如果設置為 auto， 邊距會自動無限增大， 直到撐滿整個父元素除了子元素寬度之外剩餘的區域， 如果兩個水平方向都是 auto， 兩邊都要無限大， 只能達到一個平衡， 兩邊距離相同， 導致盒子居中。
一般情況下， 一個父元素內部可以放一個或多個子元素， 而且多個子元素要排成一行顯示， 必須保證父元素的寬度一定要足夠（不考慮溢出情況） ， 需要遵循一個設置尺寸的規律： 所有子元素的寬度加在一起不能大於父元素的寬度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不滿足條件： 要麼多餘的子元素掉下來不能在一排， 要麼溢出父元素
父子盒模型中， 只有一個子元素， 且子元素是類似 <div> 標簽必須佔一行的。不設置子元素的 width 屬性， 子元素的 width 屬性值會自動載入父級元素的 width。如果同時設置了子元素水平方向的 padding 和 border 、 margin， 不需要手動去進行內減， 子元素的 width 會自動收縮尺寸。
子元素所有的水平方向的位置所有屬性的加和等於父元素的 width 。
在垂直方向如果有兩個元素的外邊距有相遇的， 瀏覽器中載入的真正的外邊距不是兩個間距的加和， 而是兩個邊距中值較大的， 邊距值小的塌陷到了邊距值大的值內部。
上面的元素有下邊距， 下面的元素有上邊距， 兩個邊距相遇， 真正的盒子間距離是較大的那個值
父子元素之間也會出現 margin 塌陷， 父元素和子元素都設置了同方向的margin-top 值， 兩個屬性之間沒有其他的內容進行隔離， 導致兩個屬性相遇， 發生margin 塌陷。
本身父元素與上一個元素的距離是0， 子元素如果設置了垂直方向的上邊距， 會帶著父級一起掉下來。
水平方向的 margin 沒有塌陷現象。
在標准流中， 大部分元素是區分等級的， 習慣將元素劃分為幾種常見的載入級別：塊級元素、 行內元素、 行內塊元素等。
大部分容器級標簽包括p標簽都是塊級元素， 比如 <div> 、 <h1> 等。
大部分的文本級標簽， 比如 <span>、 <a>、 <b> 等。
比如 <img>、 <input> 等。
可以通過 display 屬性更改一個標簽的顯示模式。
屬性值： 元素根據屬性值不同， 可以載入對應元素等級的顯示模式的特點。
display 屬性更改的顯示模式並沒有改變標准流本質性質， 頁面還是只能從上往下載入， 存在空白折疊現象等微觀性質。 要想實現更多的界面布局效果需要脫離標准流的限制。
標簽元素脫離標准流的方法包括： 浮動、 絕對定位、 固定定位。
margin 塌陷現象出現在標准流中的， 浮動元素已經脫離標准流， 不再具有 margin塌陷現象。
與前面壓蓋效果結構類似， 同級元素中前面的元素浮動， 後面的元素不浮動， 不浮動的元素內部還有一些文字， 浮動的藍盒子會壓蓋住粉盒子的一部分， 但是文字內容不會被蓋住， 粉盒子中的文字會讓開藍盒子位置， 圍繞它進行載入。這種效果稱為字圍現象。
可以利用字圍現象製作一些特殊的圖文混排布局效果
給標准流的父元素強制給一個合適的高度
作用： 清除標簽元素自身受到的前面的浮動元素的影響。
給標准流父元素添加 clear 屬性， 父元素不受前面浮動影響， 不會再佔有浮動讓出的位置。
給內部有浮動子元素的父元素添加溢出隱藏 overflow: hidden; 屬性， 可以解決浮動的所有問題。
父元素有了高度後， 可以管理住內部所有的浮動元素， 不會延伸到後面標簽中影響貼邊。
<a> 標簽可以根據用戶行為不同， 劃分為四種狀態， 通過<a> 標簽的偽類可以將四種狀態選中設置為不同的樣式效果， 用戶觸發對應行為， 就可以載入對應的樣式。
一般會將訪問前和訪問後狀態設置為一樣的效果， 保證了頁面的統一性， 可以選擇性的設置滑鼠移上和滑鼠點擊狀態。
更加常用的一種設置方式如下：
<a> 標簽任何普通的選擇器， 可以同時選中四種狀態， 可以將四種狀態設置為相同的樣式， 屬性可以設置所有的 <a> 默認顯示樣式的屬性， 包括盒模型、 文字等。
a:hover 偽類選擇器： 設置滑鼠移上時不一樣的樣式屬性。
屬性值都是使用代表方向的單詞進行書寫。
使用像素值作為背景定位的屬性值。
百分比表示法使用百分比數字作為屬性值。
100%代表的數值：
background 屬性可以將五個單一屬性的值進行合寫。
屬性值： 可以有 1-5 個屬性值， 值之間用空格進行分隔， 背景定位的兩個屬性值算作一個屬性值， 不能被分開也不能顛倒順序。 五個屬性值之間可以互換位置。
在<h1> 標簽是權重最高的標簽， 一般會在內部書寫最重要的內容， 比如 logo 圖片、 最大的標題等。
另外 <h1> 內部的文字， 可以幫助提高 SEO 搜索排名。
在設置的是 logo 圖片時， 如果使用插入圖， 就不能書寫搜索關鍵字。
如果想解決 SEO 問題， 可以將 HTML 結構中， 插入圖換成搜索關鍵字， 然後使用 css 添加背景圖給 <a> 標簽或 <h1> 標簽。
在一個盒子中有背景圖部分， 而且有文字內容， 文字會讓開背景圖區域進行載入，
背景區域應該使用 padding 擠出位置。
四個方向的 padding 都可能用於添加背景圖。
當用戶訪問一個網站時， 需要向伺服器發送請求， 網頁上的每張圖像都要經過一次求才能展現給用戶。
然而， 一個網頁中往往會應用很多小的背景圖像作為修飾， 當網頁中的圖像過多時，伺服器就會頻繁地接受和發送請求， 這將大大降低頁面的載入速度。為了有效地減少伺服器接受和發送請求的次數， 提高頁面的載入速度， 出現了 CSS精靈技術（也稱 CSS Sprites、 CSS 雪碧） 。
CSS 精靈是一種處理網頁背景圖像的方式。
它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去， 然後將大圖應用於網頁， 這樣， 當用戶訪問該頁面時， 只需向服務發送一次請求， 網頁中的背景圖像即可全部展示出來。
通常情況下， 這個由很多小的背景圖像合成的大圖被稱為精靈圖。
CSS3 支持背景半透明的寫法， 顏色值增加了一種 rgba 模式。
rgba 模式 ： 在 rgb 基礎上增加了一個不透明度的設置， 不透明度 alpha 取值范圍在0-1 之間， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。
書寫方式： rgba(紅色， 綠色， 藍色， 不透明度)
注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不受影響。
通過 background-size 設置背景圖片的尺寸， 就像我們設置 <img> 的尺寸一樣， 在移動 Web 開發中做屏幕適配應用非常廣泛。
CSS3 中規定， 一個盒子上， 可以添加多個背景圖片。
background-image 的屬性值書寫時， 以逗號分隔多背景的 URL路徑地址。
注意： 背景載入時， 先寫的背景壓蓋後寫的背景圖片。
屬性名： position。
作用： 設置定位的元素， 它需要根據某個參考元素發生位置的偏移。
定位的元素要想發生位置的移動， 必須搭配偏移量屬性進行設置。
水平方向： left、 right。
垂直方向： top、 bottom。
屬性值： 常用 px 為單位的數值， 或者百分比。
子絕父相、 子絕父絕、 子絕父固
屬性值： absolute， 絕對的意思。
參考元素： 參考的是距離最近的有定位的祖先元素， 如果祖先都沒有定位， 參考<body>。必須搭配偏移量屬性才會發生位置移動。
性質： 絕對定位的元素脫離標准流， 會讓出標准流位置， 可以設置寬高， 也可以隨時定義位置， 絕對定位的元素不設置寬高只能被內容撐開。
注意1： 絕對定位的參考元素是不固定的， 不同的參考元素以及不同的偏移量組合，會導致絕對定位元素的參考點不同， 具體位移效果不同。
注意2： 在絕對定位中， 由於參考點不同， left 正值不再等價於 right 的負值。
以 <body> 為參考元素時， 參考點的確定與偏移量方向有關
第一， 如果有 top 參與的定位， 參考點就是 <body> 頁面的左上頂點和右上頂點。 自身的對比點是盒子的所有盒模型屬性最外面的左上角或右上角。
第二， 如果有 bottom 參與的絕對定位， 參考點是 <body> 頁面首屏的左下頂點或右下頂點。 對比點是盒子的所有盒模型屬性最外面的左下角或右下角。
實際應用中， 如果以 <body> 為參考元素， 不同解析度的瀏覽器中， 絕對定位的元素位置是不同的， 所以較少使用 <body> 作為參考元素。
祖先級為參考元素
如果祖先級中有定位的元素， 就不會去參考 <body> 。
參考元素： 參考的是祖先元素中有任意定位的， 在 HTML 結構中距離目標最近的祖先。
如果絕對定位的參考元素是某個祖先級， 參考點是盒子 border 以內的四個頂點， 組合方向決定了參考點。 絕對定位的元素只關心對比點和參考點之間的距離， 會忽視參考元素的 padding 區域。
所有的定位類型都可以實現壓蓋效果。
由於絕對定位的元素脫標， 不佔標准流位置， 壓蓋效果更徹底， 實際工作中， 常見的是 絕對定位製作壓蓋。
定位的元素不區分定位類型， 都會去壓蓋標准流或浮動的元素。
如果都是定位的元素， 在 HTML 中 後寫定位壓蓋先寫的定位 。
更改定位的元素的壓蓋順序， 設置一個 z-index 屬性。
屬性值： 數字。
E. CSS--background系列屬性
css2.1中，顏色的表示方法有三種：（1）單詞；（2）rgb表示法（十進製表示法）；（3）十六進製表示法。
能夠用英語單詞來表述的顏色，都是簡單顏色。
紅色：background-color: red;
紅色：background-color：rgb（255,0,0）；
rgb（red、green、blue）表示三原色「紅」「綠」「藍」。光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色。
用逗號隔開r，g，b的值，每個值的取值范圍是0~255，一共256個值。
如果此項的值是255，那麼就說明是純色：
綠色：background-color：rgb（0,255，0）
藍色：background-color：rgb（0,0,255）
黑色：background-color：rgb（0，0，0）
白色：background-color：rgb（255,255,255）
顏色可以疊加，比如黃色就是紅色和黃色的疊加：
黃色：background-color：rgb（255,255,0）
紫色：background-color：rgb（255,0，255）
青色：background-color：rgb（0,255,255）
紅色：background-color：#ff0000；
所有用#開頭的值，都是16進制的。
#ff0000（ff表示r，00表示g，00表示b）
16進製表示法和rgb類似，也是兩位兩位的看，但是沒有逗號隔開。
上述紅色表示法中：ff就是10進制的255,00就是十進制的0，所以#ff0000相當於（255,0,0）
十六進制對照表：
任何一種十六進製表示法都能夠換算成rgb表示法。也就是說，兩個表示法能表示的顏色數量一樣多，十六進制能夠簡化成3位，所有#rrggbb的形式，都可以寫成#rgb；
比如，上述的紅色可以寫成background-color：#f00；
但是，如果要採用簡化的方法，必須滿足rrggbb格式才行。
幾個特殊的要記住：
黑：#000
白：#fff
紅：#f00
灰：#333
深灰：#222
淺灰：#ccc
background-image屬性用於給盒子加上背景圖片：
background-image：url（images/1.jpg）
url（）表示網址。、
images/1.jpg就是相對路徑。
背景會默認循環，平鋪滿整個盒子，padding的區域也會有背景圖。
background-repeat屬性用來設置背景圖是否重復以及重復方式。
「repeat」表示「重復」。
默認為鋪滿，不用設置。
不重復：background-repeat：no-repeat；
橫向重復：background-repeat：repeat-x；
縱向重復：background-repeat：repeat-y；
background-position：背景定位屬性。
格式：background-position：向右移動量（100px） 向下移動量（200px）
向上向左移只需把移動量改成負數即可。
css精靈又叫「css雪碧」技術，是一種css圖像拼合技術，該方法是將小圖標和圖像合並到一張圖上，然後利用css背景定位來顯示需要顯示的圖片部分。
css精靈的優點，就是減少了http請求。比如4張小圖片，原本需要4個http請求。但是用了css精靈，小圖片變為了一張圖，http請求只有1個了。
background-position：描述左右的詞 描述上下的詞；
比如：background-position：right bottom：（右下角）
background-position：center center；（居中）
背景固定屬性。
格式：background-attachment：fixed；
背景就會被固定住，不會被滾動條滾走。
background屬性和border一樣，是一個綜合屬性：
background：red url（1.jpg） no-repeat 100px 100px fixed；
等價於：
background-color：red；
background-image：url（1.jpg）；
background-repeat：no-repeat；
background-position：100px 100px；
background-attachment：fixed；
可以任意省略部分：
background：red；
F. 什麼是精靈圖在css中如何使用精靈圖
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以並發，但是也有限制，一般瀏覽器都是6個。對於未來而言，就不需要這樣做了，因為有了`http2`。
具體請查看「background-image」，「background- repeat」，「background-position」的使用方法
G. 在使用Css精靈技術時,主要應該注意的問題有哪些
主要就是間距 處理好間距 其他問題不大
CSS精靈技術起源很早，IE8以前比較流行，早些年因為沒有雲伺服器和CDN技術，前端有必要優化一下圖片讀取效率和優化請求的問題
現在CDN橫行的時代，CSS精靈技術已經淘汰了，因為這已經不屬於前端主要解決的問題了，當然你以後走的是小前端路線，研究一下還是可以的。大前端的話 這種事兒直接就交給CDN了
H. css精靈是什麼
css精靈，即CSS Sprite，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
I. 老師讓在網上找精靈圖做動圖，不過精靈圖怎麼做
什麼是精靈圖：
css精靈(CSS sprites),是一種網頁圖片應用處理技術。主要是指將網頁中需要的零星的小圖片集成到一個大的圖片中
應用的原因：
1.減少對瀏覽器的請求次數，避免網頁的延遲
2.方便小圖標的統一管理
精靈圖的製作：
1.軟體：ps
2.製作方法：
新建透明圖層
添加參考線將畫布劃分，將小圖標放入劃分好的格子中
精靈圖的使用： css精靈圖需要配合背景的圖片和背景定位
1.引入精靈圖
.basic{
background-image:url(ui.png);
width:80px;
height:80px;
background-repeat:no-repeat;
display:inline-block;
}
2.精確定位需要顯示的小圖標坐標
.sprite1{
background-position:80px 0px
}
.sprite2{
background-position:160px 160px
}
J. 解釋css sprites，如何使用。
用CSS sprites的好處有以下幾點：
1、減少了圖片個數，這樣減小了對伺服器的請求。
2、整個圖片的變小了，使得圖片下載速度更快。
3、不用使用javascript代碼，而是使用純CSS就可以。
4、示例
<a id="beauty" href="#" ></a>
#beauty
{
width:225px;
height:248px;
text-decoration:none;
display:block;
background-image:url(../images/demo/2010/beauty.jpg);
background-position:0 0;
}
#beauty:hover,#beauty:active { background-position:225px 0; }
將游標移動到下圖上即可看到我們使用CSS sprites實現的功能。