1. 精靈圖 1.1 為什麼需要精靈圖 一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，伺服器就會頻繁地接收和發送請求圖片，造成伺服器請求壓力過大，這將大大降低頁面的載入速度。 因此，為了有效地減少伺服器接受和發送請求的次數，提高頁面的載入速度，出現了CSS精靈技術。 核心原理： ...
1. 精靈圖
1.1 為什麼需要精靈圖
一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，伺服器就會頻繁地接收和發送請求圖片，造成伺服器請求壓力過大，這將大大降低頁面的載入速度。
因此，為了有效地減少伺服器接受和發送請求的次數，提高頁面的載入速度，出現了CSS精靈技術。
核心原理：將網頁中的一些小背景圖像整合到一張大圖中，這樣伺服器只需要一次請求就可以了。
1.2 精靈圖（sprites）的使用
使用精靈圖核心：
1. 精靈圖技術主要針對於背景圖片使用。就是把多個小背景圖片整合到一張大圖片中。
2. 這個大圖片也稱為sprites精靈圖或者雪碧圖。
3. 移動背景圖片位置，此時可以使用background-position。
4. 移動的距離就是這個目標圖片的x和y坐標。註意網頁中的坐標有所不同。
5. 因為一般情況下都是往上往左移動，所以數值是負值。
6. 使用精靈圖的時候需要精確測量，每個小背景圖片的大小和位置。
2. 字體圖標
2.1 字體圖標的產生
字體圖標使用場景：主要用於顯示網頁中通用、常用的一些小圖標。
精靈圖是有諸多優點的，但是缺點很明顯。
1. 圖片文件還是比較大的。
2. 圖片本身放大和縮小會失真。
3. 一旦圖片製作完畢想要更換非常複雜。
此時，有一種技術的出現很好的解決了以上問題，就是字體圖標iconfont。
字體圖標可以提供一種方便高效的圖標使用方式，展示的是圖標，本質屬於字體。
2.2 字體圖標的優點
輕量級：一個圖標字體要比一系類的圖像小。一旦字體載入，圖標就會馬上渲染出來，減少了伺服器請求。
靈活性：本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果、旋轉等。
相容性：幾乎支持所有瀏覽器。
註意：字體圖標不能代替精靈技術，只是對工作中圖標部分技術的提升和優化。
總結：
1. 如果遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。
2. 如果遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。
2.3 字體圖標的下載
推薦下載網站：
icomoon字型檔 http://icomoon.io
阿裡iconfont字型檔 http://www.iconfont.cn/
2.4 字體圖標的引入
2.4.1 字體文件格式
不同瀏覽器所支持的字體格式是不一樣的，字體圖標之所以相容，就是因為包含了主流瀏覽器支持的字體文件。
2.4.2 字體文件字體
在CSS樣式中全局聲明字體：簡單理解把這些字體文件通過CSS引入到我們頁面中。
一定註意字體文件路徑的問題。
|
@font-face{ font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url(fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2y') format('woff'), url(fonts/icomoon.svq?7kkyc2#icomoon') format('svg'); font-weight:normal; font-style: normal; } |
2.4.3 html標簽內添加小圖標
|
<span>< / span> |
2.5 字體圖標的追加
把壓縮包裡面的.json從新下載壓縮包，並替換原來的文件即可。
3. CSS三角
|
div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: pink; } |
4. CSS用戶界面樣式
4.1 滑鼠樣式 cursor
|
li {cursor: pointer;} |
設置或檢索在對象上移動的滑鼠指針採用何種系統預定義的游標形狀。
|
屬性值 |
描述 |
|
default |
小白預設。 |
|
pointer |
小手。 |
|
move |
移動。 |
|
text |
文本。 |
|
not-allowed |
禁止。 |
4.2 輪廓線 outline
給表單添加outline: 0; 或者outline: none;樣式之後，就可以去掉預設的藍色邊框。
|
input {outline: none;} |
4.3 防止拖拽文本域resize
|
textarea {resize: none;} |
5. vertical-align屬性應用
CSS的vertical-align屬性使用場景：經常用於設置圖片或者表單（行內塊元素）和文字垂直對齊。
官方解釋：用於設置一個元素的垂直對齊方式，但是它只針對於行內塊元素有效。
語法：
|
vertical-align: baseline | top | middle | bottom |
|
值 |
描述 |
|
baseline |
預設。元素放置在父元素的基線上。 |
|
top |
把元素的頂端與行中最高元素的頂端對齊。 |
|
middle |
把此元素放置在父元素的中部。 |
|
bottom |
把元素的頂端與行中最低的元素的頂端對齊。 |
5.1 圖片、表單和文字對齊
圖片、表單都屬於行內塊元素，預設的vertical-align是基線對齊。
可以給圖片、表單這些行內塊元素的vertical-align屬性設置為middle就可以讓文字和圖片垂直居中對齊。
5.2 解決圖片底部預設空白縫隙問題
bug：圖片底側會有一個空白縫除，原因是行內塊元素會和文字的基線對齊。
主要解決方法有兩種：
1. 給圖片添加vertical-align:micdle / topl bottom等。（提倡使用的）
2. 把圖片轉換為塊級元素 display:block;
6. 溢出的文字省略號顯示
6.1 單行文本溢出昱示省略號--必須滿足三個條件
|
/*1．先強制一行內顯示文本*/ white-space: nowzE /*2.超出的部分隱藏*/ overflow: hidden; /*3．文字用省略號替代超出的部分大*/ text-overflow: ellipsis; |
6.2 多行文本溢出昱示省略號
多行文本溢出顯示省略號，有較大相容性問題，適合於webKit劉覽器或移動端（移動端大部分是webkit內核）。
|
overflow: hidden; text-overflow: ellipsis; /*彈性伸縮盒子模型最示 */ display: -webkit-box; /* 限制在一個塊元素顯示的文本的行數 */ -webkit-line-clamp : 2； /*設置或檢索伸縮盒對象的子元素的排列方式 */ -webkit-box-orient: vertical; |
7. 常見佈局技巧
7.1 argin負值運用
1. 讓每個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框
2. 滑鼠經過某個盒子的時候，提高當前盒子的層級即可（如果沒有有定位，則加相對定位 （保留位置），如果有定位，則加z-index）。
7.2 CSS 三角強化
代碼：
|
width: 0; height: 0; border-colg: transparent red transparent transparent; border-style: solid; border-width: 22px 8px 0 0; |
8. CSS初始化
不同瀏覽器對有些標簽的預設值是不同的，為了消除不同瀏覽器對HTML文本呈現的差異，照顧瀏覽器的相容，我們需要對CSS初始化，簡單理解：CSS初始化是指重設瀏覽器的樣式（也稱為CSS reset）。
每個網頁都必須首先進行CSS初始化。
Unicode編碼字體：
把中文字體的名稱用相應的Unicode編碼來代替，這樣就可以有效避免瀏覽器解釋CSS代碼時候出現亂碼的問題。
