渲染模式 - 标准模式(standards mode) 和 兼容模式(quriks mode)

标准模式与怪异模式产生原因

在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)。

渲染模式

浏览器会通过识别DTD（document type definition 文档类型定义）而采用相对应的渲染模式

浏览器解析HTML方式

1. 兼容模式（混杂模式、怪异模式）：quriks mode
2. 标准模式（严格模式）：standards mode
3. 近乎标准模式（部分怪异模式）：almost standards mode

盒模型下的区别

盒模型主要由：margin（外边距），border（边框），padding（内边距），content（内容）组成

1. 标准模式：box-sizing:content-box;
   标准模式盒子宽度会被设置的padding撑开，所设置的width为内容宽度（content）
   标准模式盒子总宽度/高度：内容区宽度 /高度+padding+border + margin。
2. 怪异模式：box-sizing:border-box;
   怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。
   怪异模式盒子总宽度/高度： width/height + margin

判断浏览器模式

js方法
   alert(document.compatMode)
   //BackCompat  怪异模式
   //CSS1Compat  标准模式

jquery方法
  alert($.boxModel)
  alert($.support.boxModel)