标签：
盒子模型属性有边框、内边距和外边距。
1、边框(border):对应包装盒的纸壳，他一般具有一定的厚度。
2、内边距(padding):位于边框内部，是内容与边框的距离，即对应包装盒的填充部分，所以也被称为填充。
3、外边距(margin):位于边框外部，边框外面周围的间隙，所以也被称为边界。
盒子模型除了边框、内边距、外边距之外，还应包括元素内容本身，所以完整的盒子模型平面结构图所示。
因为盒子是矩形结构，所以边框、内边距、外边距这些属性部分都分别对应上(top)下(bottom)左(left)右(right)4条边，这4条边的设置可以不同。
盒子模型除平面结构图外，还包括三维的立体结构图，从上往下看，他表示的层次关系依次如下。
1、首先是盒子的主要标识：边框（border），位于盒子第一层。
2、其次是元素内容（content）、内边距（padding），两者同位于第二层。
3、再次是前面着重讲解的背景图（background-image），位于第三层。
4、背景色（background-color）位于第四层。
5、最后是整个盒子的外边距（margin）。
在网页中看到的页面内容，都是盒子模型的三维立体结构多层叠加的最终效果，从这里可以看出，若对某个页面元素同时设置背景图像和背景颜色，则背景图像将在背景颜色的上方显示。
盒子模型的属性
1、边框
边框（border）有3个属性，分别是color（颜色）、width（粗细）和style（样式）。网页中设置边框样式时，常常需要将这3各属性很好的配合起来，才能达到良好的页面效果。在使用CSS设置边框的时候，分别使用border-color、border-width、border-style设置边框的颜色、粗细和样式。
/1/border-color
border-color的设置方法与文本的color属性或背景颜色background-color属性完全一样，也是使用十六进制设置边框的颜色，如红色为#FF0000。
由于盒子模型分为上下左右4个边框，所以在设置边框时，可以按上下左右的顺序来设置4个边框的颜色，也可以同时设置4个边框的颜色。Border-color属性的设置如下表所示。
Border-color属性设置方法
|
属性 |
说明 |
示例 |
|
Border-top-color |
设置上边框颜色 |
Border-top-color:#369; |
|
Border-right-color |
设置右边框颜色 |
Border-right-color:#369; |
|
Border-bottom-color |
设置下边框颜色 |
Border-bottom-colot:#FAE45B; |
|
Border-left-color |
设置左边框颜色 |
Border-left-color:#EFCD56; |
|
Border-color |
设置4个边框为同一颜色 |
Border-color:#EEFF345; |
|
|
上下边框颜色为#369 左右边框颜色为#000 |
Border-color:#369 #000; |
|
|
上边框颜色为#369 左、右边框颜色为#000 下边框颜色为#F00 |
Border-color:#369 #000 #F00; |
|
|
上、右、下、左边框颜色分别为 #369、#000、#F00、#00F |
Border-color:#369 #000 #F00 #00F |
标签：
原文地址：http://www.cnblogs.com/water5832/p/5721920.html
