CSS 盒模型簡介

1、盒子模型概述

盒子模型是CSS的基石,指定標籤如何顯示；
頁面上的每一個元素都被當成一個矩形盒子,佔據必定的頁面空間,這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊界（margin）組成；

2、border

• 一、border-width

指定邊框的寬度

• 二、border-style

指定邊框的樣式，border-style:none | dotted | solid | double | dashed;
dotted    定義點狀邊框。在大多數瀏覽器中呈現爲實線。
dashed    定義虛線。在大多數瀏覽器中呈現爲實線。
solid     定義實線。
double    定義雙線。雙線的寬度等於 border-width 的值。

• 三、border-color

指定邊框的顏色

• 四、border-top|bottom|left|right

border-top-style
border-top-width
border-top-color

3、padding

padding：padding區域在border與content之間；
padding（填充）,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。

1）用來調整內容在容器中的位置關係
2）用來調整子元素在父元素中的位置關係。padding屬性須要添加在父元素上。
3）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後添加的padding屬性。
4）背景色和背景圖像會覆蓋padding和content組成的區域；
5）padding不能夠爲負值
一、padding-top|bottom|left|right    
二、padding:10px;
全部四個填充都是 10px
三、padding:10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
四、padding:10px 5px 15px;
 上填充是 10px 右填充和左填充是 5px 下填充是 15px

五、padding:10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px

4、margin

margin：在元素外邊的空白區域，被稱爲邊距。

1）外邊距(margin)在border以外,margin區域不該用背景;CSS中margin默認值爲0
2）能夠爲負數。

一、margin-top|bottom|left|right    
二、margin:10px 5px 15px 20px;
上邊距是 10px 右邊距是 5px 下邊距是 15px 左邊距是 20px
三、margin:10px 5px 15px;
上邊距是 10px 右邊距和左邊距是 5px 下邊距是 15px
四、margin:10px 5px;
上邊距和下邊距是 10px 右邊距和左邊距是 5px
五、margin:10px;
全部四個邊距都是 10px

5、特別關注

• 一、行內元素

不要給上下的margin 和padding，上下margin和padding會被忽略。左右margin和padding會起做用。

• 二、外邊距合併

1）、當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

2）當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

3）應用：這就是一系列的段落元素佔用空間很是小的緣由，由於它們的全部外邊距都合併到一塊兒，造成了一個小的外邊距。

4）合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。