CSS 盒子模型

前端页面布局设计，盒子模型是基础中的基础。盒子模型不复杂，一张图就能说明问题。

1.盒子模型示意图



可以看出，倒霉IE的width=cssWidth+padding+borderWidth，这就是为啥在IE下和firefox、chrome下尺寸经常不一致。

2.既然如此怎么解决呢？
方法一：padding设成0，border设成0，用margin调整边距。但这种方法有一定问题，见3。
方法二：用jQuery调整，jQuery的width ,innerWidth,outerWidth能获得比较精确的尺寸，然后进行调整。
              其中width=cssWidth；innerWidth=cssWidth+paddingLeft+paddingRight。

              outerWidth()有一个bool参数，表示是否加margin进去。如果不加margin，就是在innerWidth基础上加borderLeft+borderRight，否则还要加上marginLeft+marginRight
方法三：针对IE设计另一套CSS，或使用CSS hack

3. background(-color|-image)指的是padding部分。在IE6里面，content总是白的，后来就变成透明了。因此，2中的方法一，在IE6里面，基本上能丑到爆。