在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。
1、边框
border 的属性主要有3个，分别是color、width和style。
（1）如果给出1个属性值，表示上下左右边框均为该值；
（2）如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；
（3）如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；
（4）如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针顺序。
在设置边框时，在给元素设置background-color背景色时，IE作用的区域为content+padding，而Firefox则是content+padding+border。
示例：
<html>
<head>
<title>test</title>
<style type="text/css">
#outerBox{
width:200px;
height:100px;
border:2px black solid;
border-left:4px green dashed;
border-color:red gray orange blue;
border-right-color:purple;
}
</style>
</head>
<body>
<div id="outerBox">
</div>
</body>
</html>
2、内边距（padding）
（1）设置1个属性值，表示上下左右4个padding均为该值；
（2）设置2个属性值，前者为上下padding的值，后者为左右padding的值；
（3）设置3个属性值，第1个为上padding值，第2个为左右padding的值，第3个位下padding的值；
（4）设置4个属性值，按照顺时针方向，依次为上、右、下、左padding的值。
如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。
3、外边距（margin）
margin指的是元素与元素之间的距离。
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的margin，具体数值各个浏览器不尽相同。因此在body中的其他盒子，就不会紧贴着浏览器窗口的边框了。
示例：
body{
border:1px black solid;
background:#cco;
}
body是一个特殊的盒子，它的背景色会延伸到margin的部分，而其他盒子的背景色只会覆盖“padding+内容”部分（IE），或者“border+padding+内容”部分（firefox）。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
