|
了解CSS盒狀模型 設(shè)計(jì)更佳網(wǎng)頁(yè) Builder, Melonfire 7/9/2006 URL: http://www./developer/webdevelop/story/0,3800067013,39526726,00.htm
層疊樣式表（CSS）已逐漸成為HTML布局與定位的實(shí)際標(biāo)準(zhǔn)。它們易于使用，不需要任何特殊軟件，并可在大多數(shù)主要瀏覽器中正常運(yùn)行。但是，它的這種極度簡(jiǎn)化特點(diǎn)也會(huì)產(chǎn)生危險(xiǎn)：許多網(wǎng)絡(luò)開(kāi)發(fā)新手并沒(méi)有充分了解CSS就在使用CSS定位與布局指導(dǎo)。在出現(xiàn)意外的結(jié)果后，這些網(wǎng)絡(luò)開(kāi)發(fā)新手傾向于用反復(fù)試驗(yàn)的方法解決問(wèn)題，而沒(méi)有對(duì)其基本原理進(jìn)行分析。在一些瀏覽器上，用這種方法建立的布局能夠正常運(yùn)行；但在另一些瀏覽器上卻會(huì)出錯(cuò)。 為減少這些問(wèn)題，值得花時(shí)間來(lái)了解CSS的一些核心驅(qū)動(dòng)器與概念。開(kāi)發(fā)者能夠理解的最重要的概念之一為所謂的CSS“盒狀模型”，它是大多數(shù)CSS布局與定位的基礎(chǔ)。本文簡(jiǎn)單介紹這種盒狀模型，說(shuō)明它的功能以及如何應(yīng)用它來(lái)定位HTML元素，設(shè)計(jì)出更優(yōu)秀的網(wǎng)頁(yè)。 CSS盒狀模型以一個(gè)包含四個(gè)成分的有界限的盒子來(lái)描述網(wǎng)頁(yè)中的每個(gè)元素：
盒狀模型的四個(gè)成分的直觀圖如圖A所示。 圖A
CSS盒狀模型的四個(gè)成分 從上圖可看出：很明顯，在考慮一個(gè)元素占用多少網(wǎng)頁(yè)空間時(shí)，僅考慮元素本身的寬和高是不夠的，還必須考慮元素的補(bǔ)丁、邊框與邊緣的寬和高。這一事實(shí)，雖然稍稍經(jīng)過(guò)思考就已經(jīng)很明顯，但卻是許多網(wǎng)絡(luò)開(kāi)發(fā)新手沒(méi)有意識(shí)到的問(wèn)題之一；實(shí)際上，也是許多網(wǎng)頁(yè)元素重疊，或是其它網(wǎng)頁(yè)元素沒(méi)有相應(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 接下來(lái)，我們?cè)黾右恍┭a(bǔ)?。?strong>列表B）： 列表B #box { width: 350px; border-color: red; border-style: dashed; padding: 10px; } 圖C顯示的輸出結(jié)果： 圖C
增加的補(bǔ)丁 如你所見(jiàn)，在文字四個(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)生的差異立即可見(jiàn)。盒子的新寬度為370+15+15=400像素。 邊框?yàn)樵氐目梢?jià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ì)上面的說(shuō)明感到枯燥，現(xiàn)在你應(yīng)該明白你頻繁應(yīng)用的CSS指令的基本原理了。祝編碼快樂(lè)！ |
|
|
來(lái)自： Ralf_Jones > 《其它》
