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簡介