盒模型理解

参考： 盒模型理解

前端的盒模型包括两种，分别是W3C盒模型和IE盒模型。

W3C盒模型包括content、padding、border、margin。其中width = content

IE盒模型包括content、padding、border、margin。其中width=content+padding+border

后来W3C在CSS3中新增了box-sizing的样式，属性包含content-box和border-box；content-box就是默认的样式，border-box是width包含了content+padding+boder。

（1） content-box  元素的width=content+padding+border

[css] view plain copy

1. .test1{  
2.     box-sizing:content-box;  
3.     width:200px;  
4.     padding:10px;  
5.     border:15px solid #eee;  
6. }  

（2） border-box   元素的width=width（用样式指定的宽度）

[css] view plain copy

1. .test1{  
2.     box-sizing:border-box;  
3.     width:200px;  
4.     padding:10px;  
5.     border:15px solid #eee;  
6. }  

其他知识点：

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式

 1） 都是正数： 取最大值

   距离=Math.max(margin-botton,margin-top)

 2） 都是负数： 取最小值

   距离=Math.min(margin-botton,margin-top)

 3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加

   距离=margin-botton+margin-top