一、什么是标准模式和怪异模式
在实现html和css标准化之前，各个浏览器对html和css的解析各有不同，甚至是同一个浏览器的不同版本渲染方式也不同（比如IE6和IE7）。在W3C制定标准之后，浏览器既要按照标准去实现HTML和CSS的支持，又要保证能够兼容以前的非标准的旧网页，于是就有了现在所说的标准模式（严格模式）和兼容模式（怪异模式）。
二、浏览器如何确定渲染模式呢
在编写HTML文档时，一般都会在文档的开头，html标签之前声明文档类型：DOCTYPE，当浏览器在解析html文档时，若遇到正确的文档声明，则启用标准模式，按照标准来解析和渲染文档。而对于旧的html文档，或没有DOCTYPE声明的文档，则按照怪异模式来解析文档。html5的文档声明方式：<!DOCTYPE HTML> 。
三、标准模式和怪异模式的区别？
1、width不同，在标准模式中：width是内容（content）宽度，元素真正的宽度是外边距、内边距、边框宽度的和，即元素宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right，在怪异模式中：width则是元素的实际宽度，width = border-left-width + padding-left+ 内容(content)宽度 + padding-right + border-right-width。
2、内联元素的尺寸标准模式中，给span等行内元素设置width和height都不会生效，而在怪异模式下，却会生效。
3、可设置百分比的高度在标准模式下，一个元素的高度由其包含的内容content决定，如果父元素没有设置高度，子元素设置一个百分比高度是无效的。
4、用margin : 0 auto设置水平居中在标准模式下可以使元素水平居中，但是在怪异模式下，无效，可以用text-align : center;来实现居中。
5、怪异模式下设置图片的padding会失效
6、怪异模式下table中的字体属性不能继承上层的设置
7、元素溢出的处理，标准模式下，overflow默认去visible，在怪异模式下，溢出会被当做扩展box来对待，溢出不会裁减，元素框自动调整大小，能够包含溢出内容。