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