【2021-07-06】Doctype作用？标准模式与兼容模式各有什么区别?

[superDCH]

一、Doctype 定义

DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

二、浏览器模式

浏览器本身分为两种模式，一种是Standards（标准）模式（也就是严格呈现模式），一种是Quirks（兼容）模式（也就是松散呈现模式或者怪异模式），浏览器通过doctype来区分这两种模式，doctype在html中的作用就是触发浏览器的标准模式，如果html中省略了doctype，浏览器就会进入到Quirks模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而html标准和dom标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以最好要在html开头使用doctype。

三、 浏览器模式的具体区别

1.盒模型

在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;

在兼容模式中 ：width则是=width+padding+border

2.兼容模式下可设置百分比的高度和行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left}

4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效