DOCTYPE声明、显示模式（标准模式、怪异模式）、盒子模型

DTD文档模型及显示模式（标准模式、怪异模式）

DTD（Document Type Defination）文档模型由DOCTYPE声明称为文件类型定义，浏览器会通过识别DTD采用相对应的渲染模式（标准模式、怪异模式），声明HTML版本，让浏览器解析器知道应该用哪个规范来解析文档。

标准模式和混杂模式

• 标准模式（又称严格模式，Standards模式）：是指浏览器按照 W3C 标准解析代码，呈现页面。
• 混杂模式（又称怪异模式或兼容模式Quirk模式）：是指浏览器用自己的方式解析代码，即使用一种比较宽松的向后兼容的方式来显示页面。

浏览器究竟是使用严格模式还是混杂模式呈现页面与网页中的 DTD （文件类型定义）直接相关。

不同html版本采用不同的渲染模式

HTML5只有一种DTD模型：
HTML4有三种DTD模型：严格、过渡（最多）、框架
过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本

• 对于 HTML 4.01 文档
  
  • 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
  • 包含过渡 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
  • 有过渡 DTD 而没有 URI 会导致页面以混杂模式呈现。
  • DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
• 对于HTML5文档
  
  • HTML5 没有 DTD ，（ HTML5 没有标准和怪异之）

判定是标准模式还是怪异模式：

• 方法一：执行以下代码

alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式

• 方法二：jquery为我们提如下：

alert($.boxModel)
alert($.support.exModel)

标准模式和混杂模式下的区别

1. 盒模型的区别
2. 可以设置行内元素的高宽
   在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
3. 可设置百分比的高度
   在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4. 用margin:0 auto设置水平居中在IE下会失效
   使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
   body{text-align:center};#content{text-align:left}
5. quirk模式下设置图片的padding会失效
6. quirk模式下Table中的字体属性不能继承上层的设置
7. quirk模式下white-space:pre会失效

盒子模型

• 盒子模型分为 标准盒模型（W3C标准模型）、怪异盒模型（IE盒模型）

标准模式和怪异模式下的盒子模型

• 标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)（width是content的宽度）
• 怪异模式下，一个块的总宽度= width + margin(左右)**（即width已经包含了content、border、padding）

box-sizing

box-sizing ： content-box || border-box || inherit;

• 当设置为box-sizing:content-box时，将采用标准模式（默认模式）；
• 当设置为box-sizing:border-box时，将采用怪异模式；