div css之：盒状模型
第十章：盒状模型
CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构：
CSS中的盒状模型
上面的图示有些理论化，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）：
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
通过添加一些颜色及字体信息，该例可以有以下显示效果：
这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：
尽管上图显得有点复杂，不过它展示了每个HTML元素是如何被盒子所围绕的。我们可以通过CSS来调整这些盒子。窗体底端
我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。
为元素设置外边距
一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。在下面这个例子中，我们将了解如何为文档本身（即body元素）定义外边距。下图显示了我们对外边距的要求。
满足上述要求的CSS代码如下：
body {
margin-top:100px;
margin-right:40px;
margin-bottom:10px;
margin-left:70px;
}
或者你也可以采用一种较优雅的缩写形式：
body {
margin: 100px 40px 10px 70px;
}
注意：按顺时针的顺序
几乎所有元素都可以采用跟上面一样的方法来设置外边距。例如，我们可以为所有用<p>标记的.文本段落定义外边距：
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
为元素设置内边距
内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。
下面我们通过一个简单的例子来说明内边距的用法。
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
小结
你正在逐步精通CSS盒状模型。在下一课，我们将进一步了解如何将边框设置为不同颜色、以及如何改变元素形状。
边框宽度
边框宽度由CSS border,Width定义
边框样式[border-style]
缩写[border] 窗体顶端
窗体底端
【div css之：盒状模型】相关文章：
8.第一章CSS简介