CSS教程:通過(guò)實(shí)例學(xué)習(xí)和理解CSS盒模型

2024-07-11 08:44:29

字體：大中小

供稿：網(wǎng)友

盒模型主要定義四個(gè)區(qū)域：內(nèi)容（content）、內(nèi)邊框距（padding）、邊框（border）和外邊距（margin）。
自從1996年CSS1的推出，W3C組織就建議把所有網(wǎng)頁(yè)上的對(duì)像都放在一個(gè)盒（box）中，設(shè)計(jì)師可以通過(guò)創(chuàng)建定義來(lái)控制這個(gè)盒的屬性，這些對(duì)像包括段落、列表、標(biāo)題、圖片以及層<div>。
盒模型主要定義四個(gè)區(qū)域：內(nèi)容（content）、內(nèi)邊框距（padding）、邊框（border）和外邊距（margin）。
對(duì)于初學(xué)者，經(jīng)常會(huì)搞不清楚margin，padding之間的層次、關(guān)系和相互影響。下面我們一起看一個(gè)實(shí)例，以便于加深理解。

下面我們一起來(lái)分析一下這個(gè)例子。
XHTML代碼
<div id="left">這里是內(nèi)容，對(duì)象中的內(nèi)容到對(duì)象邊緣的距離是PADDING。寬為270像素，高為175像素，由于四周的邊框?qū)挾仁?像素，所以寬和高要加6像素，即寬276像素，高181像素。</div>
<div id="right"></div>
CSS代碼
#left {
float:left;
margin-right:67px;
width:230px;
height:145px;
font-size:14px;
line-height:24px;
padding:30px 0 0 40px;
border:3px #000 solid;
background:url(img1.jpg) #DE9 no-repeat center;
}
#right {
float:left;
width:128px;
height:128px;
background:url(img2.jpg);
}
這段代碼表現(xiàn)的就是圖中的效果。下面我們來(lái)分析一下各屬性的作用及用法。
1、margin：指邊框以外的空白區(qū)域，用于設(shè)置頁(yè)邊距或?qū)ο笈c對(duì)象之間的距離。30px 0 0 40px分別代表上、右、下、左（順時(shí)針）四個(gè)邊距。如果四邊都一樣，可以簡(jiǎn)寫成margin:10px，這樣代表margin:10px 10px 10px 10px。如果上邊距和下邊距相等，左邊距和右邊距相等時(shí)，可以簡(jiǎn)寫成margin:5px 10px，這樣代表margin:5px 10px 5px 10px。也可以分別定義，如margin-top，指定上邊距。右、下、左分別是margin-right、margin-bottom、margin-left。當(dāng)值為0時(shí)可以省略單位。如：margin:0 5px等同于margin:0px 5px。
2、padding：指對(duì)象的邊緣到內(nèi)容之間的空白區(qū)域，定義及寫法和margin相同。需要注意的是，為padding定義值的同時(shí)，也會(huì)相應(yīng)增大對(duì)象的寬高。如有一個(gè)Div，寬為100px，當(dāng)定義了內(nèi)容距左、右邊距都是10px（左右加一起是20px），此時(shí)Div的整體寬度就會(huì)是120px，如果要維持原100px，則要減掉20px，即80px。
#exp {padding:0 10px; width:100px}，此時(shí)<div id="exp"></div>的寬度就是120px。
#exp {padding:0 10px; width:80px}，此時(shí)<div id="exp"></div>的寬度就是100px。
3、border：指對(duì)象的邊框，用于設(shè)置邊框的粗細(xì)、顏色及樣式。如border-top:2px #000 solid，代表層的上邊框是2像素的黑色直線。border-left:1px #f00 dotted，代表右邊框是1像素的紅色虛線。如果邊框四周的樣式一樣，可以簡(jiǎn)寫成border:1px #000 solid。
border:none代表沒(méi)有邊框，常用于設(shè)置如圖片等默認(rèn)帶邊框的元素。
4、background：設(shè)置對(duì)象的背景樣式。此屬性是一個(gè)符合屬性，由若干個(gè)不同背景樣式屬性的值組成。如此例中，url(img1.jpg)代表背景圖片，不添默認(rèn)為none；#DE9代表背景顏色，不添默認(rèn)為透明；no-repeat代表不讓背景圖片平鋪，不添默認(rèn)為平鋪；center代表背景圖片居中顯示，不添默認(rèn)為從左上角開(kāi)始顯示。
5、line-height：定義對(duì)象的行高。如果定義的行高和對(duì)象的高度相同，則文字垂直居中顯示（只適用于文字只有一行的情況下）。
在這里有必要提到的一個(gè)原則，就是輔助的，只起修飾作用的圖片盡量用背景處理。這里的“輔助圖片”是指那些不是內(nèi)容的一部分，僅僅用于修飾、間隔、提醒的圖片。
本文是幫助用戶加強(qiáng)對(duì)CSS盒模型的理解，至于文中所涉及到的屬性，如果您沒(méi)有完全理解也沒(méi)有關(guān)系，我們會(huì)在后續(xù)的文章中詳細(xì)介紹CSS的各屬性。

上一篇：你真的了解CSS嗎？你是屬于哪個(gè)層次？

下一篇：讓樣式表CSS代碼更加專業(yè)規(guī)范