CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和 外边距的方式。
ct_boxmodel.gif
- 内边距、边框和外边距都是可选的，默认值是零。
- width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
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} ##左上现
p.outset {border-style: outset} ##右下现
边框的宽度
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. 外边距合并
一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
ct_css_margin_collapsing_example_1.gif
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
ct_css_margin_collapsing_example_2.gif
