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

前端  /  管理员 发布于 7年前   265

盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。
自从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：指对象的边框，用于设置边框的粗细、颜色及样式。如border-top:2px #000 solid，代表层的上边框是2像素的黑色直线。border-left:1px #f00 dotted，代表右边框是1像素的红色虚线。如果边框四周的样式一样，可以简写成border:1px #000 solid。
border:none代表没有边框，常用于设置如图片等默认带边框的元素。
4、background：设置对象的背景样式。此属性是一个符合属性，由若干个不同背景样式属性的值组成。如此例中，url(img1.jpg)代表背景图片，不添默认为none；#DE9代表背景颜色，不添默认为透明；no-repeat代表不让背景图片平铺，不添默认为平铺；center代表背景图片居中显示，不添默认为从左上角开始显示。
5、line-height：定义对象的行高。如果定义的行高和对象的高度相同，则文字垂直居中显示（只适用于文字只有一行的情况下）。
在这里有必要提到的一个原则，就是辅助的，只起修饰作用的图片尽量用背景处理。这里的“辅助图片”是指那些不是内容的一部分，仅仅用于修饰、间隔、提醒的图片。
本文是帮助用户加强对CSS盒模型的理解，至于文中所涉及到的属性，如果您没有完全理解也没有关系，我们会在后续的文章中详细介绍CSS的各属性。