CSS2 格式化模型解析-优快云博客

CSS2格式化模型

文档中的每个元素都可以装在一个矩形框内。CSS2制订者将这个称为“核心内容区，并且用另外三个框来包围它：补白、边框和边界。如下图显示了这些框，还定义了一些有用的术语。

http://www.msleft.com/review/cssmodel.html图1

上、下、左外和右外边缘界定了一个元素的内容区和其所有补白、边框和边界区域。内上、内下、左内和右内边缘定义了核心内容区的范围。围绕元素的额外空间是内外边缘之间的区域，包括补白、边框和边界。浏览器可能省略每个元素中任何或所有这些额外空间，而且对很多浏览器来说，内外边缘是可以补省略的。

当元素垂直相邻的时候,上面元素的下边界和下面元素的上边界是重叠的,因些这些元素之间的总间隔是相领边中较大的部分(如下图)。这种应用称为边界重叠(margin-collapsing)，这通常能得到较好文档显示的效果。

http://www.msleft.com/review/cssmodel.html图2

水平相邻元素没有重叠的边界。CSS2标准把相邻水平边界加在一起。如图CSS格式化模型所示，元素的总宽度等于7项之和：左右边界、左右边框、左右补白和元素内容本身。这7项之和必须等于元素的宽度。在这7项中，只有3项（元素宽度和它的左右边界）可以设定为auto值，表示浏览器可以为那个属性确定一个值。当确实需要时，浏览将遵循以下规则：

1.如果这些属性没有设为auto，而且总宽度小于父元素宽度，那么margin-right属性将被设置为auto值，它可以变得足够大，以使总宽度等于父元素的宽度。

例:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-1 { width: 300px border: #c00; }
</style>
<div id="box">
    <div id="cssmodel-1">此时margin-right将被自动设置为auto </div>
</div>

2.如果恰好有一个属性被设置为auto，那个属性将变得足够大，以使总宽度等于父元素的宽度。

例:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-2 { border: #c00; width: 300px; margin-left: auto; }
</style>
<div id="box">
    <div id="cssmodel-2">此时margin-left将被自动设置为auto </div>
</div>				

    
      
     
      如果恰好有一个属性被设置为auto，那个属性将变得足够大，以使总宽度等于父元素的宽度。此时margin-left:将变得足够大,大到使这个红色盒子被挤到右边

3.如果width、margin-left和margin-right都被设置为auto，CSS2兼容浏览器将把margin-left和margin-right设置为0，而设置得width足够大，以使总宽度等于父元素的宽度。

例:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-3 { border: #c00; width: auto; margin-left: auto; margin-right: auto; }
</style>
<div id="box">
    <div id="cssmodel-3">此时margin-left:0; margin-right:0;  width:将变得足够大,大到使这个红色盒子跟父元素一样宽 </div>
</div>				

    
      
     
      如果恰好有一个属性被设置为auto，那个属性将变得足够大，以使总宽度等于父元素的宽度。此时margin-left:0; margin-right:0;  width:将变得足够大,大到使这个红色盒子跟父元素一样宽

4.如果左右边界都设置为auto，它们总是会被设置为相同的值，以使这个元素在其父元素中是居中的。

例:
<style type="text/css">
#box { width: 600px; border: 1px solid #000; }
#cssmodel-4 { border: #c00; width: 300px; margin-left: auto; margin-right: auto; }
</style>
<div id="box">
    <div id="cssmodel-4">此时margin-left:0; margin-right:0;  width:将变得足够大,大到使这个红色盒子跟父元素一样宽 </div>
</div>				

    
      
     
      如果左右边界都设置为auto，它们总是会被设置为相同的值，以使这个元素在其父元素中是居中的。居中效果

对于浮动元素则有一些特殊规则。浮动元素（如指定为align=left的图像）的边界不会与包含元素的边界重叠，除非浮动元素有负值边界，如下图显示了HTML的这一功能是如何实现的。

例:
<body>
<p>
<img align="left" src="pics/img.gif" />
Some sample text...
</body>

http://www.msleft.com/review/cssmodel.html 图3

浏览器会尽可能地把图像及其边界向段落的左上方移动，但并不与段落或文档正文的左边界或上边界重叠。段落或正文的左边界回在一起，而它们的上边界重叠了。