1、精靈圖
使用原因：一個(gè)網(wǎng)頁(yè)往往會(huì)有很多小的背景圖片作為裝飾，為了有效減少接收和發(fā)送請(qǐng)求的次數(shù)，提供頁(yè)面加載速度，所以出現(xiàn)了精靈技術(shù)。核心原理就是將小圖片整合到一張圖里，這樣瀏覽器只需要發(fā)送一次請(qǐng)求到服務(wù)器就可以了。
屬性：background-position
使用原理：先量好背景圖片的寬和高，然后創(chuàng)建一個(gè)盒子，大小和背景圖片一樣，插入整張精靈圖到盒子中，圖片默認(rèn)都是在盒子的左上角，再看需要的背景圖片在X和Y軸的哪個(gè)位置，調(diào)整好位置即可顯示出來(lái)。
2、字體圖標(biāo)
優(yōu)點(diǎn)~
字體圖標(biāo)使用方法
以icomoon圖庫(kù)為例，挑選需要的圖標(biāo)下載，解壓，引入html文件使用。
注意點(diǎn)：1、fonts文件夾需要和html文件放在一起
? ? ? ? ? ? ? ?2、把解壓出來(lái)的style.css里的樣式復(fù)制到html文件style里
? ? ? ? ? ? ? ?3、復(fù)制解壓出來(lái)的html里面圖標(biāo)對(duì)應(yīng)的方框，到需要添加字體圖標(biāo)的地方
? ? ? ? ? ? ? ?4、字體圖標(biāo)的字體需要和樣式里的字體一致
字體圖標(biāo)更新追加方法
阿里巴巴矢量圖標(biāo)庫(kù)
1.搜索--加入購(gòu)物車--添加至項(xiàng)目---下載到本地--解壓，挑選字體文件格式（四種：eot/svg/ttf/woff，建議放入單獨(dú)的字體文件夾 ）與樣式文件
iconfont.css（head中引入）---若將字體文件與樣式文件單獨(dú)放，在css文件中修改字體src地址，改成對(duì)應(yīng)的；
2.寫(xiě)入公共樣式.iconfont,使用i標(biāo)簽插入<i></i>; 通過(guò)class名引入到body中，class名稱為iconfont.css中對(duì)應(yīng)圖標(biāo)的class名;
舉例<i class="iconfont icon-scan></i> ---iconfont 為公共，不能修改，只能修改后面的cass名，可單獨(dú)設(shè)置相應(yīng)個(gè)別圖標(biāo)樣式；
3、CSS三角做法
4、CSS用戶界面樣式
（1）更改用戶的鼠標(biāo)樣式；（2）表單輪廓；（3）防止文本域拖拽
（1）更改用戶的鼠標(biāo)樣式cursor
（2）去除表單的默認(rèn)藍(lán)色輪廓outline
input ： ｛outline：none或者0｝
（3）防止拖拽文本域resize
textarea ： ｛resize：none或者0｝
5、vertical-align屬性應(yīng)用（設(shè)置元素垂直對(duì)齊，行內(nèi)塊）
6、溢出文字省略號(hào)做法
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?單行文本省略號(hào)
? ? ? ? ? ? ? ?多行文本省略號(hào)（了解，兼容性差，更推薦讓后臺(tái)做）
????????????????????????overflow:?hidden;
????????????????????????text-overflow:?ellipsis;
????????????????????????display:?-webkit-box;
????????????????????????-webkit-line-clamp:?2;
????????????????????????-webkit-box-orient:?vertical;
????????????????????????white-space:?normal?!important;
? ? ? ? ? ? ? ? ? ? ? ? ? word-wrap:?break-word;
7、常見(jiàn)布局技巧
（1）margin負(fù)值運(yùn)用，避免邊框重疊變粗，如邊框?yàn)?px，則margin-1px
如果需要鼠標(biāo)經(jīng)過(guò)時(shí)改變邊框顏色，先偽類顏色，然后加上一句提升層級(jí)，相對(duì)定位（其他定位不保留位置，會(huì)影響后面盒子）或者z-index，因?yàn)榍懊嬖O(shè)置了margin負(fù)值，壓住了盒子一個(gè)邊框，所以需要加一句提升層級(jí)，使得鼠標(biāo)經(jīng)過(guò)某個(gè)盒子時(shí)，提高它的優(yōu)先級(jí)完整顯示出來(lái)。
（2）文字圍繞浮動(dòng)
利用浮動(dòng)只會(huì)壓住標(biāo)準(zhǔn)流盒子，不會(huì)壓住里面的內(nèi)容，可以布局文字圍繞效果。先設(shè)置一個(gè)大盒子，里面左右一個(gè)盒子放圖片和文字，給圖片的盒子設(shè)置大小并浮動(dòng)，文字自然環(huán)繞。
（3）行內(nèi)塊運(yùn)用
行內(nèi)元素，行內(nèi)塊元素可以用text-align：center水平居中
3、三角強(qiáng)化運(yùn)用
overflow:?hidden;
????????????text-overflow:?ellipsis;
????????????display:?-webkit-box;
????????????-webkit-line-clamp:?2;
????????????-webkit-box-orient:?vertical;
????????????white-space:?normal?!important;
????????????word-wrap:?break-word;
