今天遇到css中的盒子模型问题，因此研究了一下。
盒子模型是相对于一个元素的，每个元素都有自己的盒子，可以设置margin,border,padding,content.
从外到内一次是:margin,border,padding,content.
设置高和宽是实际上是设置border的height和width属性。
元素的宽度计算公式为:margin-left+border-left+padding-left+content+padding-right+border-right+margin-right;
而且margin是相对于相邻元素的外边距。
在嵌套相邻元素中，设置内层元素margin-top时不起作用，原来是没有激活外层元素的layout属性，即内层元素没有获得外层父级元素的layout属性。
具体什么原因，还是不太明白，可以根据下面方法解决：
为父级元素加上float,overflow,position,padding-top属性来激活layout属性渲染自己。
在没有激活父级元素layout属性的前提下，上面显示效果的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>###</title>
<style type="text/css">
#outer{
background-color:blue;
width:150px;
height:100px;
}
#inner{
margin-left:20px ;
margin-top:30px;
padding-top:20px;
background-color:red;
width:100px;
height:20px;
}
</style>
</head>
<body>
<div id="outer">
<p id="inner">生命的起源</p>
</div>
</body>
</html>
上面是激活父级元素的layout属性后的显示效果，比如在父级元素中加入overflow属性，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>###</title>
<style type="text/css">
#outer{
background-color:blue;
overflow:hidden;
width:150px;
height:100px;
}
#inner{
margin-left:20px ;
margin-top:30px;
padding-top:20px;
background-color:red;
width:100px;
height:20px;
}
</style>
</head>
<body>
<div id="outer">
<p id="inner">生命的起源</p>
</div>
</body>
</html>
原文：http://www.cnblogs.com/xshang/p/3515053.html