CSS教程:通过实例学习和理解CSS盒模型

自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒（box）中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层<div>。

盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。

对于初学者，经常会搞不清楚margin，padding之间的层次、关系和相互影响。下面我们一起看一个实例，以便于加深理解。

下面我们一起来分析一下这个例子。

XHTML代码

<div id="left">这里是内容，对象中的内容到对象边缘的距离是PADDING。宽为270像素，高为175像素，由于四周的边框宽度是3像素，所以宽和高要加6像素，即宽276像素，高181像素。</div>

<div id="right"></div>

CSS代码

#left {

float:left;

margin-right:67px;

width:230px;

height:145px;

font-size:14px;

line-height:24px;

padding:30px 0 0 40px;

border:3px #000 solid;

background:url(img1.jpg) #DE9 no-repeat center;

}

#right {

float:left;

width:128px;

height:128px;

background:url(img2.jpg);

}

这段代码表现的就是图中的效果。下面我们来分析一下各属性的作用及用法。

1、margin：指边框以外的空白区域，用于设置页边距或对象与对象之间的距离。30px 0 0 40px分别代表上、右、下、左（顺时针）四个边距。如果四边都一样，可以简写成margin:10px，这样代表margin:10px 10px 10px 10px。如果上边距和下边距相等，左边距和右边距相等时，可以简写成margin:5px 10px，这样代表margin:5px 10px 5px 10px。也可以分别定义，如margin-top，指定上边距。右、下、左分别是margin-right、margin-bottom、margin-left。当值为0时可以省略单位。如：margin:0 5px等同于margin:0px 5px。

2、padding：指对象的边缘到内容之间的空白区域，定义及写法和margin相同。需要注意的是，为padding定义值的同时，也会相应增大对象的宽高。如有一个Div，宽为100px，当定义了内容距左、右边距都是10px（左右加一起是20px），此时Div的整体宽度就会是120px，如果要维持原100px，则要减掉20px，即80px。

#exp {padding:0 10px; width:100px}，此时<div id="exp"></div>的宽度就是120px。

#exp {padding:0 10px; width:80px}，此时<div id="exp"></div>的宽度就是100px。

3、border：指对象的边框，用于设置边框的

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!