CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內容、內邊距、邊框和 外邊距的方式。
ct_boxmodel.gif
- 內邊距、邊框和外邊距都是可選的，默認值是零。
- width 和 height 指的是內容區(qū)域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸，但是會增加元素框的總尺寸。
1. 內邊距padding
padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。
按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
四個單獨的屬性，分別設置上、右、下、左內邊距：
- padding-top
- padding-right
- padding-bottom
- padding-left
2. 邊框
3 個方面：寬度、樣式，以及顏色
一個邊框定義多個樣式：
p.aside {border-style: solid dotted dashed double;}
定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。
定義單邊樣式
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
p.dotted {border-style: dotted} ##點
p.dashed {border-style: dashed} ##短線
p.solid {border-style: solid} ##實線
p.double {border-style: double} ##雙線
p.groove {border-style: groove} ##灰色
p.ridge {border-style: ridge} ##灰白框
p.inset {border-style: inset} ##左上現(xiàn)
p.outset {border-style: outset} ##右下現(xiàn)
邊框的寬度
p {border-style: solid; border-width: 5px;}
定義單邊寬度
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
p {border-style: none; border-width: 50px;}即邊框根本不存在，那么邊框就不可能有寬度，因此邊框寬度自動設置為 0，而不論您原先定義的是什么。
邊框的顏色
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
透明邊框
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}
3. 外邊距margin 屬性
類似于內邊距
4. 外邊距合并
一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并
ct_css_margin_collapsing_example_1.gif
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。
ct_css_margin_collapsing_example_2.gif
