在网上查了很多关于盒子模型的资料，下面进行一个总结。。
首先，盒模型一共有2种模式，分别是 符合W3C标准的‘标准盒模型’ 和 在IE下的‘怪异盒模型’。
我们知道无论是哪个模型，一个盒子的 总宽度 = content(内容) + padding + border 。
在html的首部，我们经常会看到一个<!Doctype html>的声明，浏览器根据这个声明来判断这个文件是什么类型的，并根据这来判断怎么解析文件。
1.当我们写了<!Doctype html>的声明的时候，无论在哪种内核的浏览器下盒子模型都会被解析为 标准盒模型。即：
width = content
即我们单独设置的宽度只显示在内容上，比如我设置css样式 width: 100px 这个100px指的就只是content的宽度。
总宽度 = 我们设置的width + padding + border
2.但是当我们没写声明或声明丢失的时候，部分有IE内核的浏览器则会触发怪异模型(IE6,7,8)。（注1）
width = content + padding + border 即宽度为三个加一起的宽度
总宽度 = width
在CSS3中我们可以通过设置 box-sizing的属性来完成标准或者怪异模式之间的切换。
（1）box-sizing ： content-box 采用标准模式 也是默认样式
（2）box-sizing： border-box 采用怪异模式
注:1：当年微软的IE浏览器占据超过80%市场份额的时候，想自己独立制定一套浏览器标准，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就造成了现在浏览器不同的CSS盒模型，但是仍有很多老网站采用的是老IE的标准(怪异模式)，因此很多浏览器保留了IE的怪异模式。
1696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
