前言

对于DOCTYPE这个词，相信大家都不陌生，现在我们编写html文件的时候，头部第一句就是这个声明，但是相信很多人都不知道这个是干什么用的吧，看完这篇文章让自己更精进一步！

来源

在很久很久以前,那时候HTML和CSS还没有一个统一的标准,出现的现象就是,我用我的标准,你用你的标准,这导致了各家浏览器对于解析HTML和CSS的方式有很大的差别。

而当标准制定出来之后,浏览器不仅要按照新的标准去支持HTML和CSS,还要对老旧的网页进行兼容,而这一前一后的两种支持方式,就是我们所称的标准模式(StandardMode,)和怪异模式(QuirksMode)。

对于现代规范的网页,浏览器一般用标准模式去解析和渲染,而对于古老的网页,浏览器就会使用怪异模式去渲染.而在ie的开发者工具中,你可以自定义改变文档模式,这在其他浏览器中是不行的.

什么是怪异模式与标准模式

浏览器一般都有两种解析渲染模式：标准模式和怪异模式。

在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；

而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。

浏览器解析渲染时采取什么模式是由什么决定呢？答案是DOCTYPE声明

完整的html结构：

<html><head><meta charset="utf-8" /><title></title></head><body></body>
</html>

上面就是一个完整的html结构，但我们会发现，用vscode自动生成HTML结构的时候，开头总是加上一个<!DOCTYPE html>标签呢？

使用工具开发html的时候自动生成的都是标准模式。这两种模式就是是通过DOCTYPE 的定义来区分。如果html中省略了doctype，浏览器会进入到Quirks模式的怪异状态也称之为怪异模式，在这种模式下有些样式，布局会和标准模式存在差异

DOCTYPE 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前。HTML5不基于SGML，所以不需要引用DTD。

标准模式与怪异模式的区别

标准模式盒模型为W3C标准盒模型，怪异模式使用IE盒模型

盒模型：

IE下标准模式为：content+padding+border+margin。

怪异模式下为：content+margin(padding,border包含在content宽高中)

font属性继承

CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

行内元素的尺寸

在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。

行内元素和table-cell元素vertical-align属性

对于inline内联元素和table-cell元素，标准模式下vertical-align默认为baseline（基线对齐），在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom

内部元素溢出处理

在标准模式下,溢出的部分会超出盒子本身,在盒子外部继续显示；而在怪异模式下,溢出的部分会扩展盒子本身,即外部盒子的大小不一定由css样式决定,会根据内部内容的大小自动调整.

margin:0 auto,在标准模式下会水平居中，怪异模式下不会。

CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。当一个元素使用百分比高度时，标准模式下，高度取决于自身内容变化（若无内容，元素百分比高度或宽度为0），怪异模式下，百分比高度被正确应用（即父元素高度或宽度auto的情况下，依据父元素计算百分比）。

聊聊浏览器的标准模式和怪异模式相关推荐

浏览器标准模式与怪异模式的区别
两种模式的不同主要表现在盒模型和渲染模式的不同上要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode) 所谓的标准模式是 ...
浏览器标准模式和怪异模式
什么是标准模式和怪异模式? 在实现html和css标准化之前,各个浏览器对html和css的解析各有不同,甚至是同一个浏览器的不同版本渲染方式也不同(比如IE6和IE7).在W3C制定标准之后,浏览器 ...
浏览器标准模式和怪异模式之间的区别
浏览器标准模式和怪异模式之间的区别是什么? 在"标准模式"(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在"怪异模式"(Qui ...
浏览器的标准模式、怪异模式
历史原因在W3C标准未确定之前,各浏览器对于HTML和CSS有各自不同的解析方式,很多旧网页都是在W3C标准未确定时期实现.设计的.在W3C标准确定之后,浏览器为了保证对非标准的旧网页设计的后向兼容 ...
浅谈浏览器标准模式与怪异模式、文档类型
在网页设计制作过程中,新人往往会遇到一个问题,就是浏览器的不兼容问题.这种状况在大学学习过程中会经常遇到,但一直也没有得到很好的解决,今天有机会仔细研究了一下,这是有关浏览器标准模式与怪异模式之间的问 ...
浏览器标准模式与怪异模式-CSS1Compat and BackCompat
浏览器标准模式与怪异模式-CSS1Compat and BackCompat 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前, ...
浏览器的标准模式与怪异模式
由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为 ...
“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）
在标准模式页面按照HTML,CSS的定义渲染,而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式.浏览器基于页面中文件类型描述的存在以决定采用哪 ...
HTML的标准模式与怪异模式
HTML的标准模式与怪异模式 HTML 的结构在HTML4中 DOCTYPE有三种模式标准模式与怪异模式 HTML 的结构 <html><head><meta cha ...

聊聊浏览器的标准模式和怪异模式

前言

来源

什么是怪异模式与标准模式

标准模式与怪异模式的区别

聊聊浏览器的标准模式和怪异模式相关推荐

最新文章

热门文章