CSS高级技巧---精灵图、字体图标、布局技巧
1、精灵图
1）原理
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
2）使用
使用精灵图核心：
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position。
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的左边有所不同。
5.一般情况下往上往左移动，数值是负值。（一般情况下，都是负值）
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<style>.box1 {width: 60px;height: 60px;margin: 100px auto;background: url(images/sprites.png) no-repeat;background-position: -182px 0;}.box2 {width: 27px;height: 25px;margin: 200px;background: url(images/sprites.png) no-repeat;background-position: -155px -106px;}</style>
<body><div class="box1"></div><div class="box2"></div>
</body>2、字体图标
字体图标展示的是图标，但是本质上是字体，具有字体的属性。
字体图标优点：
字体图标下载
下载网站：
icomoon字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/
阿里的字体图标使用方法：
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
3、CSS三角
由下面代码可知，制作一个三角可以让其他三个三角是透明的即可。
<style>.box1 {width: 0;height: 0;border-top: 10px solid skyblue;border-right: 10px solid rgb(92, 221, 116);border-bottom: 10px solid rgb(226, 235, 148);border-left: 10px solid rgb(245, 155, 210);}</style>
<body><div class="box1"></div>
</body>
<style>.box2 {width: 0;height: 0;/* 为了照顾兼容性 */line-height: 0;font-size: 0;border: 10px solid transparent;border-top-color: skyblue;}</style>
<body><div class="box2"></div>
</body>
3、用户界面样式
1）更改用户的鼠标样式
语法：li { cursor: pointer; }
2）表单轮廓线
给表单添加outline:0；或者outline：none；样式之后，就可以去掉默认的蓝色边框。
3）防止表单域拖拽
语法：textarea{ resize: none; }
4、vertical-align属性应用
1）对齐方式
vertical-align属性应用场景：用于设置图片或者表单（行内块元素）和文字垂直对齐。
但是它只针对于行内元素或者行内块元素有效。
语法（默认和基线对齐）：
vertical-align : baseline | top | middle | bottom
2）图片底侧空白缝隙问题
由于图片默认和文字是基线对齐，所以图片底侧会出现空白缝隙。
解决方法：
1.给图片添加vertical-align : top | middle | bottom
2.把图片转换为块级元素display:block;
5、溢出的文字省略号显示
1）单行文本溢出显示省略号
必须满足三步：
1.先强制一行内显示文本
nowrap不换行，默认normal自动换行
white-space: nowrap;
2.超出部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: ellipsis;
2）多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内 核）。
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;6、常见布局技巧
1）margin负值的运用
<style>ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid skyblue;margin-left: -1px;}ul li:hover {border: 1px solid red;}</style>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
由此，我们发现第四个盒子的右边框被压到了，此时只需要当前的盒子添加position: relative;因为相对定位会压住其他标准流的盒子。
<style>ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid skyblue;margin-left: -1px;}ul li:hover {position: relative;border: 1px solid red;}</style>注意：如果盒子都有定位，则加z-index。
2）文字围绕浮动元素
---运用浮动元素不会压住文字的技巧
<style>* {margin: 0;padding: 0;}.box {float: left;width: 250px;height: 100px;background-color: skyblue;margin: 0 auto;padding: 5px}.photo {float: left;width: 180px;height: 80px;margin-right: 5px;}.photo img {width: 100%;}</style>
<body><div class="box"><div class="photo"><img src="images/jianlai.jpg" alt=""></div><p>岁岁平，岁岁安，岁岁平安</p></div>
</body>
3）行内块巧妙运用
<style>* {margin: 0;padding: 0;}.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .now,.box .will {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style>
<body><div class="box"><a href="#" class="prev"><<上一页</a><a href="#" class="now">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="will">...</a><a href="#" class="next">>>下一页</a>到第<input type="text">页<button>确定</button></div>
</body>
4）CSS三角强化
<style>* {margin: 0;padding: 0;}.box1 {width: 0;height: 0;/* border-top: 20px solid transparent;border-right: 10px solid skyblue;border-bottom: 0px solid rgb(226, 235, 148);border-left: 0px solid rgb(245, 155, 210); */border-color: transparent skyblue transparent transparent;border-style: solid;border-width: 20px 10px 0 0;}</style>
<style>* {margin: 0;padding: 0;}.box1 {margin: 30px 0;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;color: #fff;font-weight: 700px;}.ms {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;}.ms i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 12px 0 0;}.ori {font-size: 12px;color: gray;text-decoration: line-through;}</style>
<body><div class="box1"></div><div class="price"><span class="ms">￥1650<i></i></span><span class="ori">￥5650</span></div>
</body>
7、CSS初始化
每个网页都必须首先进行CSS初始化。