盒子模型

????????一個盒子我們會分成幾個部分：

????????內(nèi)容區(qū)(content)

????????內(nèi)邊距(padding)

????????邊框(border)

????????外邊距(margin)

內(nèi)容區(qū)：

內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素 中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。

如果沒有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的。

通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大 小。

width和height屬性只適用于塊元素。

內(nèi)邊距:

內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。

默認(rèn)情況下width和height不包含padding的大小。

使用padding屬性來設(shè)置元素的內(nèi)邊距。

例如：

padding:10px 20px 30px 40px

這樣會設(shè)置元素的上、右、下、左四個方向的內(nèi)邊距

padding:10px 20px 30px;

分別指定上、左右、下四個方向的內(nèi)邊距

padding:10px 20px;

分別指定上下、左右四個方向的內(nèi)邊距

padding:10px;

同時指定上左右下四個方向的內(nèi)邊距

同時在css中還提供了padding-top、padding-right、padding-

right、padding-bottom分別用來指定四個方向的內(nèi)邊距。

邊框:

可以在元素周圍創(chuàng)建邊框，邊框是元素可見框的最外部。

可以使用border屬性來設(shè)置盒子的邊框：

border:1px red solid;

上邊的樣式分別指定了邊框的寬度、顏色和樣式。

也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。

和padding一樣，默認(rèn)width和height并包括邊框的寬度。

邊框的樣式:

邊框可以設(shè)置多種樣式：

none（沒有邊框）

dotted（點線）

dashed（虛線）

solid（實線）

double（雙線）

groove（槽線）

ridge（脊線）

inset（凹邊）

outset（凸邊）

外邊距:

外邊距是元素邊框與周圍元素相距的空間。

使用margin屬性可以設(shè)置外邊距。

用法和padding類似，同樣也提供了四個方向的? margin-top/right/bottom/left。

當(dāng)將左右外邊距設(shè)置為auto時，瀏覽器會將左右外 邊距設(shè)置為相等，所以這行代碼margin:0 auto可 以使元素居中。

????????

????

????????