- 能夠使用精靈圖
- 能夠使用字體圖標(biāo)
- 能夠?qū)懗鯟SS三角
- 能夠?qū)懗龀Ｒ姷腃SS用戶界面樣式
- 能夠說出常見的布局技巧
1. 精靈圖
- 為什么需要精靈圖？
一個(gè)網(wǎng)頁中往往會應(yīng)用很多小的背景圖作為修飾，當(dāng)網(wǎng)頁中圖像過多時(shí)，服務(wù)器就會頻繁地接收和發(fā)送請求圖片，造成服務(wù)器請求壓力過大，這將大大降低頁面的加載速度。
因此，為了有效地減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites、CSS雪碧）。
精靈技術(shù)的目的
有效地減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度。
1.2 精靈圖（sprites)的使用
使用精靈圖核心：
- 精靈技術(shù)主要針對背景圖片使用。就是把多個(gè)小背景圖片整合到一張大圖片中。
- 這個(gè)大圖也稱為sprites精靈圖或者雪碧圖
- 移動背景圖片位置，此時(shí)可以使用background-position。
- 移動的距離就是這個(gè)目標(biāo)圖片的X和Y坐標(biāo)。注意網(wǎng)頁中的坐標(biāo)有所不同。
- 因?yàn)橐话闱闆r下都是往上往左移動，所以數(shù)值是負(fù)值。
- 使用精靈圖的時(shí)候需要精準(zhǔn)測量，每個(gè)小背景圖片的大小和位置。
使用精靈圖核心總結(jié)： - 精靈圖主要針對于小的背景圖片使用。
- 主要借助于背景位置來實(shí)現(xiàn)—background-position.
- 一般情況下精靈圖都是負(fù)值。（
2. 字體圖標(biāo)
2.1 字體圖標(biāo)的產(chǎn)生
字體圖標(biāo)使用場景：主要用于顯示網(wǎng)頁中通用、常用的一些小圖標(biāo)。
精靈圖是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯。
- 圖片文件比較大。
- 圖片本身放大縮小會失真
- 一旦圖片制作完畢想要更換非常復(fù)雜。
通過字體圖標(biāo)（iconfont)技術(shù)，可以很好地解決以上問題。
字體圖標(biāo)可以為前端工程師提供一種高效地圖標(biāo)使用方式，展示的是圖標(biāo)，本質(zhì)屬于字體。
2.2 字體圖標(biāo)的優(yōu)點(diǎn)
- 輕量級：一個(gè)圖標(biāo)字體要比一系列的圖像要小。一旦字體加載了，圖標(biāo)就會馬上渲染出來，減少了服務(wù)器請求。
- 靈活性：本質(zhì)其實(shí)是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果、旋轉(zhuǎn)等。
- 兼容性：幾乎支持所有的瀏覽器，請放心使用。
注意：字體圖標(biāo)不能替代精靈技術(shù)，只是對工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化。
總結(jié)：
- 如果遇到一些結(jié)構(gòu)和樣式比較簡單的小圖標(biāo)，就用字體圖標(biāo)。
- 如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點(diǎn)的小圖片，就用精靈圖。
2.3字體圖標(biāo)的使用
字體圖標(biāo)是一些網(wǎng)頁常見的小圖標(biāo)，我們直接網(wǎng)上下載即可。因此使用可以分為：
- 字體圖標(biāo)的下載
-
字體圖標(biāo)的引入（引入到我們html頁面中）
-
打開css文件
- 復(fù)制開頭文件到被引入的html文件中，注意文件路徑
- 字體圖標(biāo)的追加（以后添加新的小圖標(biāo)）
可以將selection.json上傳到icomoon當(dāng)中，就可以在保留已有字體圖標(biāo)的基礎(chǔ)上進(jìn)行添加。
字體圖標(biāo)的下載
- icomoon字庫 http://icomoon.io
成立于2011年，推出了第一個(gè)自定義圖標(biāo)生成器，它允許用戶選擇所需要的圖標(biāo)，使它們成一字型。該字庫內(nèi)容種類繁多，非常全面，唯一遺憾就是國外服務(wù)器，打開網(wǎng)速慢。 - 阿里 iconfont字庫 http://www.iconfont.cn
包含了淘寶圖標(biāo)和阿里媽媽圖標(biāo)庫?？梢允褂肁I制作圖標(biāo)上傳生成。
3. 等腰三角形
- 設(shè)置width:0；heigt:0;
- 設(shè)置邊框，大小為所需三角形的高，顏色設(shè)置為透明：transparent
- 根據(jù)所需三角形的方向覆蓋設(shè)置邊框，顏色。
4. CSS用戶界面樣式
4.0 什么是界面樣式
所謂界面樣式，就是更改一些用戶操作樣式，以便提高更好的用戶體驗(yàn)。
- 更改用戶的鼠標(biāo)樣式
- 表單輪廓
- 防止文本域拖拽
4.1 鼠標(biāo)樣式cursor
li { cursor:pointer;}
設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
- default : 小白 默認(rèn)
- pointer : 小手
- move : 移動
- text : 文本
- not-allowed : 禁止
4.2 輪廓線 outline
給表單添加outline:0;或者outline:none;樣式之后，就可以去掉默認(rèn)的藍(lán)色邊框。
input{ outline: none; }
4.3 防止文本域拖拽
用<textarea>標(biāo)簽的表單域默認(rèn)右下角可以拖拽表單域，這時(shí)候需要添加
resize:none
就可以防止文本域的拖拽了；同時(shí)它也有輪廓線，也可以用outline:none；去掉。
注意：文本域標(biāo)簽
<textarea name="" id="" cols="30" rows="10"></textarea>
盡量放在一行書寫，如果轉(zhuǎn)行，文本域就會出現(xiàn)空白行。
5. vertical-align 屬性應(yīng)用
CSS的vertical-align屬性使用場景：經(jīng)常用于設(shè)置圖片或者表單（行內(nèi)塊元素）和文字垂直對齊。
官方解釋：用于設(shè)置一個(gè)元素的垂直對齊方式，但是它只針對于行內(nèi)元素或者行內(nèi)塊元素有效。
語法：
vertical-align : baseline | top | middle | bottom
- baseline : 默認(rèn)。元素放置在父元素的基線上。
- top : 把元素的頂端與行中最高的元素的頂端對齊。
- middle : 把此元素放置在父元素的中部。
-
bottom : 把元素的頂端與行中最低的元素的頂端對齊。
5.2 解決圖片底部默認(rèn)空白縫隙問題
bug:圖片底側(cè)會有一個(gè)空白縫隙，原因是行內(nèi)塊元素會和文字基線對齊。
主要解決方法有兩種：
- 給圖片添加vertical-align：middle|top|bottom等。（提倡使用）
- 把圖片轉(zhuǎn)換為塊級元素：display:block;
6. 溢出的文字省略號顯示
- 單行文本溢出顯示省略號
- 多行文本溢出顯示省略號
6.1 單行文本溢出顯示省略號--必須滿足三個(gè)條件
- 先強(qiáng)制一行內(nèi)顯示文本
white-space:nowrap;(默認(rèn) normal 自動換行） - 超出的部分隱藏
overflow:hidden; - 文字用省略號替代超出的部分
text-overflow:ellipsis;
6.2 多行文本溢出顯示省略號
多行文本溢出顯示省略號，有較大兼容性問題，適合于webkit瀏覽器或移動端（移動端大部分是wbkit內(nèi)核）
overflow:hidden;
text-overflow:ellipsis;
/*彈性伸縮盒子模型顯示*/
display:-webkit-box;
/*限制在一個(gè)塊元素顯示的文本的行數(shù)*/
-webkit-line-clamp: 2;
/*設(shè)置或檢索伸縮盒對象的子元素排列方式*/
-webkit-box-orient:vertical;
更推薦讓后臺人員來做這個(gè)效果，因?yàn)楹笈_人員可以設(shè)置顯示多少個(gè)字，操作更簡單。
7. 常見布局技巧
巧妙利用一個(gè)技術(shù)更快更好的布局：
- margin負(fù)值的運(yùn)用
- 文字圍繞浮動元素
- 行內(nèi)塊的巧妙運(yùn)用
- css三角強(qiáng)化
7.1 margin負(fù)值的運(yùn)用
- 讓每個(gè)盒子margin往左側(cè)移動 -1px 正好壓住相鄰盒子邊框
- 鼠標(biāo)經(jīng)過某個(gè)盒子的時(shí)候，提高當(dāng)前盒子的層級即可（如果沒有定位，則加相對定位（保留位置），如果有定位，則加z-index)
7.2 文字圍繞浮動元素
利用浮動文字會圍繞元素的原理，在盒子中直接添加文字，然后給對應(yīng)的圖片等塊元素添加浮動，文字就會自動圍繞元素。
7.3 行內(nèi)塊巧妙運(yùn)用
行內(nèi)塊元素可以設(shè)置text-align來進(jìn)行居中顯示。
7.4 三角巧妙運(yùn)用
當(dāng)我們需要做出一個(gè)直角三角形，同樣可以用邊框來實(shí)現(xiàn)：
- 給其他邊框透明，所需方向邊框顏色
- 樣式設(shè)置為solid
-
將上/下邊框調(diào)大，左右邊框調(diào)小
例：
直角三角形
.box1{
width: 0;
height: 0;
/*把上邊框?qū)挾日{(diào)大*/
/*border-top: 100px solid transparent;*/
/*border-right: 50px solid skyblue;*/
/*左邊和下邊的邊框?qū)挾仍O(shè)置為0*/
/*1. 只保留右邊的邊框有顏色*/
border-color: transparent red transparent transparent;
/*2. 樣式都是solid*/
border-style: solid;
/*3. 上邊框?qū)挾纫?，右邊?寬度稍小， 其余邊框改為0*/
border-width: 100px 50px 0 0;
}
同時(shí)也可以只設(shè)置上邊框和右邊框，同樣可行，如下：
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
8. 初始化
不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，為了消除不同瀏覽器對html文本呈現(xiàn)的差異，照顧瀏覽器的兼容，我們需要對CSS初始化。
簡單理解：CSS初始化是指重設(shè)瀏覽器的樣式。（也稱為CSS reset)
每個(gè)網(wǎng)頁都必須首先進(jìn)行CSS初始化。
這里我們以 京東CSS初始化代碼為例。
Unicode編碼字體：
把中文字體的名稱用相應(yīng)的Unicode編碼來替代，這樣就可以有效的避免瀏覽器解釋CSS代碼時(shí)候出現(xiàn)亂碼的問題。
比如：
黑體\9ED1\4F53
宋體\5B8B\4F53
微軟雅黑\5FAE\8F6F\96C5\9ED1
