盒狀模型

border-width: ?border-width: ?border-width:

層疊樣式表（CSS）已逐漸成為HTML布局與定位的實際標準。它們易於使用，不需要任何特殊軟體，並可在大多數主要瀏覽器中正常運行。但是，它的這種極度簡化特點也會產生危險：許多網路開發新手並沒有充分了解CSS就在使用CSS定位與布局指導。在出現意外的結果後，這些網路開發新手傾向於用反覆試驗的方法解決問題，而沒有對其基本原理進行分析。在一些瀏覽器上，用這種方法建立的布局能夠正常運行；但在另一些瀏覽器上卻會出錯。
為減少這些問題，值得花時間來了解CSS的一些核心驅動器與概念。開發者能夠理解的最重要的概念之一為所謂的CSS“盒狀模型”，它是大多數CSS布局與定位的基礎。本文簡單介紹這種盒狀模型，說明它的功能以及如何套用它來定位HTML元素，設計出更優秀的網頁。
CSS盒狀模型以一個包含四個成分的有界限的盒子來描述網頁中的每個元素：
元素內容(content)本身位於中心。
一個補丁(padding)封套位於內容周圍。
框線(border)包圍補丁，它為元素的可見區域劃分界線。
邊緣(margin)包圍框線。
盒狀模型的四個成分的直觀圖如圖A所示。
圖A
CSS盒狀模型的四個成分
從上圖可看出：很明顯，在考慮一個元素占用多少網頁空間時，僅考慮元素本身的寬和高是不夠的，還必須考慮元素的補丁、框線與邊緣的寬和高。這一事實，雖然稍稍經過思考就已經很明顯，但卻是許多網路開發新手沒有意識到的問題之一；實際上，也是許多網頁元素重疊，或是其它網頁元素沒有相應調整大小的原因。
要了解它的實際套用，請看一個示例。如下面的HTML代碼（列表A）：
列表A
<!doctype html public "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style type="text/css">
#box {
？width: 350px;
？border-color: red;
？border-style: dashed;
}
</style>
</head>
<body>
This is text outside the box. At veroeos et accusam et justo duo dolores et ea rebum. stet clitakasdgubergren, no sea takimatasanctusestLoremipsum dolor sit amet.
<div id="box">
This is text inside the box. Loremipsumdolor sitamet, consetetursadipscingelitr, seddiamnonumyeirmodtemporinviduntutlabore et dolore MAGNA aliquyamerat, seddiamvoluptua.
</div>
</body>
</html>
這是一個相當簡單的頁面——兩段文字，一段在<div>之內，一段在<div>之外。<div>內部的文字指定了一個紅色的虛線框，使盒狀模型更易於理解。這裡整個盒子的寬為350像素。下面就是這個盒子的外觀（圖B）：
圖B
例1
接下來，我們增加一些補丁（列表B）：
列表B
#box {
?width: 350px;
?border-color: red;
?border-style: dashed;
padding: 10px;
}
圖C顯示的輸出結果：
圖C
增加的補丁
如你所見，在文字四個邊上增加的補丁已將元素內容與框線間的空間加大了10個像素。現在盒子的整個寬為350+10+10=370像素。
然後，我們再增加框線的厚度（列表C）：
列表C
#box {
?width: 350px;
?border-color: red;
?border-style: dashed;
?padding: 10px;
border-width: 15px;
}
下面是輸出的結果（圖D）：
圖D

加厚的框線
產生的差異立即可見。盒子的新寬度為370+15+15=400像素。
框線為元素的可見區域劃分界線。其他元素位於這個元素的框線以外。如果你希望增加網頁上兩個元素之間的間距，就必須藉助盒子的第三層：邊緣。請看下面的代碼（列表D），它為元素的頂邊框增加一個40像素的邊緣：
列表D
#box {
?width: 350px;
?order-color: red;
?border-style: dashed;
?padding: 10px;
?border-width: 15px;
margin-top: 40px;
}
在這種情況下，<div>上面的一行文字與<div>的外框線間又另外增加了40個像素的距離。圖E為輸出結果。
圖E
頂邊緣增加
當然，由於只有邊緣頂部增加，盒子的寬度仍為400像素。但是，盒子的高度增加了40個像素。如果你喜歡使用統一的邊緣，套用如下的代碼（列表E），它將盒子的所有邊緣增加40個像素：
列表E
#box {
?width: 350px;
?border-color: red;
?border-style: dashed;
?padding: 10px;
?border-width: 15px;
margin: 40px;
}
得到的結果如下（圖F）：
圖F
各邊增加邊緣
現在，盒子的總寬度為400+40+40=350+10+10+15+15+40+40=480像素。
如上面的例子所示，給內容增加邊緣、框線和補丁會占用大量的頁面空間，比內容本身占用的空間要多得多。因此，在網頁上定位元素時，徹底了解盒狀模型以及它對相鄰元素的影響，對於網頁元素的準確布局大有幫助。
當然，上面的提示僅僅是冰山的一角。欲了解更多盒狀模型的信息，請閱讀正式的W3C規範。值得注意的是，多數現代瀏覽器以上面描述的方式使用CSS盒狀模型；但是，較老版本的Netscape和Internet Explorer以非標準的方式運行CSS盒狀模型，這時就需要對代碼進行相應的調整，以對網頁進行精確布局。

相關詞條

熱門詞條

聯絡我們