大部分網(wǎng)頁(yè)設(shè)計(jì)者依賴(lài)表格來(lái)布局頁(yè)面元素，這是因?yàn)楸砀窨捎糜谏蛇厵?可以為整個(gè)頁(yè)面的外觀建立復(fù)雜的結(jié)構(gòu)。它也可以做些簡(jiǎn)單的事情，如將文字放入有邊框的彩色框中。

假如用表格來(lái)實(shí)現(xiàn)"文字放入有邊框的彩色框中"非常簡(jiǎn)單。但如果需要的只是一個(gè)有紅色邊框、黃色背景的段落，如果段落自身有邊框與背景，豈不是容易許多?

其實(shí)，css擁有為元素定義邊框的能力。如段落、標(biāo)題、DIV、定位錨、圖像及各種類(lèi)型的可加邊框的元素。這些邊框用于將一個(gè)元素同其他元素分開(kāi)。除邊框外，在元素周?chē)€可以定義區(qū)域以控制邊框相對(duì)于內(nèi)容如何放置，以及與其他元素可以有很多近的距離。在元素內(nèi)容與邊框之間，是補(bǔ)白(padding)；在邊框的四周，是邊界(margin)。

上圖標(biāo)示了P標(biāo)簽相對(duì)于其父元素DIV的邊距(margin)與補(bǔ)白(padding)，這里有一個(gè)細(xì)節(jié)是很需要注意的，如果想得到預(yù)期的效果，需要給元素設(shè)置高度和寬度，請(qǐng)看下面示例:

<div>

<p>演示文本</p>

</div>

我們希望的效果是邊距和補(bǔ)白都為1cm，但實(shí)際運(yùn)行效果卻不是這樣。這是因?yàn)槿萜鞯母叨群蛯挾热笔≡O(shè)置下比較大，我們可以設(shè)置一個(gè)高、寬值，這個(gè)值并不需要精確，而且越小越好：

<div>

<p>演示文本</p>

</div>

上面修改的例子將容器DIV的高、寬值設(shè)置為1px,顯然這個(gè)值是很小的，但它(容器)卻可以隨著P所設(shè)置的邊距值或補(bǔ)白值自動(dòng)增大以滿足要求。

1.margin值的設(shè)定

margin值可采用任何長(zhǎng)度度量單位，如px、em、cm等，還可以采用百分比(%)來(lái)設(shè)置。用百分比設(shè)置依賴(lài)父元素的高、寬值。對(duì)margin和padding使用百分比是使頁(yè)面樣式能被多種媒體接受的最好方法。但不是所有的瀏覽器均支持這種行為。

margin:1cm設(shè)置了4個(gè)方向的邊距都是1cm，若4個(gè)方向邊距大小各不相同，可以分開(kāi)設(shè)置，例如margin:1cm,2cm,3cm,4cm。分別對(duì)應(yīng)著上、右、下、左4個(gè)方向，設(shè)置的順序可以想象成鐘表的順時(shí)針?lè)较颉?/p>

如果以margin來(lái)設(shè)置時(shí)，值并不是4個(gè)，那瀏覽器會(huì)如何判斷呢？答案并不是省略，而是采取值復(fù)制的方式，left復(fù)制right，bottom復(fù)制top。如果只給出1個(gè)值，如margin:1cm，則4個(gè)方向都是1cm；給出2個(gè)值，如margin:1cm,2cm,則上下為1cm，左右為2cm;給出3個(gè)值，如margin:1cm,2cm,3cm,則上為1cm，右為2cm,下為3cm,左為2cm。

如果確實(shí)想指定單側(cè)邊距的值，就需要用到margin-top、margin-right、margin-bottom、margin-left。

2.壓縮邊界

正確實(shí)現(xiàn)的客戶(hù)代理會(huì)壓縮縱向相鄰邊界，假如有下面的樣式定義:

LI {margin-top:10px;margin-bottom:30px}

