<!DOCTYPE html>
它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html>标签之前。此标签可告知浏览器文档使用哪种HTML或 XHTML规范。
这个标签可声明三种 DTD类型（Document Type Definition，中文意思为“文档类型定义”。分别表示严格版本、过渡版本以及基于框架的 HTML 文档。public这行声明了文档的根元素是 html，它在公共标识符被定义为-//W3C//DTD XHTML 1.0 Strict//EN的 DTD中进行了定义。浏览器将明白如何寻找匹配此公共标识符的DTD。如果找不到，浏览器将使用公共标识符后面的URL 作为寻找DTD的位置。
<!DOCTYPE html>的重要性
声明文档的解析类型document.compatMode，避免浏览器的怪异模式。
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。盒模型为
IE 盒模型。 - CSS1Compat：标准模式，浏览器使用
W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有
DOCTYPE的声明，那么compatMode默认就是BackCompat。
盒模型
盒模型，顾名思义，就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的 内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度，就是盒模型的边框（border）；盒子外与其他盒子之间的间隔，就是盒子的外边距（margin）。
元素的
外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。
盒模型
IE盒模型和W3C盒模型
CSS盒模型分为IE盒模型和W3C盒模型。其实，IE盒模型是怪异模式（Quirks Mode）下的盒模型，而W3C盒模型是标准模式（Standards Mode）下的盒模型。
IE6及其更高的版本，还有现在所有标准的浏览器都遵循的是W3C盒模型，IE6以下版本的浏览器遵循的是IE盒模型。
IE盒模型
W3C盒模型
从上图直观的可以看出，IE盒模型的宽度或者高度计算方式为：width/height = content + padding + border，W3C盒模型的宽度或者高度计算方式为：width/height = content。
设置盒模型
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
CSS3新增了一个属性box-sizing: content-box | border-box | inherit，默认值为content-box。如果值为content-box，那元素遵循的是W3C盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从父元素继承。
兼容性
浏览器选择哪个盒模型，主要看浏览器处于标准模式（Standards Mode）还是怪异模式（Quirks Mode）。我们都记得<!DOCTYPE>声明吧，这是告诉浏览器选择哪个版本的HTML，<!DOCTYPE>后面一般有DTD的声明，如果有DTD的声明，浏览器就是处于标准模式；如果没有DTD声明或者HTML4以下的DTD声明，那浏览器按照自己的方式解析代码，处于怪异模式。
处于标准模式的浏览器（IE浏览器版本必须是6或者6以上），会选择W3C盒模型解析代码；处于怪异模式的浏览器，则会按照自己的方式去解析代码，IE6以下则会是选择IE盒模型，其他现代的浏览器都是采用W3C盒模型。
网友评论