CSS高級技巧總結

一.精靈圖

1.精靈圖（sprites）的使用

使用精靈圖核心：

精靈技術主要針對於背景圖片使用。就是把多個小背景圖片整合到一張大圖片中。

這個大圖片也稱爲 sprites 精靈圖 或者 雪碧圖

移動背景圖片位置， 此時可使用 background-position 。

移動的距離就是這個目標圖片的 x 和 y 座標。注意網頁中的座標有所不一樣

由於通常狀況下都是往上往左移動，因此數值是負值。

使用精靈圖的時候須要精確測量，每一個小背景圖片的大小和位置。

 

二.字體圖標

字體圖標使用場景： 主要用於顯示網頁中通用、經常使用的一些小圖標。

精靈圖是有諸多優勢的，可是缺點很明顯。

圖片文件仍是比較大的。

圖片自己放大和縮小會失真。

一旦圖片製做完畢想要更換很是複雜。

此時，有一種技術的出現很好的解決了以上問題，就是字體圖標 iconfont。

字體圖標能夠爲前端工程師提供一種方便高效的圖標使用方式，展現的是圖標，本質屬於字體。

 

1.字體圖標的優勢

 輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會立刻渲染出來，減小了服務器請求

 靈活性：本質實際上是文字，能夠很隨意的改變顏色、產生陰影、透明效果、旋轉等

 兼容性：幾乎支持全部的瀏覽器，請放心使用

注意： 字體圖標不能替代精靈技術，只是對工做中圖標部分技術的提高和優化。

總結：

若是遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。

若是遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。

 

2.字體圖標的下載

推薦下載網站：

 icomoon 字庫 http://icomoon.io 推薦指數 ★★★★★

IcoMoon 成立於 2011 年，推出了第一個自定義圖標字體生成器，它容許用戶選擇所須要的圖標，使它們成

一字型。該字庫內容種類繁多，很是全面，惟一的遺憾是國外服務器，打開網速較慢。

 阿里 iconfont 字庫 http://www.iconfont.cn/ 推薦指數 ★★★★★

這個是阿里媽媽 M2UX 的一個 iconfont 字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可使用 AI

製做圖標上傳生成。 重點是，免費！

 

3.字體圖標的引入

下載完畢以後，注意原先的文件不要刪，後面會用。

把下載包裏面的 fonts 文件夾放入頁面根目錄下

 

 4.字體文件格式

不一樣瀏覽器所支持的字體格式是不同的，字體圖標之因此兼容，就是由於包含了主流瀏覽器支持的字體文件。

TureType(.ttf)格式.ttf字體是Windows和Mac的最多見的字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、

Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

Web Open Font Format(.woff)格式woff字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、

Safari3.6+、Opera11.1+；

Embedded Open Type(.eot)格式.eot字體是IE專用字體，支持這種字體的瀏覽器有IE4+；

SVG(.svg)格式.svg字體是基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、

Opera10.0+、iOS Mobile Safari3.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?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

 

html 標籤內添加小圖標。

<span> </span>

 

給標籤訂義字體。

span {
 font-family: "icomoon";
}

 

5.字體圖標的追加

若是工做中，原來的字體圖標不夠用了，咱們須要添加新的字體圖標到原來的字體文件中。

把壓縮包裏面的 selection.json 重新上傳，而後選中本身想要新的圖標，重新下載壓縮包，並替換原來的文件便可。

 

 

三.CSS三角

網頁中常見一些三角形，使用 CSS 直接畫出來就能夠，沒必要作成圖片或者字體圖標。

一張圖， 你就知道 CSS 三角是怎麼來的了, 作法以下： 

div {
 width: 0;
 height: 0;
 line-height: 0;
 font-size: 0;
 border: 50px solid transparent;
 border-left-color: pink;
}

 

四.CSS用戶界面樣式

所謂的界面樣式，就是更改一些用戶操做樣式，以便提升更好的用戶體驗。

 更改用戶的鼠標樣式

 表單輪廓

 防止表單域拖拽

 

1.鼠標樣式cursor

li {cursor: pointer; }

設置或檢索在對象上移動的鼠標指針採用何種系統預約義的光標形狀。

 

 

2.輪廓線outline

給表單添加 outline: 0; 或者 outline: none; 樣式以後，就能夠去掉默認的藍色邊框。 

input {outline: none; }

 

3.防止拖拽文本或resize

實際開發中，咱們文本域右下角是不能夠拖拽的。 

textarea{ resize: none;}

 

五.vertical-align屬性應用

CSS 的 vertical-align 屬性使用場景： 常常用於設置圖片或者表單(行內塊元素）和文字垂直對齊。

官方解釋： 用於設置一個元素的垂直對齊方式，可是它只針對於行內元素或者行內塊元素有效。 

vertical-align : baseline | top | middle | bottom

 

1.圖片、表單和文字對齊

圖片、表單都屬於行內塊元素，默認的 vertical-align 是基線對齊。 

此時能夠給圖片、表單這些行內塊元素的 vertical-align 屬性設置爲 middle 就可讓文字和圖片垂直

居中對齊了。

 

2.解決圖片底部默認空白縫隙問題

bug：圖片底側會有一個空白縫隙，緣由是行內塊元素會和文字的基線對齊。

主要解決方法有兩種：

給圖片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

把圖片轉換爲塊級元素 display: block;

 

六.溢出的文字省略號顯示

1. 單行文本溢出顯示省略號--必須知足三個條件 

/*1. 先強制一行內顯示文本*/
 white-space: nowrap; （ 默認 normal 自動換行）
 /*2. 超出的部分隱藏*/
 overflow: hidden;
 /*3. 文字用省略號替代超出的部分*/
 text-overflow: ellipsis;

2. 多行文本溢出顯示省略號

多行文本溢出顯示省略號，有較大兼容性問題， 適合於webKit瀏覽器或移動端（移動端大部分是webkit內核）

overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個塊元素顯示的文本的行數 */
-webkit-line-clamp: 2;
/* 設置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;