Doctype的作用以及严格模式和混杂模式的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Doctype的作用以及严格模式和混杂模式的区别相关的知识，希望对你有一定的参考价值。
<!DOCTYPE>声明位于位于html文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。HTML5 为什么只需要写 <!DOCTYPE HTML>？HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
严格模式和混杂模式区别它们有什么意义？
1、盒模型的解析，这应该是众所周知的问题了。混杂模式下会按照IE5.5的盒模型解析。而标准模式是按标准的盒模型解析。
2、当一个块元素div或一个单元格中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，
标准浏览器（Chrome）中div距图片底部默认没有空白。
（标准模式下的底部3像素空白，与img vertial-align的默认值baseline有关，其实大多数时候我们并不希望它保留空白，去除的方法也很简单，
设置vertial-align为一个不是baseline的合法值即可。）
3、在混杂模式下，表格中的字体不会继承它祖先元素（比如body，比如包含table的div）的字体样式。
4、在IE的混杂模式下，给inline元素设置高宽都有效。
5、在混杂模式下，IE和其他浏览器对百分比宽度的解析是不一样的。如果父级是行内块或者浮动或者有定位的元素，给子元素设置百分比宽度100%时，
IE的混杂会以父级的100%算（父级没有设置宽度，则再往上一层找），而标准浏览器是取决于内容的宽度。
6、在混杂模式下，当我们给一个元素设百分比高度，其他浏览器（正常，inline高度无变化，inline-block和block都会按百分比），
而IE是自适应到内容高度。
7、overflow溢出默认值的问题。标准模式下，溢出元素是溢出可见的，超出部分的内容呈现在它的包含元素外。在混杂模式下，
IE浏览器的溢出元素会自适应内容的尺寸。
以上是关于Doctype的作用以及严格模式和混杂模式的区别的主要内容，如果未能解决你的问题，请参考以下文章
Doctype作用？严格模式与混杂模式如何区分？它们有何意义
Doctype作用？严格模式与混杂模式如何区分？它们有何差异？
Doctype作用？严格模式与混杂模式如何区分？它们有何意义？