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