一开始我以为是浏览器的极速模式和兼容模式。

后来查了下是浏览器渲染模式，最大区别还是盒模型的解释吧
标准盒模型：元素实际宽度=margin2+border2+padding2+width
怪异盒模型：元素内容宽度=width-margin2-border2-padding2

后面的同学继续解释下

怪异盒模型：元素内容宽度=width-margin2-border2-padding2?

其实我建议这样说
标准盒模型：元素内容宽度=width，元素实际宽度=margin2+border2+padding2+width
怪异盒模型：元素内容宽度=width-border2-padding2，元素实际宽度=margin2+border2+padding2+width=margin2+width

http://jsrun.net/mhyKp/edit

楼上说的好。

Standards 严格按照 w3c 统一标准， 怪异模式，兼容不同浏览器的规范

楼上公式其实没必要，其实很简单，标准模式宽度就是内容本身，而怪异模式是内容加上padding加上border，但是不加margin

可以看到很多网站都使用 * { box-sizing: border-box; } 这个样式，因为浏览器默认是标准模式，也就是 content-box , 而大家其实更习惯使用怪异模式

怪异模式是IE的默认盒模型，我觉得这是IE浏览器唯一让我肯定的地方。盒子的大小就是你给定的样式的大小，不用自己计算padding和border造成的向外渲染的差值，布局很方便很稳定。

总结一下前面老哥们的回答。毕竟提还是要自己答的。

怪异模式和标准模式最早是为了对旧版本网页进行兼容而设计的，可以通过 <!DOCTYPE> 来进行区分。

两者最主要的区别就是在盒子模型上，元素的宽度。
在标准模式下，元素的宽度只是指 width，如果添加了 padding 和 border 元素实际的宽度需要加上 padding 和 borders。
在怪异模式下，元素的 width 是包含了 padding 和 border。

通过 CSS 的 {box-sizing: border-box;} 来对盒模型进行设置。

虽然标准模式可以算是标准，但实际使用过程中怪异模式反而更符合人的直觉（个人认为）,这样可以减少对 padding 和 border 的额外计算。

想问问大家，html5没有dtd，我知道是它不基于sgml，html4浏览器有自己的方式解释同一个html,导致诸多差异。那么这种差异和混合模式有什么关系。html5难道各个浏览器也有差异吧？为啥它不需要兼容各种模式呢

怪异盒模型在移动端表现良好，标椎下百分比不好计算，用了box-sizing:border-box;可以让你在百分比布局下不打乱布局

标准盒模型：元素内容宽度=width
怪异盒模型：元素内容宽度=width-border2-padding2

standards模式和quirks模式主要是以HTML是否加!DOCTYPE
quirks主要是为了兼容各个浏览器，远古时期遗留下来的BUG（或者说是当时的标准，对于现在来说的BUG），它并未遵循W3C的标准

主要的区别在盒模型上：
standards盒模型：width = content
quirks盒模型：width = content + border + padding

可以通过box-sizing: border-box、content-box来切换

楼上公式其实没必要，其实很简单，标准模式宽度就是内容本身，而怪异模式是内容加上padding加上border，但是不加margin

可以看到很多网站都使用 * { box-sizing: border-box; } 这个样式，因为浏览器默认是标准模式，也就是 content-box , 而大家其实更习惯使用怪异模式

怪异盒模型在移动端表现良好，标椎下百分比不好计算，用了box-sizing:border-box;可以让你在百分比布局下不打乱布局

老觉得怪怪的，昨天终于找到quirk mode 和standard mode的区别了，这个还真不能简单的描述成盒模型的怪异行为，应该说是在推进web标准化的进程中，为了兼容之前已经存在的渲染行为，产生了三种模式， quirk（没有doctype定义的，主要是兼容IE5以及当时的网景）， almost standard （大致可以理解成有doctype定义的，但是和标准有些差异，也就是说也有一部分quirky的行为） 和 standard（doctype html）， 具体参考

https://developer.mozilla.org/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode,
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

简单来讲，应该就可以理解成向前兼容

标准盒模型：width + margin2 + padding2 + border2
怪异盒模型: width + margin2

在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现
MDN 答案