CSS Sprite的重要性

background-position：默认左上角
x y
x% y%
[top | center | bottom] [left | center | right]
background-repeat:
no-repeat：背景图片在规定位置
repeat-x：图片横向重复
repeat-y：图片纵向重复
repeat：全部重复
background-size:
100px 100px
contain
cover

在http://www.iconfont.cn/ 上使用字体图标

图片合并可以使用这个线上地址 csssprites.com14
在生产环境中使用的图片都需要经过压缩再使用，线上压缩图片地址 tinypng.com13

line-height:2 是指行高是盒子模型里的content的两倍行高
line-height:200%是指行高是父元素的行高的两倍
高度不一样的inline-block元素如何顶端对齐?
vertical-align:top;

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block 既呈现 Inline 特性（不占据一整行，宽度由内容宽度决定）又呈现block特性（可设置宽度高，内外边距）
如何去缝隙?
两段span中间的空隙去掉变成一行，不要留出空白字符
.wrap{front-size:0;}

让一个元素"看不见"有几种方式？有什么区别?
display：none;
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden
和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。适用于那些元素隐藏后不希望页面布局会发生变化的场景。所以如果是hover点击也是没有的。
opacity:0
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。所以如果是hover点击可以显示。
background-color：rgba（0，0，0，0.2）；设置背景色透明