目录
一、精灵图
1、为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
核心原理：
将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。
2、精灵图的使用
使用精灵图核心：
① 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中；
② 这个大图片也称为 sprites 精灵图 或者 雪碧图；
③ 移动背景图片位置， 此时可以使用 background-position；
④ 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同；
⑤ 因为一般情况下都是往上往左移动，所以数值是负值；
⑥ 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结：
① 精灵图主要针对于小的背景图片使用；
② 主要借助于背景位置来实现---background-position；
③ 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
二、字体图标
1、字体图标的产生
字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
图片文件还是比较大的；
图片本身放大和缩小会失真；
一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2、字体图标的优点
① 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
② 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
③ 兼容性：几乎支持所有的浏览器，请放心使用。
注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
① 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
② 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
使用步骤：
字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：
字体图标的下载；
字体图标的引入 （引入到我们html页面中）；
字体图标的追加 （以后添加新的小图标）。
三、CSS三角
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-color: red green blue black;
line-height:0;
font-size: 0;
}注意：
我们用css 边框可以模拟三角效果；
宽度高度为0；
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0。
四、CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
1、鼠标样式 cursor
li {
cursor: pointer;
}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
2、轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {
outline: none;
}3、防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea{
resize: none;
}四、vertical-align 属性应用
1、定义
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
vertical-align : baseline | top | middle | bottom 
2、图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
3、解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
① 给图片添加 vertical-align:middle | top| bottom 等；（提倡使用的）
② 把图片转换为块级元素 display: block。
五、溢出的文字省略号显示
1、单行文本溢出显示省略号
单行文本溢出显示省略号--必须满足三个条件：
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;2、多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）。
/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
六、常见布局技巧
1、margin负值的运用
特点：
① 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框；
② 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）。
2、文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性。
3、行内块巧妙运用
页码在页面中间显示：
把这些链接盒子转换为行内块， 之后给父级指定 text-align:center；
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中。
七、CSS综合项目
1、项目效果
要自己思考了，敲了，再看答案哦！
2、参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS三角强化的巧妙运用</title>
<style>
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color:red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
</html>恭喜你！CSS已经学完啦，大家休息一下，关注我，敬请期待下一期，下一期给大家分享HTML5 和 CSS3 提高的部分！
如果对您有所帮助，点个小小的赞和关注吧，感谢您的支持！
9863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
