了解CSS盒狀模型設(shè)計更佳網(wǎng)頁

Ralf_Jones 2006-11-23

展開全文

了解CSS盒狀模型設(shè)計更佳網(wǎng)頁
Builder, Melonfire
7/9/2006
URL: http://www./developer/webdevelop/story/0,3800067013,39526726,00.htm

層疊樣式表（CSS）已逐漸成為HTML布局與定位的實際標(biāo)準(zhǔn)。它們易于使用，不需要任何特殊軟件，并可在大多數(shù)主要瀏覽器中正常運行。但是，它的這種極度簡化特點也會產(chǎn)生危險：許多網(wǎng)絡(luò)開發(fā)新手并沒有充分了解CSS就在使用CSS定位與布局指導(dǎo)。在出現(xiàn)意外的結(jié)果后，這些網(wǎng)絡(luò)開發(fā)新手傾向于用反復(fù)試驗的方法解決問題，而沒有對其基本原理進(jìn)行分析。在一些瀏覽器上，用這種方法建立的布局能夠正常運行；但在另一些瀏覽器上卻會出錯。

為減少這些問題，值得花時間來了解CSS的一些核心驅(qū)動器與概念。開發(fā)者能夠理解的最重要的概念之一為所謂的CSS“盒狀模型”，它是大多數(shù)CSS布局與定位的基礎(chǔ)。本文簡單介紹這種盒狀模型，說明它的功能以及如何應(yīng)用它來定位HTML元素，設(shè)計出更優(yōu)秀的網(wǎng)頁。

CSS盒狀模型以一個包含四個成分的有界限的盒子來描述網(wǎng)頁中的每個元素：

元素內(nèi)容(content)本身位于中心。
一個補(bǔ)丁(padding)封套位于內(nèi)容周圍。
邊框(border)包圍補(bǔ)丁，它為元素的可見區(qū)域劃分界線。
邊緣(margin)包圍邊框。

盒狀模型的四個成分的直觀圖如圖A所示。

圖A

CSS盒狀模型的四個成分

從上圖可看出：很明顯，在考慮一個元素占用多少網(wǎng)頁空間時，僅考慮元素本身的寬和高是不夠的，還必須考慮元素的補(bǔ)丁、邊框與邊緣的寬和高。這一事實，雖然稍稍經(jīng)過思考就已經(jīng)很明顯，但卻是許多網(wǎng)絡(luò)開發(fā)新手沒有意識到的問題之一；實際上，也是許多網(wǎng)頁元素重疊，或是其它網(wǎng)頁元素沒有相應(yīng)調(diào)整大小的原因。

要了解它的實際應(yīng)用，請看一個示例。如下面的HTML代碼（列表A）：

列表A

<!doctype html public "-//W3C//DTD HTML 4.0//EN">

<html>

<head>

#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.

This is text inside the box. Loremipsumdolor sitamet, consetetursadipscingelitr, seddiamnonumyeirmodtemporinviduntutlabore et dolore magna aliquyamerat, seddiamvoluptua.

</div>

</body>

</html>

這是一個相當(dāng)簡單的頁面——兩段文字，一段在<div>之內(nèi)，一段在<div>之外。<div>內(nèi)部的文字指定了一個紅色的虛線框，使盒狀模型更易于理解。這里整個盒子的寬為350像素。下面就是這個盒子的外觀（圖B）：

圖B

例1

接下來，我們增加一些補(bǔ)丁（列表B）：

列表B

#box {

width: 350px;

border-color: red;

border-style: dashed;

padding: 10px;

}

圖C顯示的輸出結(jié)果：

圖C

增加的補(bǔ)丁

如你所見，在文字四個邊上增加的補(bǔ)丁已將元素內(nèi)容與邊框間的空間加大了10個像素?，F(xiàn)在盒子的整個寬為350+10+10=370像素。

然后，我們再增加邊框的厚度（列表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像素。

邊框為元素的可見區(qū)域劃分界線。其他元素位于這個元素的邊框以外。如果你希望增加網(wǎng)頁上兩個元素之間的間距，就必須借助盒子的第三層：邊緣。請看下面的代碼（列表D），它為元素的頂邊框增加一個40像素的邊緣：

列表D

#box {

width: 350px;

order-color: red;

border-style: dashed;

padding: 10px;

border-width: 15px;

margin-top: 40px;

}

在這種情況下，<div>上面的一行文字與<div>的外邊框間又另外增加了40個像素的距離。圖E為輸出結(jié)果。

圖E

頂邊緣增加

當(dāng)然，由于只有邊緣頂部增加，盒子的寬度仍為400像素。但是，盒子的高度增加了40個像素。如果你喜歡使用統(tǒng)一的邊緣，應(yīng)用如下的代碼（列表E），它將盒子的所有邊緣增加40個像素：

列表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ǔ)丁會占用大量的頁面空間，比內(nèi)容本身占用的空間要多得多。因此，在網(wǎng)頁上定位元素時，徹底了解盒狀模型以及它對相鄰元素的影響，對于網(wǎng)頁元素的準(zhǔn)確布局大有幫助。

當(dāng)然，上面的提示僅僅是冰山的一角。欲了解更多盒狀模型的信息，請閱讀正式的W3C規(guī)范。值得注意的是，多數(shù)現(xiàn)代瀏覽器以上面描述的方式使用CSS盒狀模型；但是，較老版本的Netscape和Internet Explorer以非標(biāo)準(zhǔn)的方式運行CSS盒狀模型，這時就需要對代碼進(jìn)行相應(yīng)的調(diào)整，以對網(wǎng)頁進(jìn)行精確布局。

希望你不會對上面的說明感到枯燥，現(xiàn)在你應(yīng)該明白你頻繁應(yīng)用的CSS指令的基本原理了。祝編碼快樂！