盒子模型（W3C IE）

盒子模型

border-sizing的属性值

box-sizing:content-box;
box-sizing:border-box;
box-sizing:inherit;

W3C盒模型
兼容性：大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度。
css样式： box-sizing:content-box;（主流浏览器默认此样式）
盒子的宽高=盒子内容的宽高+边框+内边距
设置padding和border会撑开盒子，使盒子比原本的宽高更大。
由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

IE盒模型
兼容性：ie6以下
css样式：box-sizing:border-box;
盒子的宽高=盒子内容的宽高+边框+内边距
包含了padding和border，设置两者不会撑开盒子，盒子大小不会改变。
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

box-sizing:inherit;（规定应从父元素继承 box-sizing 属性的值。）

总结：
主流浏览器默认采用W3C模型，如果要使用ie盒模型则需在该盒子样式添加（box-sizing:border-box;）
ie6以下的浏览器默认采用ie模型，由于浏览器兼容性无法改变盒子模型（即不支持box-sizing属性）
相同点：盒子的宽高=盒子内容的宽高+边框+内边距
不同点：ie盒模型的width/height指的是盒子宽高。
W3C盒模型的width/height指的是盒子内容宽高。