css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别

[css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别](#css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别)
- - 详细对比
  - 示例对比（盒模型）
  - - [标准模式（Standards Mode）](#标准模式（Standards Mode）)
    - [怪异模式（Quirks Mode）](#怪异模式（Quirks Mode）)
  - 如何触发两种模式？
  - 其他区别
  - 为什么需要了解这个区别？

最核心的区别 ：
盒模型（Box Model）的计算方式不同 ，导致元素的 width 和 height 是否包含 padding 和 border。

特性	标准模式（Standards Mode）	怪异模式（Quirks Mode）
盒模型	`width` = 内容宽度（不包含 `padding` 和 `border`）	`width` = 内容 + `padding` + `border`
触发方式	`<!DOCTYPE html>` 声明	无 `DOCTYPE` 或使用旧版 `DOCTYPE`（如 HTML4 Transitional）
浏览器兼容性	所有现代浏览器统一行为	模拟旧版浏览器（如 IE5.5）的渲染方式
`height: 100%` 行为	严格计算，需父元素有明确高度	可能不准确，导致布局错乱
`margin: auto` 居中	正常生效	可能失效

css 复制代码

.box {
  width: 100px;
  padding: 20px;
  border: 5px solid black;
}

css 复制代码

.box {
  width: 100px;
  padding: 20px;
  border: 5px solid black;
}

标准模式 ：使用 <!DOCTYPE html>（HTML5 声明）。
怪异模式 ：省略 DOCTYPE 或使用旧版 DOCTYPE（如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）。

行内元素垂直对齐
- 标准模式：vertical-align 按规范生效。
- 怪异模式：行为可能不一致（如 img 底部默认间隙问题）。
表格单元格宽度
- 标准模式：严格按内容计算。
- 怪异模式：可能自动拉伸。
JavaScript 获取窗口尺寸
- 标准模式：document.documentElement.clientWidth。
- 怪异模式：document.body.clientWidth。

总结：盒模型的计算方式是两者最明显的区别，始终使用 <!DOCTYPE html> 可强制浏览器使用标准模式！ 🚀