浏览器标准模式和怪异模式

DOCTYPE是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面有两种模式：
标准模式（Standards mode）
在标准模式中，浏览器以其支持的最高标准呈现页面。
怪异模式（Quirks mode）
在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
省略DOCTYPE会进入怪异模式

标准模式和怪异模式的区别

在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；
而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。

 盒模型：
  IE下标准模式为：content+padding+border+margin。 
  怪异模式下为：content+margin(padding,border包含在content宽高中)​​​​​​​

• font属性继承

  CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

• 行内元素尺寸

  在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。

• 行内元素和table-cell元素vertical-align属性

  对于inline内联元素和table-cell元素，标准模式下vertical-align默认为baseline（基线对齐），在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom

• 内部元素溢出

  在标准模式下,溢出的部分会超出盒子本身,在盒子外部继续显示；而在怪异模式下,溢出的部分会扩展盒子本身,即外部盒子的大小不一定由css样式决定,会根据内部内容的大小自动调整.

    margin:0 auto,在标准模式下会水平居中，怪异模式下不会。

CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。当一个元素使用百分比高度时，标准模式下，高度取决于自身内容变化（若无内容，元素百分比高度或宽度为0），怪异模式下，百分比高度被正确应用（即父元素高度或宽度auto的情况下，依据父元素计算百分比）。