Doctype的作用！

DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本

• HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
• 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

严格模式与混杂模式

• 严格模式，又称标准模式，是指浏览器按照W3C标准来解析代码，一种严格要求的DTD，排版和JS运作模式均是以该浏览器支持的最高标准运行。

• 混杂模式，又称怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，页面以宽松的向后兼容的方式显示，就严格度上来说不如严格模式，但是模拟老式浏览器的行为可以防止站点无法工作。

区分两种模式

重点在于文档的DTD：

1. 如果文档中包含了严格的DOCTYPE，那么它一般以严格模式呈现。
2. 如果文档中包含过渡DTD和URI的DOCTYPE，也以严格模式呈现，但有过渡DTD而没有URI，会导致文档以混杂模式呈现。
3. DOCTYPE不存在或者形式不正确或有误，文档以混杂模式呈现。
4. HTML5没有DTD，因此也就没有严格模式与混杂模式的区分，HTML5相对来说语法比较宽松。

两种模式的不同表现形式

盒模型的高宽

在标准的w3c模式下，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度。而在IE5.5及以下的浏览器及其他版本的混杂模式下，这个宽度和高度还包含了padding和border

可以设置行内元素的高宽.

在严格模式下，给span等行内元素设置width和height都没有效果，但是在混杂模式下会生效

可以设置百分比高度

在严格模式下，一个元素的高度是由它包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

margin:0 auto设置水平居中在IE下会失效

用margin:0 auto在严格模式下可以使元素水平居中，但在混杂模式下却会失效，解决办法是用text-align

混杂模式下设置图片的padding会失效

混杂模式Table的自提属性不能继承上层的设置

混杂模式white-space:pre会失效