什么是文档模式

74 阅读 0 评论 49 点赞

我是靠谱客的博主清新蜜蜂，最近开发中收集的这篇文章主要介绍什么是文档模式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么是文档模式

IE5.5引入了文档模式的概念，通过使用DOCTYPE实现模式切换，它的主要作用是告诉浏览器以哪种模式呈现，如何解析文档，也就是说两种模式主要影响CSS内容的呈现，某些情况下也会影响JavaScript的执行。

文档模式的类型

混杂模式：向后兼容的解析方式

标准模式：要求严格的DTD，根据web标准去解析页面的模式。

准标准模式：准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。

两种模式的区别

盒模型的解析：
混杂模式盒模型的宽高=内容的宽高；
标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。

图片的布局：
当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

两种模式开启方式

混杂模式
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。

标准模式
对于标准模式，可以通过使用下面任何一种文档类型来开启：

<!-- HTML 4.01 严格型 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
 
<!-- XHTML 1.0 严格型 --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<!-- HTML 5 --> 
<!DOCTYPE html>

准标准模式
而对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，如下所示：

<!-- HTML 4.01 过渡型 --> 
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd"> 
 
<!-- HTML 4.01 框架集型 --> 
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Frameset//EN" 
 "http://www.w3.org/TR/html4/frameset.dtd"> 
 
<!-- XHTML 1.0 过渡型 -->
 <!DOCTYPE html PUBLIC 
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<!-- XHTML 1.0 框架集型 --> 
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">