盒子模型

盒子模型具有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。