categories: [前端,HTML、浏览器综合]
thumbnail: /images/fe/llq.jpg
toc: true
Doctype的作用！
DOCTYPE 是一个文档类型标记，是一种标准通用标记语言的文档类型声明，在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本
- HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
- 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
严格模式与混杂模式
-
严格模式，又称标准模式，是指浏览器按照W3C标准来解析代码，一种严格要求的DTD，排版和JS运作模式均是以该浏览器支持的最高标准运行。
-
混杂模式，又称怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，页面以宽松的向后兼容的方式显示，就严格度上来说不如严格模式，但是模拟老式浏览器的行为可以防止站点无法工作。
区分两种模式
重点在于文档的DTD：
- 如果文档中包含了严格的DOCTYPE，那么它一般以严格模式呈现。
- 如果文档中包含过渡DTD和URI的DOCTYPE，也以严格模式呈现，但有过渡DTD而没有URI，会导致文档以混杂模式呈现。
- DOCTYPE不存在或者形式不正确或有误，文档以混杂模式呈现。
- HTML5没有DTD，因此也就没有严格模式与混杂模式的区分，HTML5相对来说语法比较宽松。
两种模式的不同表现形式
盒模型的高宽
在标准的w3c模式下，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度。而在IE5.5及以下的浏览器及其他版本的混杂模式下，这个宽度和高度还包含了padding和border
可以设置行内元素的高宽.
在严格模式下，给span等行内元素设置width和height都没有效果，但是在混杂模式下会生效
可以设置百分比高度
在严格模式下，一个元素的高度是由它包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
margin:0 auto设置水平居中在IE下会失效
用margin:0 auto在严格模式下可以使元素水平居中，但在混杂模式下却会失效，解决办法是用text-align