浏览器标准模式和怪异模式的区别

一.标准模式和怪异模式

标准模式就是浏览器按照HTML与CSS的标准对文档进行解析和渲染。
怪异模式就是浏览器按照旧有的、非标准的实现方式对文档进行解析和渲染。
如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。

二.区别
1.盒模型
  在怪异模式下，浏览器的盒模型为IE盒模型；而在标准模式下。浏览器的盒模型则为标准盒模型。二者的区别在于对元素宽高的计算不一样。
IE盒模型

IE盒模型.jpg

  在IE盒模型下，width和height除了conten(内容区域)的宽高外还包含了padding和border值。
  因此盒子宽度 = width + margin(左右)；(width = content + padding(左右) + border(左右))；
    盒子高度 = height + margin(上下)；(height= content + padding(上下) + border(上下))；

标准盒模型

标准盒模型.jpg

  在标准盒模型下，width和height就是content(内容区域)的宽高；
  因此盒子宽度 = width + margin(左右)+ padding(左右) + border(左右)；
    盒子高度 = height + margin(上下)+ padding(上下) + border(上下))；

2.图片的垂直对齐方式
  对于inline和table-cell的元素来说，
    标准模式下vertical-align属性的默认值为baseline；
    怪异模式下vertical-align属性的默认值为bottom。

3.元素的溢出处理
  标准模式下overflow的默认值为visible；
  怪异模式下元素溢出的内容不会被裁减，元素的大小由其内容决定，自动调整。

4.内联元素的尺寸
  标准模式下inline元素是无法自定义设置宽高的，而在怪异模式下width和height是可以影响其大小的。

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

6.元素的百分比宽度
  CSS中对于元素的百分比高度规定：百分比为元素包含块的高度，不可为负值；如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须是在元素有高度声明的情况下使用。
当一个元素使用百分比高度是，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被准确应用