則當(dāng)兩個(gè)LI元素相鄰出現(xiàn)時(shí)，間距取值較大的，按上面的定義會(huì)取30px，而不是10px或兩者之和。

邊界還可以設(shè)置為負(fù)值，可以產(chǎn)生一些文字重疊的效果：

<p>曹操看到孫權(quán)軍容整肅,軍紀(jì)嚴(yán)明,謂然嘆曰:“生子當(dāng)如孫仲謀”</p>
<p>先帝創(chuàng)業(yè)未半,而中道崩殂;今天下三分,益州疲敝,此誠(chéng)危急存亡之秋也。</p>

運(yùn)行以后，剛開(kāi)始只能看到第一段的內(nèi)容，可以將瀏覽器慢慢縮下，這時(shí)候就能看到第二段內(nèi)容隨著瀏覽器大小的變化而出現(xiàn)并且改變位置，甚至可以和第一段內(nèi)容交疊起來(lái)?？梢?jiàn)邊界的負(fù)值是相對(duì)于父元素的大小而言的，在這個(gè)例子中沒(méi)有顯式指定父元素，默認(rèn)情況下是Body。

3.邊框

元素的邊框(border)就是一條(有時(shí)是多條)圍繞著元素內(nèi)容及補(bǔ)白的線。

每個(gè)邊框都有三個(gè)特征:寬度、樣式、顏色。邊框?qū)挾鹊娜笔≈凳莔edium,medium沒(méi)有顯式定義，通常為兩個(gè)或三個(gè)像素。但我們通常不會(huì)看到邊框，原因是其缺省樣式為none,阻止了它們的出現(xiàn)。邊框的默認(rèn)顏色是元素本身的前景色，如果沒(méi)有聲明邊框顏色，那么，它的顏色將與元素的文本顏色相同。另一方面，如果一個(gè)元素沒(méi)有文本，例如一個(gè)只包含圖像的表格，顏色是由繼承得到的，邊框的顏色是其父元素的文本顏色。

CSS定義了9種不同樣式的border-style屬性，包括缺省值none.下面是相同顏色下的各種不同樣式的邊框:

也可以給邊框定義多種樣式。例如:

<style>
p {border-style:solid dashed dotted solid;border-color:red}
</style>

<p>多樣式的邊框</p>

邊框樣式規(guī)則的定義規(guī)則和上面提到的margin定義規(guī)則相同。另外還有需要注意的一點(diǎn)：當(dāng)部分瀏覽器無(wú)法支持一些邊框樣式，它將用solid來(lái)替代。

一旦指定了一個(gè)樣式，下一步就是給它一定的寬度。這個(gè)步驟使用border-width屬性。也可以用border-top-width、border-right-width、border-bottom-width、border-left-width來(lái)分開(kāi)設(shè)置。共有四種指定邊框?qū)挾鹊姆椒ǎ嘿x一長(zhǎng)度值或使用三個(gè)關(guān)鍵字:thin、medium(默認(rèn)值)和thick。這些關(guān)鍵字不必與某特定的寬度對(duì)應(yīng)，只是簡(jiǎn)單地定義了相互間的關(guān)系。它們的寬度關(guān)系為:thick>medium>thin。

設(shè)定邊框顏色十分容易。只有一個(gè)border-color屬性，同樣可以按margin的值復(fù)制方式來(lái)賦值。如果沒(méi)有設(shè)置顏色，則缺省顏色為元素的前景色。

如果要單獨(dú)設(shè)置某一邊的樣式，則可以用border-top、border-right、border-bottom、border-left。例如:p {border-top:thick silver inset;}.實(shí)際值的排列順序并不重要。唯一不能缺少的值是邊框樣式，因?yàn)樗笔閚one。

