1. 精灵图
1.1 为什么需要精灵图
网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术
核心原理：精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中 ，这样服务器只需要一次请求就可以了
1.2 精灵图（sprites）的使用
核心：
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现---background-position
- 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
2. CSS 三角
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标
其实通过一张图， 就能知道 CSS 三角是怎么来的了
做法如下：
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
3. CSS 用户界面样式
3.1 鼠标样式 cursor
在不同的使用场景下，通过cursor属性改变鼠标在屏幕的样式， 即：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
语法：
li {cursor: pointer; }
属性值： default -- 小白图标（默认） pointer -- 小手 move -- 移动 text -- 文本 not-allowed -- 禁止
3.2 轮廓线 outline
当鼠标定位在表单上的时候，表单都会自带有默认的蓝色边框，但是通过给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
input {outline: none; }
3.3 防止拖拽文本域 resize
实际开发中，通过textarea属性可以使文本域右下角不可以拖拽
textarea{ resize: none;}
4. vertical-align 属性应用
vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
语法：
vertical-align : baseline | top | middle | bottom
- baseline -- 元素放置在父元素的基线上
- top -- 把元素的顶端与行中最高元素的顶端对齐
- middle -- 把此元素放置在父元素的中部
- bottom -- 把元素的顶端与行中最低的元素的顶端对齐
4.1 图片底部默认空白缝隙问题
bug：默认情况下图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
注意：图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐
主要解决方法有两种：
- 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
- 把图片转换为块级元素 display: block;
5. 溢出的文字省略号显示
单行文本溢出显示省略号:
想要解决单行文本溢出显示省略号--必须满足三个条件：
- 先强制一行内显示文本
- 将超出的部分隐藏
- 超出部分文字用省略号替代
语法：
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认是 normal 为自动换行）
/*2. 将超出的部分隐藏*/
overflow: hidden;
/*3. 超出部分文字用省略号替代*/
text-overflow: ellipsis;
多行文本溢出显示省略号:
想要解决多行文本溢出显示省略号--有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单
语法：
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
