層疊樣式表（CSS）已逐漸成為HTML布局與定位的實(shí)際標準。它們易于使用，不需要任何特殊軟件，并可在大多數主要瀏覽器中正常運行。但是，它的這種極度簡(jiǎn)化特點(diǎn)也會(huì )產(chǎn)生危險：許多網(wǎng)絡(luò )開(kāi)發(fā)新手并沒(méi)有充分了解CSS就在使用CSS定位與布局指導。在出現意外的結果后，這些網(wǎng)絡(luò )開(kāi)發(fā)新手傾向于用反復試驗的方法解決問(wèn)題，而沒(méi)有對其基本原理進(jìn)行分析。在一些瀏覽器上，用這種方法建立的布局能夠正常運行；但在另一些瀏覽器上卻會(huì )出錯。
為減少這些問(wèn)題，值得花時(shí)間來(lái)了解CSS的一些核心驅動(dòng)器與概念。開(kāi)發(fā)者能夠理解的最重要的概念之一為所謂的CSS“盒狀模型”，它是大多數CSS布局與定位的基礎。本文簡(jiǎn)單介紹這種盒狀模型，說(shuō)明它的功能以及如何應用它來(lái)定位HTML元素，設計出更優(yōu)秀的網(wǎng)頁(yè)。
CSS盒狀模型以一個(gè)包含四個(gè)成分的有界限的盒子來(lái)描述網(wǎng)頁(yè)中的每個(gè)元素：
盒狀模型的四個(gè)成分的直觀(guān)圖如圖A所示。
圖A
CSS盒狀模型的四個(gè)成分
從上圖可看出：很明顯，在考慮一個(gè)元素占用多少網(wǎng)頁(yè)空間時(shí)，僅考慮元素本身的寬和高是不夠的，還必須考慮元素的補丁、邊框與邊緣的寬和高。這一事實(shí)，雖然稍稍經(jīng)過(guò)思考就已經(jīng)很明顯，但卻是許多網(wǎng)絡(luò )開(kāi)發(fā)新手沒(méi)有意識到的問(wèn)題之一；實(shí)際上，也是許多網(wǎng)頁(yè)元素重疊，或是其它網(wǎng)頁(yè)元素沒(méi)有相應調整大小的原因。
要了解它的實(shí)際應用，請看一個(gè)示例。如下面的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>
這是一個(gè)相當簡(jiǎn)單的頁(yè)面——兩段文字，一段在<div>之內，一段在<div>之外。<div>內部的文字指定了一個(gè)紅色的虛線(xiàn)框，使盒狀模型更易于理解。這里整個(gè)盒子的寬為350像素。下面就是這個(gè)盒子的外觀(guān)（圖B）：
圖B
例1
接下來(lái)，我們增加一些補?。?strong>列表B）：
列表B
#box {
width: 350px;
border-color: red;
border-style: dashed;
padding: 10px;
}
圖C顯示的輸出結果：
圖C
增加的補丁
如你所見(jiàn)，在文字四個(gè)邊上增加的補丁已將元素內容與邊框間的空間加大了10個(gè)像素?，F在盒子的整個(gè)寬為350+10+10=370像素。
然后，我們再增加邊框的厚度（列表C）：
列表C
#box {
width: 350px;
border-color: red;
border-style: dashed;
padding: 10px;
border-width: 15px;
}
下面是輸出的結果（圖D）：
圖D
加厚的邊框
產(chǎn)生的差異立即可見(jiàn)。盒子的新寬度為370+15+15=400像素。
邊框為元素的可見(jiàn)區域劃分界線(xiàn)。其他元素位于這個(gè)元素的邊框以外。如果你希望增加網(wǎng)頁(yè)上兩個(gè)元素之間的間距，就必須借助盒子的第三層：邊緣。請看下面的代碼（列表D），它為元素的頂邊框增加一個(gè)40像素的邊緣：
列表D
#box {
width: 350px;
order-color: red;
border-style: dashed;
padding: 10px;
border-width: 15px;
margin-top: 40px;
}
在這種情況下，<div>上面的一行文字與<div>的外邊框間又另外增加了40個(gè)像素的距離。圖E為輸出結果。
圖E
頂邊緣增加
當然，由于只有邊緣頂部增加，盒子的寬度仍為400像素。但是，盒子的高度增加了40個(gè)像素。如果你喜歡使用統一的邊緣，應用如下的代碼（列表E），它將盒子的所有邊緣增加40個(gè)像素：
列表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像素。
如上面的例子所示，給內容增加邊緣、邊框和補丁會(huì )占用大量的頁(yè)面空間，比內容本身占用的空間要多得多。因此，在網(wǎng)頁(yè)上定位元素時(shí)，徹底了解盒狀模型以及它對相鄰元素的影響，對于網(wǎng)頁(yè)元素的準確布局大有幫助。
當然，上面的提示僅僅是冰山的一角。欲了解更多盒狀模型的信息，請閱讀正式的W3C規范。值得注意的是，多數現代瀏覽器以上面描述的方式使用CSS盒狀模型；但是，較老版本的Netscape和Internet Explorer以非標準的方式運行CSS盒狀模型，這時(shí)就需要對代碼進(jìn)行相應的調整，以對網(wǎng)頁(yè)進(jìn)行精確布局。
希望你不會(huì )對上面的說(shuō)明感到枯燥，現在你應該明白你頻繁應用的CSS指令的基本原理了。祝編碼快樂(lè )！
聯(lián)系客服
