盒子模型是啥？？简述一下标准盒模型、怪异盒模型的区别。 - 好文

在网上查了很多关于盒子模型的资料，下面进行一个总结。。

首先，盒模型一共有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的怪异模式。

热门工具换一换