div css之：盒狀模型
第十章：盒狀模型
CSS中的盒狀模型（box model）用于描述一個(gè)為HTML元素形成的矩形盒子。盒狀模型還涉及為各個(gè)元素調(diào)整外邊距（margin）、邊框（border）、內(nèi)邊距（padding）和內(nèi)容的具體操作。下圖顯示了盒狀模型的結(jié)構(gòu)：
CSS中的盒狀模型
上面的圖示有些理論化，讓我們?cè)囍靡粋�(gè)實(shí)例來(lái)解釋盒狀模型。在我們的例子中，有一個(gè)標(biāo)題和一些文本。該例的HTML代碼如下（摘自世界人權(quán)宣言）：
<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>
通過(guò)添加一些顏色及字體信息，該例可以有以下顯示效果：
這個(gè)例子包含了兩個(gè)元素：h1和p。這兩個(gè)元素的盒狀模型如下圖所示：
盡管上圖顯得有點(diǎn)復(fù)雜，不過(guò)它展示了每個(gè)HTML元素是如何被盒子所圍繞的。我們可以通過(guò)CSS來(lái)調(diào)整這些盒子。窗體底端
我們將了解如何通過(guò)設(shè)置margin（外邊距）和padding（內(nèi)邊距）這兩個(gè)CSS屬性來(lái)改變?cè)氐娘@示。
為元素設(shè)置外邊距
一個(gè)元素有上（top）、下（bottom）、左（left）、右（right）四個(gè)邊。外邊距（margin）表示從一個(gè)元素的邊到相鄰元素(或者文檔邊界)之間的距離。在下面這個(gè)例子中，我們將了解如何為文檔本身（即body元素）定義外邊距。下圖顯示了我們對(duì)外邊距的要求。
滿(mǎn)足上述要求的CSS代碼如下：
body {
margin-top:100px;
margin-right:40px;
margin-bottom:10px;
margin-left:70px;
}
或者你也可以采用一種較優(yōu)雅的縮寫(xiě)形式：
body {
margin: 100px 40px 10px 70px;
}
注意：按順時(shí)針的順序
幾乎所有元素都可以采用跟上面一樣的方法來(lái)設(shè)置外邊距。例如，我們可以為所有用<p>標(biāo)記的.文本段落定義外邊距：
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
為元素設(shè)置內(nèi)邊距
內(nèi)邊距（padding）也可以被理解成“填充物”。這樣理解是合理的，因?yàn)閮?nèi)邊距并不影響元素間的距離，它只定義元素的內(nèi)容與元素邊框之間的距離。
下面我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明內(nèi)邊距的用法。
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
小結(jié)
你正在逐步精通CSS盒狀模型。在下一課，我們將進(jìn)一步了解如何將邊框設(shè)置為不同顏色、以及如何改變?cè)匦螤睢?/p>
邊框?qū)挾?/p>
邊框?qū)挾扔蒀SS border,Width定義
邊框樣式[border-style]
縮寫(xiě)[border] 窗體頂端
窗體底端
【div css之：盒狀模型】相關(guān)文章：