回过头来聊聊盒模型的问题

分为标准盒模型 和 IE 盒模型

1. W3C 标准盒模型： content-box

属性width，height只含内容content，不包含border和padding。

2. IE 盒模型: border-box

属性width，height 包含border 和 padding，指的是content + padding + border

在IE8+ 浏览器中使用哪个盒模型可以由box-sizing(css 新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing 设为border-box 则用的是IE 盒模型。如果 在ie6、7、8中DOCTYPE 缺失会触发IE 模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。

content-box( 标准盒模型 )

width = 内容的宽度

height = 内容的高度

border-box （ IE盒模型 ）

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

直接上几个图吧，(多图预警)

总结，俩者皆不包括 margin ， 但是border border-box 包括，而 content-box 不包括。