本文主要对标准（W3C）盒子模型和 IE 盒子模型之间的异同做详细介绍，并说明如何通过 CSS 的 box-sizing属性去控制两种盒子模型之间的切换。
盒子模型的其他内容这里就不做叙述了，重点讲解 W3C 盒子模型与 IE 盒子模型的差异与转换，不想看具体内容的可直接跳到总结部分。
盒子模型图示
我们直接通过两张图来做一下比较。
标准盒子模型
IE 盒子模型
差异
很容易看到，两者的差异体现在盒子的width和height属性的计算方式。
- 标准盒子模型：
width = content 的宽度
即：在 CSS 中设置的width属性，就是 content 的宽度，height同理。 - IE 盒子模型：
width = border-left + padding-left + content 的宽度 + padding-right + border-right
即：在 CSS 中设置的width属性，为 content 的宽度加上两侧border和padding的宽度，height同理。
两种盒子模型的转换
对于标准盒子模型和 IE 盒子模型，CSS 中提供了 box-sizing 属性，可以方便地进行切换。
其实 IE 盒子模型的设计更符合常理。并且在某些情况下更方便好用（如：你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时）。
box-sizing 属性
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持 CSS 盒子模型规范的浏览器的行为。
对于标准盒子模型，在 CSS 中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。
这个时候可以用 box-sizing 属性可以被用来调整这些表现：
content-box：默认值，对应标准盒子模型border-box：对应 IE 盒子模型
看下面的图示：
总结
简单总结一下，本文只有两个重要知识点：
- 标准盒子模型与 IE 盒子模型计算
width和height的方式不同。
CSS 中设置的盒子width（height同理）：- 对于标准盒子模型，就是内容的宽度
- 对于 IE 盒子模型，是内容的宽度加上两侧
border和padding的宽度
- 可以使用 CSS 的
box-sizing属性进行盒子模型的切换：content-box对应标准盒子模型，也是默认值border-box对应 IE 盒子模型