css整理03之盒模型

1、什么是css的盒模型呢？

其实，css布局中的每一个元素，在浏览器解释下，都被当成一个盒状物。



一个盒模型中包含了content(内容),padding（内边距）,border（边框）,margin（外边距）

例如：有两个div

<div id="a"></div>
<div id="b"></div>

css代码：

#a{width:100px;height:100px;background-color:#EEEEEE;}
#b{width:100px;height:100px;background-color:#999999;}



此时在所有firefox,chrome,firefox下显示都一致。

在adiv上加上边框border:6px solid #FF3333;

在ie5.5下



除了ie6以以上，firefox，chrome下



这里可以看出，出ie5.5外，其他的浏览器的第一个div都加上了边框，实际宽度是100+6*2=112px.

继续增加代码：margin:6px;为了不让浏览器默认的css影响结果，我们加上；html,body{margin:0;padding:0;}

在ie5.5下



ie6及以上，firefox,chrome下



从上图可以看出，第一个div的实际宽度是100px+12px=112px,而其他的是112px+12px=124px;

继续增加代码：padding:5px;

IE5.5下和除了ie5.5，如下





可以很明显看出ie5.5没什么变化，而其他的浏览器的宽度都变大了，实际宽度变成124px+10px=134px

所以可以看出ie5.5下的盒模型计算为：实际宽度=左外边距+本身宽度+右外边距

除了ie5,5之外也就是标准盒模型计算：实际宽度=左外边距+左边框+左内边距+本身宽度+右内边距+右边框+右外边距。

2、上下margin叠加问题

当两个对象是上下关系，并都有margin时，会出现叠加情况。

#a{width:100px;height:100px;background-color:#EEEEEE;border:6px solid #FF3333;margin:6px;padding:5px;}
#b{width:100px;height:100px;background-color:#999999;border:6px solid #FF3333;margin:6px;padding:5px;}



可以看出上下边距只有6px;

有两种解决方法：1）只给一个对象设置margin

2)用float解决在#a中加上float:left;#b加上floatleft;clear:left;



这是上下外边距叠加问题解决了，可以在ie6下会带来一个问题



可以看到在ie6的的左右外边距加倍了，这个就是ie6的双倍边距问题。

出现这个问题有三个条件：1）是块级元素2）有margin 3)有float；

解决：在两个div上都加上display:inline;

参考：css布局实录