简介

没有声明DTD -> 浏览器根据自己向后兼容的方式解析执行代码 -> 怪异模式声明DTD ->浏览器按照W3C标准解析执行代码 -> 标准模式

// DTD声明示例(浏览器会按HTML 4.01的标准进行解析)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

区别

标准盒模型 | 奇异盒模型

类型	属性
奇异盒模型	宽高包含padding和border
标准盒模型	宽高不包含padding和border

图片垂直对齐方式

行内元素和table-cell元素，标准模式下vertical-align属性默认值是baseline；在怪异模式下，table单元格中的图片的vertical-align属性默认值是bottom，因此在图片底部会有几像素的空间；

字体属性继承

在怪异模式下，font-size不会默认继承父级

水平居中

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

颜色

怪异模式下，颜色值必须用十六进制标记法

元素溢出

标准模式下，overflow 取值默认为 visible；怪异模式下，当内容超出容器高度时，容器自适应内容。

行内元素

标准模式下，行内元素无法定义宽高怪异模式下，行内元素可以定义宽高

块级元素： div h1-h6 hr adress ul ol p table form menu blockquote
行内元素： br a strong b u sub sup select span  i img input em
可变要素： del ins (根据上下文预警决定该元素为块元素还是内联元素)

行内元素不能设置垂直方向的margin padding、不会独占一行

元素的百分比高度

当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化；在怪异迷失下，百分比被准确应用；

浏览器标准模式 | 怪异模式

简介

区别