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代碼時候出現亂碼的問題，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549537.html
標籤：Html/Css