CSS布局中的几个重要属性,width,height,margin,padding,float,position
首先来看看CSS中的盒子模型，如下图：
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围于其他物品要留出一定的空间。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度。如果不指定width，默认是填充满父容器的content区域，如果不指定height，高度由其包含的content决定。
margin的设置规则参照 http://blog.csdn.net/kkdelta/article/details/8701617
大家可以通过下面的例子来体会和理解margin和padding：
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>body { padding:20px;}a { color:#00f; text-decoration:none;}a:hover { color:#f60; position:relative; top:1px; left:1px;}#layout { width:600px; margin:0 auto; background:#eee; position:relative;}#new { position:absolute; top:-15px; left:140px;}</style></head><body><div id="layout"> <div id="new"><img src="http://www.zhuna.cn/images/new.gif" /></div> 这里是内容<a href="#">这里是链接</a>这里也是内容</div></body></html>