Margin的一些问题：

1：上下Margin的重叠如果上边的块有Margin-bottom下边有margin-top那么这两个margin取最大值。

解决方法：只用一个方向上的margin要么用margin-top.

2:穿透问题：

解决方法：1：给父元素一个border.
2：给父元素一个overfolw且值不是visible。

overflow（属性）：属性值=hidden（超出边界裁切，并且之外的内容不再显示）/scorll（超出边界会裁切，但会出滚动条拉动f滚动条浏览全部的内容，在所有情况下都会出现滚动栏）/auto（只有超出边界才会出现滚动条）/visible(默认不做任何操作)

两种盒模型

盒模型有两种：1：W3C标准盒模型。2：IE传统盒模型。

W3C标准盒模型:

真实的宽度=我们设置的宽度+左内边距+右内边距+左边框+右边框。
真实的高度和上边一样只不过是上下边距和上下边框。
能使用的区域也就是内容区的区域等于我们设置的宽度和高度。

IE传统盒模型：

真实的宽度=我们设置的宽度
真实的高度=我们设置的高度
内容区的宽度和高度等于我们设置的宽度和高度加上四周的内边距和四周的边框。

背景属性:background:

background-color:背景颜色

background-img:url（）:背景图片url后边的括号里输入图片的路径。

background-reoeat:(后面的属性值有三个1：no-repeat2:repeat-x3:repeat-y)第一个的意思是背景图片不重复，第二个是背景图片在横轴上重复，第三个是在竖轴上重复。

background-position:0px opx;属性值是图片的坐标第一个是x轴坐标第二个是 y轴坐标。这个属性值可以是数值也可以是这几个值：1：center(居中) 2:left(向左) 3：right（向右） 4:top(向上) 5:bottom（向下）{一般情况下是给两个值得的如果给了一个值后面的也就是Y轴的会默认是center}

background-attachment:fixed(是做背景图片连接)

background-attzchment是相对于网页窗口的，background-position是相对于盒子的。

css精灵图

好处：降低了服务器的压力。

核心技术：利用background-image和background-position做图片定位

精灵图一般是自己制作的：（下面是精灵图制作的大致流程）

打开PS把带有小图标的图片放进去，然后在PS里新建一个文件文件的背景颜色设透明色，一定要设为透明色。然后在带有小图标的图片里把小图标用裁剪工具做一个和小图标大小差不多的框然后按：ctrl=c复制下来再去新建的文件里用：ctrl=v粘贴下来最后保存保存的时候格式一定要是png格式的。注意:在制作精灵图的时候小图标与小图标之间要留几个像素。