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

2024-07-11 08:24:15

字體：大中小

供稿：網(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)寫(xiě)成margin:10px，這樣代表margin:10px 10px 10px 10px。如果上邊距和下邊距相等，左邊距和右邊距相等時(shí)，可以簡(jiǎn)寫(xiě)成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ū)域，定義及寫(xiě)法和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)寫(xiě)成border:1px #000 solid。

上一篇：CSS代碼優(yōu)化7個(gè)準(zhǔn)則

下一篇：CSS網(wǎng)頁(yè)布局的核心內(nèi)容:CSS盒模型