如何理解盒模型

盒模型有两种，W3C 和 IE 盒子模型

1、W3C定义的盒模型包括 margin、border、padding、content ，元素的宽度 width = content 的宽度；

2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的 width = border+padding+content；

对盒模型的理解

IE定义的盒模型较为合理，所以在css3中新增了 box-sizing ，包含两个属性 content-box 和 border-box ；

1）content-box 元素的 width = content；

2）border-box 元素的 width = border + padding + content；

更多理解

对于行内元素 margin-top/margin-bottom 对于上下元素无效，margin-left/margin-righ有效；

对于相邻的块级元素 margin-top 和 margin-bottom 两者叠加按照一定的规则；

1）都是整数 margin 值取两者的最大值；

2）都是负数 margin 值取最小值；

3）两者正负相反，margin 值取两者之和；