今天小编跟大家讲解下有关CSS教程:通过实例学习和理解CSS盒模型 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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的各属性。来源：爱蒂网
