15. 常见技巧
15.1 精灵图
出现原因 一个网页往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）核心原理：将网页中的一些小背景图像整合成一个 精灵图的使用 精灵技术主要是针对于背景图片（产品类的一般经常更换所以一般不用）的使用先设置好盒子和背景图片，然后把精灵图移动位置到盒子的位置露出来，此时可以使用background-position（动的是背景图片）移动的距离就是这个目标图片的x和y坐标，注意与网页中的坐标有所不同（background-position是第四象限）往上、往左走是负值15.2 字体图标
主要用于显示网页中通用的、常用的一些小图标
精灵图的缺点 图片文件较大图片本身放大缩小会失真一旦脱制作完成想要更换非常复杂
字体图标iconfont 展示是图标，但本质是字体
字体图标的优点
轻量级、灵活性、兼容性
字体图标的使用(本地)
下载字体包在http://icomoon.io 、 / 阿里巴巴字体库
引入把fonts文件夹放入页面的根目录中，引入<link rel="stylesheet" href="./fonts/iconfont.css">
使用：
给标签加类名
<!-- iconfont是必须带的类名 --> <!-- 使用一个标签加上字体图标类名 --> <span class="iconfont icon-xxx"></span>
unicode编码
<span class="iconfont"><span>
伪元素
.one::after {content: "\e882"; }
参考链接
15.3 CSS画三角/扇形/圆形
三角相当于用边框先画了一个正方形
把需要的颜色留下，其他的改成transparent透明色即可
三角的大小完全取决于border 的粗细10px -->100px
.box {width:0;height:0;border:10px solid transparent;border-bottom-color:10px solid skyblue;}
扇形
三角的基础上加圆角
.box {width:0;height:0;border:100px solid transparent;border-radius:100px;border-bottom-color:skyblue;}
圆形
给正方形盒子设置圆角
.box {width:100px;height:100px;background-color:red;border-radius:50%;}
15.4 用户界面样式
界面样式，就是改变一些用户操作样式，提高用户体验
鼠标样式cursor
选择器 {/* 小白箭头 */cursor：default;/* 小手 */cursor：pointer;/* 十字架移动 */cursor：move;/* 红色禁止 */cursor：not-allowed;}
轮廓线outline
选择器 {outline：0;/* 或 */outline：none;}
防止拖拽文本域resize
textarea {resize: none;}
注意：文本域尽量放一行
15.5 vertical-align文字和图片或表单（行内块元素）垂直对齐
用于设置一个元素的垂直对齐方式，但是其值针对于行内元素或者行内块元素有效
vertical-align：baseline；（默认文字和图片是基线对齐）
vertical-align：top；
vertical-align：middle；
vertical-align：bottom；
文本域和文本域外旁边的请您留言也可通过此方法middle
图片底侧空白缝隙的解决 原因
图片默认和文字基线对齐，所有留了空隙解决方案
方法一：给图片添加vertical-align：middle、top、bottom等（提倡使用）
方法二：把图片转换为块级元素（因为块级元素没有vertical-align属性所有不存在基线对齐）
15.6 margin负值的使用
盒子浮动后，本来两个都有1px的边框，通过margin-left：-1；可以使右边的左边框压住左边的右边框使得1+1=1注意：此时再写鼠标经过hover改变边框颜色时，盒子的右边框会被盖住所有需要在鼠标经过某个盒子时，改成相对定位（需要占有位置，要不然后面的盒子就会把它挤啦），相对定位的盒子会压住其他标准流的盒子如果这个盒子里还有子盒子，而子盒子也是相对定位时（子绝父相）所有只能使用z-index提高层级
15.7 文字环绕浮动元素
巧妙利用浮动元素不会压住文字
在大盒子中，不需要右边的标准流盒子添加浮动，左边的图片盒子左浮动即可
15.8 版心
添加一个类
.w {width:1200px;margin:0 auto;}
