doctype:
告诉浏览器使用什么模式去渲染页面，可能会影响页面的css渲染和js代码的执行。
DTD :为了兼容旧的浏览器渲染方式，将DTD作为参数告诉浏览器使用什么模式渲染页面。始于IE6;
1、什么是混杂模式、什么是标准模式
混杂模式是一种向后兼容的解析方式，是实现IE5.5以下版本浏览器的渲染模式。不可取，无兼容性可言。
标准模式是一种要求严格的DTD，根据web标准去解析页面的模式。
近标准模式：尽可能遵循最新标准的情况下，兼容部分非标准的代码，如弃用的标签等。
2、两种模式的区别
- 盒模型的解析：混合模式盒模型的宽高=内容的宽高；标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。
混合模式：boxWidth = contentWidth
标准模式：boxWidth = contentWidth + padding*2 + border*2
诡异模式下（Quirks模式），IE的宽度和高度包括了padding和border。
- 当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。
行内元素的高度：
标准模式下：行内元素设置宽高无效；怪异模式下：有效；
margin:0 auto；设置水平居中：
标准模式：会使元素水平居中；怪异模式：无效
text- align:center：
IE6/7及IE8混杂模式（quirks模式）中可以使块级元素也居中对齐。；其他浏览器中，text-align:center仅作用于行内内容上。
解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。
3、判断两种模式
document.compatMode=="CSS1Compat" //标准模式
else //混合模式