1.精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送
请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称
CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了
1.主要借助于背景位置来实现—先准备一个刚好装的下小图标的盒子，然后放到合适的位置，再插入背景图
background：url（插入背景图） no-repeat x y；注意插入背景图时是图片的左上角对齐盒子的左上角来放的，因此要通过x y的负值来移动到想要的精灵图标
2. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
2.字体图标
字体图标 iconfont可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
总结：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：
- 字体图标的下载
- 字体图标的引入 （引入到我们html页面中）
- 字体图标的追加 （以后添加新的小图标）
icomoon 字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn/
https://fontawesome.dashgame.com/
下载步骤:
引用
打开demo.html
追加
css三角
案例：京东三角
4.用户界面样式
- 更改鼠标样式
- 表单轮廓
- 防止表单拖拽
4.1更改鼠标样式
通过属性cursor，来设置鼠标经过的地方，光标的形状是怎样的
li{
cursor: pointer;}
/*设置当鼠标经过li时光标变成小手形状*/
| 属性值 | 说明 |
|---|---|
| default | 默认，白箭头形式 |
| pointer | 小手 |
| move | 移动光标 |
| text | I字形的文本光标 |
| not-allowed | 禁止光标 |
4.2表单控件
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。 
input {
outline: none;
}4.3防止文本拖拽
resize属性来设置文本域textarea，防止文本域拖拽
textarea{ resize: none;}5.vertical-align
用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
vertical-align : baseline | top | middle | bottom 
属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐了。
<style>
img {
vertical-align: middle；
}
</style>
<body>
<span><img src="images/adv.jpg" alt="">ddddj </span>
</body>属性的使用场景： 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
- 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
- 把图片转换为块级元素 display: block;
6.溢出文字省略号显示
单行文本溢出显示省略号–必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis; 7.常见的布局技巧
1. margin负值运用
如何做到边框重叠1+1还是等于1
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框 2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如 果有定位，则加z-index） ，用相对定位，不脱标
2.文字围绕浮动元素
浮动就是为文字围绕产生的
如何设计下面的盒子？
准备一个父盒子，里面放一个子盒子装视频，设置为左浮，再设置右边距，就行了，文字就会在旁边显示，而且不会压住文字。
3. 行内块巧妙运用
页码在页面中间显示:而且有边距，用浮动还要设置边距，而用行内块不能设置，
- 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
- 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
CSS 三角强化
css初始化
这里我们以 京东CSS初始化代码为例。
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码
的问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
