一、boder在某些情况下会触发BFC环境，一般用轮廓（outline）而不用边框

二、雪碧图技术（精灵图）

是一种CSS图像合并技术：（循环）；是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

优点：1）减少加载网页图片时对服务器的请求次数

可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

2）提高页面的加载速度

sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

3）减少鼠标滑过的一些bug

IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。

不足：1）CSS雪碧的最大问题是内存使用

2）拼图维护比较麻烦

3）使CSS的编写变得困难

4）CSS 雪碧调用的图片不能被打印

三、解决兼容性

1）reset重置技术；normalize技术

2）加前缀

3）<!doctype>解析模式

4）CSS中的Hack技术

5）条件注释

6）倒入包

四、浏览器兼容性

1）opacity(filter)

2)PNG背景

3）圆角（倒包，图片）

4）BFC

5）双倍margin兼容问题

6）在IE下有3PXz差距

7）font-size；

五、条件注释一定要写完整