CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
作用：
作用：background-size设置 背景图像的大小尺寸 。
一、margin和width实现水平居中
优点： 实现方法简单易懂，浏览器兼容性强；
缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。
)
二、inline-block实现水平居中方法
做点： 简单易懂，扩展性强；
缺点： 需要额外处理inline-block的浏览器兼容性。
1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。
2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
作用在行内元素上，让行内元素字水平居中。对inline-block也有作用。
1：标准W3C盒子模型
宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
2： IE盒子模型
宽=width+(border-left)+(border-right)
高=height+(border-top)+(border-bottom)
设置一个元素为 box-sizing: border-box时，此元素的内边距和边框不再会增加它的宽度。
line-height: 2表示行高为本身字体高度的两倍，line-height: 200%表示设置行高为父元素字体高度的200%高度。
特性：行内元素设置display: inline-block后行内元素可以像块级元素一样设置宽高，padding，margin，border，但不占据一行。
去除缝隙：方法一：将父元素字体大小设置为0，行内元素单独设置字体大小
方法二：display：block，然后让元素浮动。
对齐方法：设置vertical-align: top让顶端对齐。
css 雪碧图或精灵图。用一张.png格式图片来放置所有的小图标，然后引用这一张图片，设置background-position来显示不同的图标。这样可以减少向服务器的请求数量，提高加载速度。
opacity: 0设置元素透明度为0，但还占据位置。
visibility: hidden和opacity类似。
display: none让元素消失，不占据位置。
background-color: rgba(0,0,0,0.1)设置背景色透明度。
