DIV+CSS布局总结

1、 ie系列采用的是微软自己的盒子模式，firefox采用的是标准的w3c盒子模型。

 

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。

 

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

在实际的操作中可采用如下方法避免如上不同。

    Padding-left:40px;

    920px !important;//firefox

    960px;

2、 当好几个DIV层通过float:left和margin-left布局时，ie6中有bug，ie6默认会把第一个层的margin-left做双倍处理。

3、 当即可以用margin，也可以用padding时，尽量使用margin，当用dreamweaver中设计模式参看时，用margin能与实际页面效果更加接近。

4、 当出现如下状况时：

<div id="baihuiimage">

<img src="images/banner.jpg">

</div>

尽量改成：<div id="baihuiimage"><img src="images/banner.jpg"></div>，这样写效果更加正确。

5、 css sprites技术（背景图片拼接技术）技巧：首先，用photoshop把背景图片整合到一起，生成一张png图片。然后在写css时用background-position定位，用bg2css这个工具测出偏移量。Css 如下：

background:url(../images/index.png) no-repeat -961px -78px;

6、 当使用list-style-image属性时，css sprites会无法确定其位置，这时可使用li的background代替：如下：

background:url(../images/index.png) no-repeat -961px -78px;