日期:2014-04-27  浏览次数:20621 次


  出于 CSS 精确定义网页样式的本意,在格式化页面对象时, CSS 将所有的元素都放置在一个“容器”里面,这个“容器”叫做 BOX。对于容器的格式化,CSS 提供了强大的支持,现在,首先了解一下与格式化“容器”有关的属性。
“容器”的属性共有以下的几类:
l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。
l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空间的距离。
l 边框(border)类的属性定义了一个元素边距的样式。
l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。

margin-top
属性值:<length> | <percentage> | <auto>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
   该属性设置了一个元素顶端的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。比如:BODY{margin-top:0px} 就是将浏览器窗口中的内容紧贴窗口的上边界。
注意:这个属性可以是负值,但是,很遗憾的是 Netscape 4 不支持这个负的边距值。

margin-right
属性值:<length> | <percentage> | auto
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
   该属性设置了一个元素右侧的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。
注意:这个属性可以是负值。

margin-bottom
属性值:<length> | <percentage> | auto
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
   该元素设置了一个元素底部的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。
注意:这个属性可以是负值。

margin-left
属性值:<length> | <percentage> | auto
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
   该元素设置了一个元素左侧的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。具体以上四个属性我们可以通过以下这个例子就会明白的。

<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
margin-top:0em;
margin-right:2em;
margin-bottom:3em;
margin-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p>
</body>
</HTML>

padding-top
属性值:<length> | <percentage>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
   该属性设置了一个元素的顶端填充距。它的属性值可以使用长度值或者百分比值来指定。但它的值不能为负,如果指定了负值,那么浏览器在执行时将把它变成所能支持的最接近的值:0
P{padding-top:15px}

padding-right
属性值:<length> | <percentage>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
   该属性设置了一个元素的右侧填充距。它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。

padding-bottom
属性值:<length> | <percentage>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度

  该属性设置了一个元素的底端填充距。它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。

pa