css盒子（box）

CSS盒子(CSS box)

首先要清楚，CSS中沒有box這個屬性。CSS的盒子(box)是由以下幾個部分組成的：

內容(content)、填充(padding)、邊框(border)和邊界(margin)。盒子的內容當然是必須有的，而填充、邊框和邊界都是可選的。

盒子裡由外至裡依次是：

• margin 邊距
• border 邊框
• padding 間隙 (也有人稱做補丁)
• content (內容，比如文本，圖片等)

CSS 邊距屬性 (margin)
是用來設定一個元素所佔空間的邊緣到相鄰元素之間的距離。

CSS 邊框屬性 (border) 用來設定一個元素的邊線。

CSS 間隙屬性 (padding) 是用來設定元素內容到元素邊框的距離。

CSS 背景屬性指的是 content 和 padding 地區。

CSS 屬性中的 width 和 height 指的是 content
地區的寬和高。

下面我們來一個一個地介紹組成盒子的幾個屬性。

CSS邊框(border)邊框風格屬性(border-style)

這個屬性用來設定上下左右邊框的風格，它的值如下：

• none (沒有邊框，無論邊框寬度設為多大)
• dotted (點線式邊框)
• dashed (破折線式邊框)
• solid (直線式邊框)
• double (雙線式邊框)
• groove (槽線式邊框)
• ridge(脊線式邊框)
• inset (內嵌效果的邊框)
• outset (突起效果的邊框)

邊框寬度屬性(border-width)

這個屬性用來設定上下左右邊框的寬度，它的值如下：

• medium (是預設值)
• thin (比medium細)
• thick (比medium粗)
• 用長度單位定值。可以用絕對長度單位(cm, mm, in, pt, pc)或者用相對長度單位
  (em, ex, px)。

邊框顏色屬性(border-color)

這個屬性用來設定上下左右邊框的顏色。例句如下

.d5
{border-color:gray;border-style:solid;}

邊框屬性(border)

這個屬性是邊框屬性的一個快捷的綜合寫法，它包含border-width,
border-style和border-color。例句如下：

.d1 {border:5px solid
gray;}

單邊邊框屬性

上下左右四個邊框不但可以統一設定，也可以分開設定。

設定上邊框屬性，你可以使用border-top, border-top-width,
border-top-style, border-top-color。

設定下邊框屬性，你可以使用border-bottom, border-bottom-width,
border-bottom-style, border-bottom-color。

設定左邊框屬性，你可以使用border-left, border-left-width,
border-left-style, border-left-color。

設定上邊框屬性，你可以使用border-right, border-right-width,
border-right-style, border-right-color。

如下代碼：

.box {   background-color: #EEFAFF;   width: 30%;   float: left;   border: 1px solid #000000;   }

在border: 1px solid
#000000;一句中，我們一起為border指定了三個屬性值，其實它等效與下面的CSS語句：

border-style:solid;border-color:#000000;border-width:1px;

其實CSS中還有一些屬性支援這樣的寫法。下面為boxhead
div添加一個1像素的虛線下側邊框，修改的代碼如下：

.boxhead {font-size: 14px;font-weight: bold;background-color: #AEC6FD;border-bottom:1px dashed #000000;text-align: center;width: 100%;color: #FFFFFF;}

上面的例子只用到了兩種邊框，下面來看看其它幾種樣式的邊框。

<p
>&nbsp;</p>

<p ></p>

<p ></p>

<p ></p>

<p ></p>

<p ></p>

CSS填充屬性(padding)或間隙屬性

填充屬性定義的是內容(content)與邊框(border)的距離，

CSS間隙屬性

間隙屬性(padding)是用來設定元素內容到元素邊界的距離。

左間隙屬性(padding-left)

這個屬性用來設定左間隙的寬度。樣本如下：

.d1{padding-left:1cm}

右間隙屬性(padding-right)

這個屬性用來設定右間隙的寬度。樣本如下：

.d1 {padding-right:1cm}

上間隙屬性(padding-top)

這個屬性用來設定上間隙的寬度。樣本如下：

.d1 {padding-top:1cm}

下間隙屬性(margin-bottom)

這個屬性用來設定下間隙的寬度。樣本如下：

.d1{padding-bottom:1cm}

間隙屬性(padding)

這個屬性是設定間隙寬度的一個快捷的綜合寫法，用這個屬性可以同時設定上下左右間隙屬性。

你可以為上下左右間隙設定相同的寬度。樣本入下：

.d1 {padding:1cm}

你也可以分別設定間隙，順序是上，右，下，左。樣本如下：

.d1 {padding:1cm 2cm 3cm 4cm}

上面的代碼錶示，上間隙為1cm，右間隙為2cm，下間隙為3cm，左間隙為4cm。

CSS邊距屬性(marging)

邊距屬性是用來設定頁面中一個元素所佔空間的邊緣到相鄰元素之間的距離。

左邊距屬性(margin-left)

這個屬性用來設定左邊距的寬度。樣本如下：

.d1{margin-left:1cm}

上邊距屬性(margin-top)

這個屬性用來設定上邊距的寬度。樣本如下：

.d1 {margin-top:1cm}

下邊距屬性(margin-bottom)

.d1{margin-bottom:1cm}

邊距屬性(margin)

這個屬性是設定邊距寬度的一個快捷的綜合寫法，用這個屬性可以同時設定上下左右邊距屬性。

你可以為上下左右邊距設定相同的寬度。樣本入下：

.d1 {margin:1cm}

你也可以分別設定邊距，順序是上，右，下，左。樣本如下：

.d1 {margin:1cm 2cm 3cm 4cm}

上面的代碼錶示，上邊距為1cm，右邊距為2cm，下邊距為3cm，左邊距為4cm。