CSS盒子模型

说明：
1. html元素都可以看成一个盒子，每个盒子都有自己的坐标原点（左上角），通过定义属性值的大小来确定离当下盒子原点的距离。
2. 盒子模型的参照物不一样，使用的css属性就不一样。；例如从div1来看滴margin-right的位置对div2来说就是margin-left，对于div2是padding-top，对content元素来说就是margin-top
3. 如果不希望破坏外观，则尽量使用margin来布局而不是padding，因为padding过大可能会改变盒子大小，相当于这个盒子有弹性。margin过大会将盒子内容挤到盒子外面去但盒子本身没有变化。

更新
最近参加了网易的考题，感觉对盒子模型的体会还是不够深刻，重新画了一个更加直观的图：

这样来看，就比较明显了。
如果有如下的css文件：

  {
  width: 100px;
  height:200px;
  margin: 10px;
  padding:20px;
  }

要注意的是，对边框的定值是对每一个的定值，也就是说margin=10px意味着margin-top=margin-right=margin-bottom=margin-left=10px;同理padding。
我们平时用到的css中的width和height设置的是内容大小，而组件的大小，也就是offHeight和offWidth是除margin之外的组件高度和宽度。在增加padding的时候，会将盒子撑大外扩，有的时候我们需要固定盒子的大小，当padding增加的时候去挤压盒子内部的空间，这时候需要设定盒子的box-sizing属性。css3 box-sizing
举例来说，有如下的3个div：
normal：不设定box-sizing属性
content：设定box-sizing为content-box
border：设定box-sizing为border-box
代码如下：

<div id="normal" class="normal">normal</div>
<div id="content" class="content">content</div>
<div id="border" class="border">border</div>    
</body>
<style type="text/css">
div{
    width:100px;
    height: 100px;
    padding:20px;
    margin:20px;
    border:2px solid black;
}
.normal{
    background-color: green; 

}
.content{
    box-sizing: content-box;
    background-color: red; 
}
.border{
    box-sizing: border-box;
    background-color: blue; 

}
</style>

整体对比：

我们来分别观察它们的渲染形式和盒子模型：
normal：


content：


border:


通过对比我们不难发现，在默认情况下，box-sizing属性的值为content-box，它们都是将内容设置为css样式中的width，height，而box-sizing属性的值为border-box的时候，会将组件大小设置为css样式中的width，height，padding则会挤压内部的内容空间。但并不是设定了border-box组件的大小就不会改变了，如果内容和padding的值超出了设定的宽高，盒子还是会外扩的。