盒子模型

• Border(邊框)- 圍繞在內(nèi)邊距和內(nèi)容外的邊框。

• Padding(內(nèi)邊距)- 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。

• Margin(外邊距)- 清除邊框外的區(qū)域，外邊距是透明的。

• Content(內(nèi)容)- 盒子的內(nèi)容，顯示文本和圖像。

邊框(border)

border可以設(shè)置元素的邊框。邊框有三部分組成：邊框?qū)挾取⑦吙驑邮?、邊框顏色?/p>

語法：

border: border-width || border-style || border-color

其中盒子的四邊都可以分開進行設(shè)置，代碼示例：

結(jié)果：

此外在盒子模型中，可以通過vorder-collapse設(shè)置表格的粗細邊框。

語法：

border-collapse: collapse;

• 表示相鄰邊框合并在一起，防止兩個邊框和在一起，使得邊框變粗。

內(nèi)邊距（padding）

當元素的 padding（填充）內(nèi)邊距被清除時，所釋放的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>

單獨使用 padding 屬性可以改變上下左右的填充。

padding屬性可以有1～4個值。

可能的值：

代碼示例：

結(jié)果：

外邊距（margin）

margin屬性用于設(shè)置外邊距，控制盒子與盒子之間的距離。

可能的值：

代碼示例：

margin簡寫方式代表的意義和padding完全一致。

外邊距典型應(yīng)用

外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：

盒子必須設(shè)定了寬度

盒子左右外邊距都設(shè)置為auto。

.header {width: 960px; margin: 0 auto;}

常見的寫法，以下三種都可以：

margin-left:auto; margin-right: auto;

margin: auto;

margin: 0 auto;

外邊距合并

使用margin定義塊級元素的垂直外邊距時，可能出現(xiàn)外邊距的合并，如下圖所示：

嵌套塊元素垂直外邊距的塌陷

對于兩個潛逃關(guān)系（父子關(guān)系）的塊元素，父元素上有外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

解決方案：

1. 可以為父元素定義上邊框

2. 可以為父元素定義上內(nèi)邊框

3. 可以為父元素添加：overflow:hidden

相鄰塊元素垂直外邊距的合并

當上下相鄰的兩個塊元素（兄弟關(guān)系）相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和。其結(jié)果是取兩個值中較大者。

清除內(nèi)外邊距

網(wǎng)頁元素很多都帶有默認的內(nèi)外邊距，而且不同瀏覽器默認的也不一致，因此在布局之前，需要首先清楚網(wǎng)頁的內(nèi)外邊距。

在CSS樣式中書協(xié)一下代碼：

注意細節(jié)：行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距，但是轉(zhuǎn)換為塊級和行內(nèi)塊元素就可以了。