一、精灵图
精灵图有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
精灵图主要针对背景图片使用。
使用精灵图的核心是设置背景图片 的 backgroud-position （负值）。
二、字体图标
主要用于显示网页中通用、常用的一些小图标。
字体图标有什么优点？
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出 来，减少了服务器请求；
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
兼容性：几乎支持所有的浏览器，请放心使用。
三、CSS 做三角形
核心原理是CSS 中边框连接处是斜边连接的三角形的步骤
指定盒子的宽、高为 0 让四条边都靠在一起；
2. 用 border 属性绘制透明边框border: 100px solid transparent;
3. 需要哪个方向的三角形，就给哪个方向指定颜色（顺序：上右下左）border-color: red green blue orange;
4. 设置行高和字体，以保证兼容性line-height: 0; font-size: 0;
1. 绘制三角形时先选择红色方便调整定位； 2. top 用负值表示向上移动； 3. 移动的距离是两倍的边框宽度； 4. 后不要忘记把三角形的颜色设置成父盒子的颜色。
四、鼠标样式
取消表单输入框的轮廓outline: none;
vertical-align 实现行内块和文字垂直居中对齐
如何解决图片底边的缝隙？
添加 vertical—align ： middle | top | bottom （推荐使用）； 把图片转换为块级元素 display: block; 。
五、 单行文字溢出省略号显示
/* 1. 强制在一行显示文本，默认 normal 会自动换行 */ white-space: nowrap;
/*2 . 超出的部分隐藏 */ overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */ text-overflow: ellipsis;
多行文字溢出省略号显示
/*1. 超出的部分隐藏 */ overflow: hidden;
/*2. 文字用省略号替代超出的部分 */ text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */ display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;