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;
