一、精灵图
1、使用方法
1）看是几倍图（X几倍）， 在开发的时候就恢复成X1倍。
2） 等倍放大精灵图，
3）定位需要的元素图片的左上角.
2、CSS代码示例
(x,y为左上角坐标,第一点获取的地址)
background:url地址 no-repeat -x -y
background-size: x auto
二、CSS3 的一些问题：
1、css3的行高是包括边框的，所以字行高需要减掉上下边框 ，才能行居中
2、经验之谈：
1) 如果元素上边的是用绝对定位，那么他就不占空间大小，下面如果有元素会顶上去
为了避免这种情况，下边用的元素 需要设置padding-top = 上边元素所占的高度
2) list 样式不占一般需要去除样式：
ul {list-style: none} 去点
magin 0 padding 0 去除缩进
3）列表class样式
当我们ul下有很多li 的时候，想对每个li 进行特殊设置。就很烦，每个li要设置一个class吗？
可以设置一样的前缀，后面带上特殊编号 例如：class="local-nav-iconx" (x 可以是1、2、3或其他)
然后我们在css 中就这么设置 li [class^=local-nav-icon]{ 设置全部li的样式 }
li .local-nav-icon2 {设置第二个li 的样式}
或是 ul li:nth-child(x){也行}
4） nth-child的笔记
nth-child(-n+2) 代表选择前两个
nth-child(n+2) 代表选择前三个
nth-child(x) 选择第x个
5）文字阴影
text-shadow: 1px 1px yellowgreen;
6) 去除边框
border :0
7) 颜色渐变
前提知识：
-moz代表baifirefox浏览器私有属性，du-ms代表ie浏览器私有属性，-webkit代表safari、chrome私有属性。
可能有兼容问题 需要在前面加上 -webkit-
现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼bai，比如圆角，并不影响duzhi的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。
background: -webkit-linear-gradient(left,red,blue) 左边开始，从左到右是红色渐变到蓝色
8）定位问题
子绝对定位，那么父亲就应该是相对定位
因为默认以整个文档为父元素，这样做子元素不会直接飘到天边，限制住了~
9） 伪元素
::before 和::after 在某某标签前面或者后面加上 样式
比如 > 就是这样来的
.xx:: after {
content: "";
position: absolute;
top: 7px;
right: 7px;
height: 15px;
15px;
border-top:solid black 2px;
border-right:solid black 2px ;}
10) 旋转
transform:rotate(45deg) 旋转角度
11）如何实现flex 上下布局 实现图片上 字体下
原本flex是默认主轴是x 那么样式就是 图片左 字体右
把 主轴设置为Y轴，那么图片上 字体下 但是格式不居中
因为其实这个算一行，所以用到 align-items: center;
12) 如何把标签影藏起来
{display :none}