对盒模型的理解

盒模型分为两种，一种是IE盒模型，一种是W3C盒模型。

IE盒模型用于IE6一下版本的浏览器，它的content的宽度是包括了padding和border的

W3C盒模型：content的宽度不包括padding和border

此外两种盒模型都包括margin（外边距），在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景（padding所带的是本身的背景而非父

元素）。margin经常取负值实现定位的作用。

外边距有一个合并问题，经常使人们混淆，简单来说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度

中的较大者。

外边距虽然不可见，但它在文档中占据一定的空间，我们需要区分：盒子所占空间大小（计及margin）和盒子实际大小（不计margin）

 

使用CSS3的box-sizing属性选择不同的盒模型

 

box-sizing:content-box        W3C盒模型（默认），盒子大小为content+padding+border

box-sizing:border-box          IE盒模型，盒子大小为content，当保持content不变，只改变padding和border的大小时，盒子的实际大小不会变化

 

参考文章：

谈谈我对盒模型的理解 - 简书 (jianshu.com)