categories: [前端,HTML、浏览器综合]
thumbnail: /images/fe/llq.jpg
toc: true
Doctype的作用!
DOCTYPE 是一个文档类型标记,是一种标准通用标记语言的文档类型声明,在 web 设计中用来说明你用的 XHTML 或者 HTML 是什么版本
- HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为
- 而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型
严格模式与混杂模式
-
严格模式,又称标准模式,是指浏览器按照W3C标准来解析代码,一种严格要求的DTD,排版和JS运作模式均是以该浏览器支持的最高标准运行。
-
混杂模式,又称怪异模式或者兼容模式,是指浏览器按照自己的方式来解析代码,页面以宽松的向后兼容的方式显示,就严格度上来说不如严格模式,但是模拟老式浏览器的行为可以防止站点无法工作。
区分两种模式
重点在于文档的DTD:
- 如果文档中包含了严格的DOCTYPE,那么它一般以严格模式呈现。
- 如果文档中包含过渡DTD和URI的DOCTYPE,也以严格模式呈现,但有过渡DTD而没有URI,会导致文档以混杂模式呈现。
- DOCTYPE不存在或者形式不正确或有误,文档以混杂模式呈现。
- HTML5没有DTD,因此也就没有严格模式与混杂模式的区分,HTML5相对来说语法比较宽松。
两种模式的不同表现形式
盒模型的高宽
在标准的w3c模式下,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度。而在IE5.5及以下的浏览器及其他版本的混杂模式下,这个宽度和高度还包含了padding和border
可以设置行内元素的高宽.
在严格模式下,给span等行内元素设置width和height都没有效果,但是在混杂模式下会生效
可以设置百分比高度
在严格模式下,一个元素的高度是由它包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
margin:0 auto设置水平居中在IE下会失效
用margin:0 auto在严格模式下可以使元素水平居中,但在混杂模式下却会失效,解决办法是用text-align