1.CSS精灵图
CSS的精灵技术就是将多张小图片整合到一张大图片当中，一次性提供给浏览器。因为网页当中一般都会存在许多的图片，如果浏览器渲染每一张图片的时候都向服务器请求一次数据，这样频繁的请求会严重影响页面的加载速度。
使用精灵图的方式主要通过background-position来实现，精灵图只适用于较小的图片。实现的方式大概就是用预先做好的盒子，移动背景图片的位置，只有在盒子内的元素才会被显示出来，就像一个mask一样。比如这样的一张精灵图，我需要其中两个图标，在html中定义好两个盒子之后，在CSS中书写下列代码即可。
.box1 {
width: 60px;
height: 60px;
background: url(images/sprites.png);
background-position: -182px 0;
margin: 30px auto;
}
.box2 {
width: 27px;
height: 25px;
background: url(images/sprites.png) no-repeat -155px -106px;
margin: 90px auto;
}
特别注意坐标轴方向，x轴向右为正，y轴向下为正。
2.字体图标
字体图标是一种特殊的图标使用方式，虽然展示在页面上的是图标，但是实际上却是字体。相比于图片，字体的图标更加轻量，字体加载了，字体图标就会立刻显示。由于字体图标的本质是文字，所以修改起来也比较方便。字体图标的兼容性也比较强，几乎所有的浏览器都支持。
常用的下载字体图标的网站：
1.icomoon 字库 http://icomoon.io
2.阿里 iconfont 字库 http://www.iconfont.cn/
选择需要的图标下载之后，在解压后的文件里面找到font文件夹，将其放在我们编写html文件的根目录下，让后在CSS中书写一下代码引入字体图标
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
在需要添加字体图标的盒子里面，还要进行下列操作
复制图示图标并且放在盒子里面即可使用字体图标。
3.CSS三角
在网页中经常可以见到一些三角形的图标，除了通过引入图片来得到三角形，CSS也是可以直接得到三角形的。代码如下
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
最后就可以得到一个向右的三角形。
可以发现我们利用CSS制作三角形的方法就是定义一个无高宽的盒子，用边框来得到三角形，通过改变边框的粗细还能得到其他各种各样的三角形。
4.用户界面样式
4.1鼠标样式
当我们把鼠标移动到某个链接上面的时候，会发现鼠标的箭头有时候变成了一个小手，这就是通过改变鼠标样式来实现的。
语法如下：
li {cursor: pointer; }
除了pointer，还有其他可以添加的属性。
4.2轮廓线
在学习表单的时候，我们使用过input来让用户输入内容，但是我们发现当鼠标确认要开始输入内容的时候，外围会出现一个轮廓线。
比如这样，当我鼠标准备输入内容的时候，边框就会加粗。如何取消这个效果呢？
只需要给input添加一个outline属性就可以了
input {
outline: none;
}
4.3防止文本域拖拽
在添加文本域的时候，会发下右下角有一个小三角，我们拖动这个小三角可以任意改变文本域的大小。我们并不希望用户能这样做，因为这样势必会打乱页面当中其他元素的布局，为了阻止文本域拖拽，我们也给文本域添加CSS样式。
textarea{ resize: none;}
这样文本域的大小就不能被随意更改了。
5. vertical-align 属性应用
这个属性是用来设置元素的对齐方式的，有时候我们需要图标和文字顶部或者底部或者中心对齐，就可以使用这个属性来实现。
vertical-align : baseline | top | middle | bottom
一张图简单解释了这几种对齐方式的区别
6.溢出部分文字用省略号表示
这里只做了解，分别看一下单行文字和多行文字的情况
单行文字
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
多行文字：
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
