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



盒模型主要定义四个区域:内容(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的各属性。

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3