记录CSSmargin的合并与塌陷，及CSS精灵图

1.margin的合并

在实际操作中会发现，两个相邻的块级元素如果都设置外边距


会发现大的margin会覆盖小的margin在有时候我们进行网页设计的时候并不想要这种效果。
解决的方案如下：

(1)将margin改为padding

(2)用position定位

(3)将块级元素变为行内元素inline-block

2.块级元素的塌陷

当一个外层div包含一个内层div时，给内层div设置margin，会导致外层div随内层div一起移动。
如图：

给内层div设置了margin-top：30px；会发现整体会下移。
解决方案如下：

(1)底层div设置over-flow:hidden;

(2)使用position定位

(3)改变盒子模型inline-block

3.CSS精灵图

CSS的图片合并技术：在开发中将网页中很多小图片整合在一张大图中，当访问该页面时，可以减少服务器的访问次数，以提高性能。
原理：使用background-position进行背景坐标精确定位。