盒子模型具有border、margin、padding以及填充的内容的属性，设置这些属性的宽高和粗细和一个标签本身的宽高是没有关系的，即当一个div的高度是200px宽度是200px，设置border的width为5px，这个div的border以内的区域的宽高保持不变，设置一个div的margin和padding那么这个div的border以内的区域会变大。
border：
border-style：边框的样式
border-color：边框的颜色
border-width：边框的粗细
margin外边距：margin-top margin-right margin-left margin-bottom；当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。当块之间是父子关系时，通过设置子块的margin参数为负数，可以将子块从父块中“分离”出来。
padding内边距：padding-top padding-right padding-left padding-bottom
html源码：
<div id="d1">
<div id="d2">border：border-style：边框的样式
</div>
</div>
css：
* {
margin:0px;
padding:0px;
}
#d1 {
width:200px;
height:200px;
background-color:#aaa3a3;
}
#d2 {
width:100px;
height:100px;
background-color:#6885f7;
}
给d1设置border、margin和padding后
#d1 {
width:200px;
height:200px;
background-color:#aaa3a3;
margin-top:10px;
margin-left:10px;
border-style:solid;
border-color:#ff0000;
border-width:5px;
padding-top:20px;
padding-left:20px;
}
盒子的浮动使用：
float：left|right|none
清除浮动：
clear：both|left|right
盒子的定位：
相对定位和绝对定位以及使用fixed进行定位。
position：absolute|relative|fixed。
原文：http://www.cnblogs.com/you-are-the-one/p/4854790.html