盒子模型，英文即box model。无论是div、span、还是a都是盒子。
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
标准盒子模型：
IE盒子模型：
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
<body>标签也有margin
<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
效果如下：
padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种：
第一种写小属性：
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;第二种写综合属性，用空格隔开：
(上、右、下、左)（顺时针方向。margin的道理也是一样的）
padding:30px 20px 40px 100px;如果只写了三个值，则顺序相当于：上、右、下、右。
如果只写了两个值，则顺序相当于：上、右、上、右。
如果有小大属性的混用，
如：
padding: 20px;
padding-left: 30px;要用小属性层叠大属性：即相当于：padding: 20px 20px 20px 30px
如：
div{ width: 200px; height: 200px; padding: 10px 20px 30px; padding-right: 40px; border: 1px solid #000; }
则相当于：padding: 10px 40px 30px 20px（40>20所以用40层叠20）
但是要切记，不要把小属性写在大属性前面padding: 20px;
padding-left: 30px;
padding: 20px;
这样写是错误的。这样写会起不到小属性层叠大属性的效果：
div{ width: 200px; height: 200px; padding-left: 10px; padding-right: 20px; padding:40px 50px 60px; padding-bottom: 30px; border: 1px solid #000; }
则相当于：padding: 40px 50px 30px 50px;
border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
比如border:10px ridge red;这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
border的所有的线型如下：（我们可以通过查看CSS参考手册得到）
border拆分
border是一个大综合属性。比如说：
border:10px solid red;就相当于：
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。由于border有四个方向，所以也相当于:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;由于每个border方向都有width、style、color属性，所以也相当于：
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;但是工作中尽量追求简单。
上面的实现：
border:10px solid red;
border-right-color:blue; //小属性写在大属性下面，小会层叠大
与padding相同，如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
border-width:10px 20px; //上右下右
border-style:solid dashed dotted; //上右下右
border-color:red green blue yellow; //上右下右所以上述实现：
border:10px solid red;
border-style:solid dashed; //小属性写在大属性下面，小会层叠大另外：
border可以没有：
border:none;
可以某一条边没有：
border-left: none;
也可以调整左边边框的宽度为0：
border-left-width: 0;如果利用:
width:0;
height:0;则border就是整体了：此时若
border:50px solid green;
border-top-color:red;则是下面的效果：
然后我们将border的底部取消：
最后设置border的左边和右边为白色：
这样，一个三角形就画好了，是不是很有趣。。
本文大部分借鉴于点击打开链接。