CSS格式化模型

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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值