出于 CSS 精確定義網頁樣式的本意，在格式化頁面對象時， CSS 將所有的元素都放置在一個“容器”里面，這個“容器”叫做 BOX。對于容器的格式化，CSS 提供了強大的支持，現在，首先了解一下與格式化“容器”有關的屬性。
“容器”的屬性共有以下的幾類：
l 邊距(margin)類的屬性設置了一個元素在四個方向上距離瀏覽器窗口邊界或上級元素的邊距。它用來控制一個元素在頁面上位置。
l 填充距(padding)類的屬性決定了究竟在邊框和內容之間應該插入多少空間的距離。
l 邊框(border)類的屬性定義了一個元素邊距的樣式。
l 剩下的一類中包括了寬度和高度屬性以及浮動和清除屬性。
margin-top
屬性值：<length> | <percentage> | <auto>
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該屬性設置了一個元素頂端的邊距，這個邊距可以是相對于瀏覽器窗口邊框來說，也可以是相對于上級元素來說。比如：BODY{margin-top:0px} 就是將瀏覽器窗口中的內容緊貼窗口的上邊界。
注意：這個屬性可以是負值，但是，很遺憾的是 Netscape 4 不支持這個負的邊距值。
margin-right
屬性值：<length> | <percentage> | auto
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該屬性設置了一個元素右側的邊距，這個邊距可以是相對于瀏覽器窗口邊框來說，也可以是相對于上級元素來說。
注意：這個屬性可以是負值。
margin-bottom
屬性值：<length> | <percentage> | auto
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該元素設置了一個元素底部的邊距，這個邊距可以是相對于瀏覽器窗口邊框來說，也可以是相對于上級元素來說。
注意：這個屬性可以是負值。
margin-left
屬性值：<length> | <percentage> | auto
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該元素設置了一個元素左側的邊距，這個邊距可以是相對于瀏覽器窗口邊框來說，也可以是相對于上級元素來說。具體以上四個屬性我們可以通過以下這個例子就會明白的。
<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
margin-top:0em;
margin-right:2em;
margin-bottom:3em;
margin-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p>
</body>
</HTML>
padding-top
屬性值：<length> | <percentage>
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該屬性設置了一個元素的頂端填充距。它的屬性值可以使用長度值或者百分比值來指定。但它的值不能為負，如果指定了負值，那么瀏覽器在執行時將把它變成所能支持的最接近的值：0
P{padding-top:15px}
padding-right
屬性值：<length> | <percentage>
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該屬性設置了一個元素的右側填充距。它的屬性值可以使用長度值或者百分比值來指定，但是不能使用負值。
padding-bottom
屬性值：<length> | <percentage>
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該屬性設置了一個元素的底端填充距。它的屬性值可以使用長度值或者百分比值來指定，但是不能使用負值。
padding-left
屬性值：<length> | <percentage>
初始值：0
適用于：所有元素
繼承：否
百分比值：參考上級元素的寬度
該屬性設置了一個元素的底端填充距。
它的屬性值可以使用長度值或者百分比值來指定，但是不能使用負值。上面所介紹的四個屬性我們可以通過以下例子看出：
<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
padding-top:0em;
padding-right:2em;
padding-bottom:3em;
padding-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p>
</body>
</HTML>
border-top-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用于：所有元素
百分比值：不適用
繼承：否
該元素設置了元素頂端邊框的寬度，其屬性值可以使用關鍵字或數字來指定。關鍵字共有三個：其中thin表示為最細的邊框，thick表示為最粗，medium表示為中等寬度。
border-right-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用于：所有元素
百分比值：不適用
繼承：否
該元素設置了元素右邊邊框的寬度，其屬性值可以使用關鍵字或數字來指定。
border-bottom-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用于：所有元素
百分比值：不適用
繼承：否
該元素設置了元素底端邊框的寬度，其屬性值可以使用關鍵字或數字來指定。
border-left-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用于：所有元素
百分比值：不適用
繼承：否
該元素設置了元素左邊邊框的寬度，其屬性值可以使用關鍵字或數字來指定。
border-color
屬性值：<color>{1,4}
初始值：“color”屬性的值
適用于：所有元素
繼承：否
百分比值：不適用
邊框顏色屬性可以設置元素四條邊框的顏色，當你給出四個顏色屬性值時，它們的表示順序為上，右，下，左。如果僅給出一個值，那么四條邊框的顏色都一樣。如果給出兩個或三個值，那么缺失邊的顏色將從對邊獲取。如果在指定邊框時沒有給出顏色值，那么，邊框的顏色就等于該元素“color”屬性值的顏色。
border-style
屬性值：none | dotted | dashed | solid | double | groove | ridge | inset | outset
初始值：none
適用于：所有元素
繼承：否
百分比值：不適用
“border-style”決定了邊框的樣式。如果在邊框寬度時值為0，那么這個屬性值就無效了。也就是說，這個屬性必須用于可見的邊框。
“border-style”屬性值共有九個關鍵字來描述，它們的名稱和定義如下：
關鍵字 解釋
none 不畫邊框，不論border-width的寬度是多少，邊框都不會顯示。
dotted 邊框的樣式為由點組成的虛線。
dash 邊框的樣式為由短線組成的虛線。
solid 邊框為實線。
double 邊框線為雙線。雙線再加上它們之間的空白部分的寬度就等于border-width寬度。
groove 3D溝槽狀的邊框。
ridge 3D脊狀的邊框。
inset 3D內嵌的邊框(顏色較深)
outset 3D外嵌的邊框(顏色較淺)
屬性值可以指定一個、兩個、三個或四個。如果僅給出一個屬性值，那么所有的邊框都是這個樣式，如果給出四個值，它們分別作用于上、右、下、左四條邊框。如果僅給出兩個或三個值，那么缺失邊的屬性值將從對邊獲取。
width
屬性值：<length> | <percentage> | auto
初始值：auto
適用于：塊級元素和可替換元素
繼承：否
百分比值：參考上級元素的寬度
所有的塊級元素和可替換元素都擁有 width(寬度) 屬性。寬度可以用長度值、百分比值來定義元素的寬度。
height
屬性值：<length> | auto
初始值：auto
適用于：塊級元素和可替換元素
繼承：否
所有的塊級元素和可替換元素都可以擁有 height 屬性。它的定義方式與 width 屬性是相似的。不過需要注意的是，height 屬性不能用百分比值來指定。如果把 height 和 width 結合起來使用就能夠很好地控制一個元素的高度和寬度值。在 height 和 width 都是“auto”的情況下，改變它們任何一個都可以相應地使圖片按比例縮放。
float
屬性值：left | right | none
初始值：none
適用于：所有元素
繼承：否
百分比值：不適用
使用 float 元素可以使文字環繞在一個元素的四周。當屬性值是 right 或 left 時，該元素就會相應地出現在右邊蟣擼矗何淖只啡樸詬迷氐淖蟊呋蠐冶摺?nbsp;
clear
屬性值：none | left | right | both
初始值：none
適用于：所有元素
繼承：否
百分比值：不適用
這個屬性是與 float 有關的，它可以指定在一個元素的某一邊是否允許有環繞的文字（或其它對象）出現。如果指定屬性值是“right”，那么該元素右側的所有空間都不會放進任何對象。如果屬性值是“none”，那么該元素四周都有對象環繞，這也是默認的屬性值。
|
您現在的位置： 
