CSS笔记二

六、 空白边叠加
margin属性用于设置元素与周边元素之间的间距（也叫空白边），当相邻的两个元素都设置了margin属性时，这两个元素之间的空白边就会发生叠加，叠加的结果是两者之间的空白边大小等于这两个元素中margin属性较大者的margin值。
现在通过几个例子来看看空白边叠加的效果。
 1
  <div id="div1">
 Div1
 </div>
 <div id="div2">
 Div2
 </div>
 2
这里在页面上放置了两个div，div1上面和div2下面各放置1个字符，这主要是用来看看为div设置的margin属性时具体的空白边大小，现在为div指定样式：
 div {
  padding:0px;
  margin:50px 0px;
  background-color:blue;
 }
结果两个div之间的空白边大小为50px：
 

当元素中没有内容时，这时元素的上边距和下边距自己也会发生叠加，看看下面的HTML代码，由于div中没有任何内容，结果1和2两个字符之间的距离仅为50px，因为上下边距发生了叠加：
 1
  <div id="div1">
 </div>
 2
 

当一个元素嵌套在另一个元素中时，两个元素的空白边也会发生叠加（假设两个元素的padding和border都为0px）：
 1
  <div id="div1">
  <div>
   dd
  </div>
 </div>
 

七、 框模型
HTML中任何元素都被看做是一个矩形框，这个矩形框由内容、内边距、边框和外边距四个部分组成：
 

内容区与边框之间的空白叫做内边距，当为元素设置背景时，背景将应用于内容区和内边距，而外边距则用于设置元素之间的间隔大小。一个元素的大小应该是：width+左右padding+左右boder大小+左右margin的总和。例如
 div{
  margin:10px;
  padding:20px;
  border:5px;
  width:50px;
 }
这时div的最终宽度为：50px+2*20px+2*10px+2*5px=120px。
 目前FF和IE7是按照上面的规范来的，但是IE6及其以下版本都不是按照这种规范来计算元素的大小。IE6认为width包含了padding和内容区的大小，还是按照上面的div样式来计算，IE6中div的最终宽度为：50px+2*10px=70px。