一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
记住，是所有的元素都可以看出一个盒子！
下图为一个CSS盒子模型的内部结构：
剩下一个自己写，现在不学好等你毕业找不到工作你就会后悔了。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{
margin:0
padding:0
}
.box{
width:100%
}
.span-box{
width:100%
border-top:1px solid #ccc
margin:50px 0 0
font-size: 0
padding-top: 15px
padding-left: 50px
}
.span-a{
border:2px dashed #000
background-color:#a9d6ff
padding:10px 0 20px 20px
font-size: 16px
}
.span-b{
border-top:2px dashed #000
border-right:2px dashed #000
border-bottom:2px dashed #000
background-color:#eeb0b0
padding:10px 20px 20px 20px
font-size: 16px
}
.box-content{
width:350px
height:200px
background-color: #99cc00
margin:80px 0 0 100px
}
.box-chlid{
width:150px
height:100px
border: 1px dashed #f00
background-color: #00ccff
margin-left: -50px
}
</style>
</head>
<body>
<div class="box">
<!-- span元素部分 -->
<div class="span-box">
<span class="span-a">行内元素</span>
<span class="span-b">行内元素2</span>
</div>
<div class="box-content">
父div
<div class="box-chlid">
子div
</div>
</div>
</div>
</body>
</html>
