CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和 外邊距的方式。
ct_boxmodel.gif
- 內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。
- width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
1. 內(nèi)邊距padding
padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值。
按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：
- padding-top
- padding-right
- padding-bottom
- padding-left
2. 邊框
3 個(gè)方面：寬度、樣式，以及顏色
一個(gè)邊框定義多個(gè)樣式：
p.aside {border-style: solid dotted dashed double;}
定義了四種邊框樣式：實(shí)線上邊框、點(diǎn)線右邊框、虛線下邊框和一個(gè)雙線左邊框。
定義單邊樣式
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
p.dotted {border-style: dotted} ##點(diǎn)
p.dashed {border-style: dashed} ##短線
p.solid {border-style: solid} ##實(shí)線
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;}即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣?dòng)設(shè)置為 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 屬性
類似于內(nèi)邊距
4. 外邊距合并
一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并
ct_css_margin_collapsing_example_1.gif
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。
ct_css_margin_collapsing_example_2.gif