一般情況下可以用border屬性來(lái)設(shè)置不太復(fù)雜的邊框樣式，例如:H1 {border:thick silver solid;}.使用border的缺點(diǎn)是只能定義全局樣式、寬度及顏色。但可以在后面再單獨(dú)定義其一條邊的屬性，則可以覆蓋掉border相同的定義值。例如:h1 {border:thick silver solid; border-left-20px;}.第二條規(guī)則將替換掉由第一條規(guī)則指定的左側(cè)邊框的寬度值。

4.補(bǔ)白

補(bǔ)白位于元素框的邊界與內(nèi)容區(qū)之間。用于影響這個(gè)區(qū)域的屬性是padding。這個(gè)屬性可以接受任何長(zhǎng)度值或一個(gè)百分比。

元素的背景延伸到補(bǔ)白中，它還延伸到邊框的外部邊界。padding的缺省值是0(zero),且補(bǔ)白的值不能為負(fù)值。

同margin一樣，元素的補(bǔ)白也可以設(shè)置成百分比，百分比是參考父元素寬度計(jì)算的。

可以使用padding-top、padding-right、padding-bottom、padding-left來(lái)分開(kāi)設(shè)置單側(cè)補(bǔ)白。

5.浮動(dòng)與清除

CSS允許任何元素浮動(dòng)，從圖像到段落到列表。在CSS中是由屬性float來(lái)完成這些行為的。

<p> 

<img src="http://doc.verycd.com/images/emule.png"> 

eMule 是下載迅速、資源豐富的新一代 P2P 軟件，完全遵從 GPL 協(xié)議開(kāi)發(fā)，開(kāi)放源碼，永久免費(fèi)。利用他的卓越特性，我們不但可以與全世界的網(wǎng)友共同分享資源，更可以通過(guò) VeryCD，下載和發(fā)布最新的資源，充分享受自由共享的樂(lè)趣！

</p>

浮動(dòng)的元素在一些特性上脫離了普通的文檔流，盡管它仍影響著布局。浮動(dòng)的元素幾乎在它們自己的平面上出現(xiàn)，但仍對(duì)文檔的其余部分有重大的影響。

也可以為浮動(dòng)賦負(fù)值，這樣也許會(huì)引起浮動(dòng)元素超過(guò)父元素的范圍，但卻是允許的。

6.列表

為改變列表項(xiàng)的計(jì)數(shù)或項(xiàng)目符號(hào)類(lèi)型，可以使用List-style-type。

list-style-type屬性值及結(jié)果：

list-style-type的缺省值是disc，如果沒(méi)有特殊的聲明，所有列表(有序與無(wú)序)將使用圓盤(pán)作為每個(gè)項(xiàng)的項(xiàng)目符號(hào)。如果想取消項(xiàng)目符號(hào)的顯示，可以設(shè)置為none。但none并不中斷有序列表的計(jì)數(shù)。

有時(shí)，需要自定義的圖像作為列表項(xiàng)。以前的做法是以效果來(lái)仿造，容易造成代碼非常冗長(zhǎng)，現(xiàn)在只需要使用list-style-image聲明即可。例如:ul li {list-style-image:url(list.gif);}

有時(shí)候會(huì)遇到部分瀏覽器不支持自定義圖像，解決這個(gè)問(wèn)題的方法是定義一個(gè)備份的list-style-type。例如:ul li {list-style-image:url(logo.gif); list-style-type:square;}

還有一個(gè)屬性:list-style-position，它用來(lái)設(shè)置項(xiàng)目符號(hào)相對(duì)于列表項(xiàng)內(nèi)容的位置。有兩個(gè)允許值：inside和outside.默認(rèn)值是outside。

下面是兩種取值后的效果:

為簡(jiǎn)潔起見(jiàn)，可以組合三個(gè)列表樣式屬性為一個(gè)屬性:list-style。允許值為<列表項(xiàng)類(lèi)型>、<列表項(xiàng)圖像>、<列表項(xiàng)位置>。例如: li {list-style: url(logo.gif) disc outside;}

總結(jié)

以上是生活随笔為你收集整理的CSS的边框与补白的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。