一、盒子模型概述
盒子模型是CSS的基石,指定標籤如何顯示；
頁面上的每個元素都被當成一個矩形盒子,佔據一定的頁面空間,這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊界（margin）組成；
二、border
- 1、border-width
指定邊框的寬度- 2、border-style
指定邊框的樣式，border-style:none | dotted | solid | double | dashed;
dotted 定義點狀邊框。在大多數瀏覽器中呈現爲實線。
dashed 定義虛線。在大多數瀏覽器中呈現爲實線。
solid 定義實線。
double 定義雙線。雙線的寬度等於 border-width 的值。- 3、border-color
指定邊框的顏色- 4、border-top|bottom|left|right
border-top-style
border-top-width
border-top-color
三、padding
padding：padding區域在border與content之間；
padding（填充）,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。
1）用來調整內容在容器中的位置關係
2）用來調整子元素在父元素中的位置關係。padding屬性需要添加在父元素上。
3）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後添加的padding屬性。
4）背景色和背景圖像會覆蓋padding和content組成的區域；
5）padding不可以爲負值
1、padding-top|bottom|left|right
2、padding:10px;
所有四個填充都是 10px
3、padding:10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
4、padding:10px 5px 15px;
上填充是 10px 右填充和左填充是 5px 下填充是 15px
5、padding:10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px
四、margin
margin：在元素外邊的空白區域，被稱爲邊距。
1）外邊距(margin)在border之外,margin區域不應用背景;CSS中margin默認值爲0
2）可以爲負數。
1、margin-top|bottom|left|right
2、margin:10px 5px 15px 20px;
上邊距是 10px 右邊距是 5px 下邊距是 15px 左邊距是 20px
3、margin:10px 5px 15px;
上邊距是 10px 右邊距和左邊距是 5px 下邊距是 15px
4、margin:10px 5px;
上邊距和下邊距是 10px 右邊距和左邊距是 5px
5、margin:10px;
所有四個邊距都是 10px五、特別關注
- 1、行內元素
不要給上下的margin 和padding，上下margin和padding會被忽略。左右margin和padding會起作用。- 2、外邊距合併
1）、當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：
2）當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
3）應用：這就是一系列的段落元素佔用空間非常小的原因，因爲它們的所有外邊距都合併到一起，形成了一個小的外邊距。
4）合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。