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浏览器的溢出元素会自适应内容的尺寸。
 
原文地址:https://www.cnblogs.com/dongdongseven/p/7123674.html