扩展:
1.DOCTYPE的作用:首先这个声明不是HTML标签,而是一种语法格式。DOCTYPE是定义浏览器使用什么样的文本类型定义(DTD)载入页面,也就是告诉浏览器使用什么样的HTML或者XHTML规范来解析html。一般情况下出现在html文档的开头
1.文档模式的意义:
IE5.5引入了文档模式的概念,通过使用DOCTYPE实现模式切换,它的主要作用是告诉浏览器以哪种模式呈现,如何解析文档,也就是说两种模式主要影响css内容的呈现,某些情况下也会影响js的执行。
2.两种模式的定义:
1)混杂模式又称怪异模式或兼容模式,指浏览器按照自己的方式来解析代码,页面以宽松的向后兼容的解析方式,是实现IE5.5以下版本浏览器的渲染模式。就严格度上来说不如严格模式,但是模拟老式浏览器的行为可以防止站点无法工作
2)标准模式又称严格模式,是一种要求严格地DTD,排版和js运作模式根据web标准去解析页面的模式
3.两种模式的区别:
1)盒模型的解析:混合模式盒模型的宽高=内容的宽高;标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高
2)当一个块元素div中包含的内容只有图片时,在标准模式下,不管IE还是标准,在图片底部都有3像素的空白。但在混杂模式下,标准浏览器(Chrome)中div距图片底部默认没有空白。
3)设置行内元素的高度:标准模式,给span等行内元素设置width和height没有效果;混杂模式下,会生效
4)设置百分比的宽度:标准模式,一个元素的高度是由它包含的内容决定的,若父元素没有设置高度,子元素设置一个百分比的高度是无效的。
5)margin:0 auto设置水平居中在IE下会失效
标准模式下可以使元素水平居中,混杂模式下的解决办法用text-align
6)混杂模式下table的自提属性不能继承上层的设置
7)混合模式下white-space:pre会失效
4.如何判断两种模式
if(document.compatMode=="CSS1Compat" ) {
console.log('标准模式');
}else {
console.log('混杂模式');
}
5.如何触发
1)混杂模式
(1)不写<!DOCTYPE html>
(2)<!DOCTYPE html>前面加上xml声明 <?xml version="1.0" encoding="utf-8"?> (IE6)
(3)<!DOCTYPE html>和<?xml version="1.0" encoding="utf-8"?>之间加了(标签、文本、注释)(ie8以下都有,ie9以上未测)
(4)<!DOCTYPE html>前面有(标签、文本、注释)(ie8以下都有,ie9以上未测)
2)标准模式
正常建立