CSS 框模型概述
1、padding屬性
按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
或者
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
百分?jǐn)?shù)值是相對(duì)于其父元素的 width 計(jì)算的，所以，如果父元素的 width 改變，它們也會(huì)改變。
2、border邊框
border-style 屬性定義了 10 個(gè)不同的非 inherit 樣式，包括 none
這兩種方法是等價(jià)的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
border-width屬性為邊框指定寬度
p {border-style: solid; border-width: 15px 5px 15px 5px;}
下面的規(guī)則與上面的例子是等價(jià)的：
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
border-color屬性，它一次可以接受最多 4 個(gè)顏色值
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
邊框顏色值 transparent。這個(gè)值用于創(chuàng)建有寬度的不可見邊框
輪廓 outline 繪制元素周圍的一條線，
邊框外圍，突出元素
outline設(shè)置輪廓的樣式顏色 寬度
outline-style
outline-width
outline-color
輪廓的寬度不計(jì)算元素尺寸
3、CSS 外邊距
margin
h1 {margin : 10px 0px 15px 5px;}
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
4、CSS 尺寸 (Dimension)
屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。
height（max min）
width(max min)
line-height
normal(默認(rèn))
number：設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來設(shè)置行間距
length：設(shè)置固定的行間距。
百分比：基于當(dāng)前字體尺寸的百分比行間距。
注意 ：效果要通過改變?yōu)g覽器大小查看
5、CSS 外邊距合并
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
示例圖：
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。
假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
