一句话理解
- 标准模式： 浏览器严格按照W3C标准渲染页面
- 混杂模式： 为了兼容老网页，浏览器用旧的，非标准的方式进行渲染。
模式的触发方式
浏览器通过页面顶部的DOCTYPE声明 来决定采用哪种模式
| DOCTYPE 声明 | 模式类型 |
|---|---|
<!DOCTYPE html> | ✅ 标准模式 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | ✅ 准标准模式（几乎标准） |
| 没有 DOCTYPE 或 写错 DOCTYPE | ⚠ 混杂模式 |
区别详解
| 方面 | 标准模式（Standards Mode） | 混杂模式（Quirks Mode） |
|---|---|---|
| 盒模型 | width 只包含 content，不包括 padding 和 border | width 包含 content + padding + border |
| CSS 解释 | 严格遵循 CSS 规范 | 忽略某些规范，存在浏览器差异 |
| 行内块对齐 | 正常的 vertical-align 行为 | 存在奇怪的对齐偏差 |
| 字体继承行为 | 标准化字体继承 | 旧浏览器行为不一致 |
| 盒模型计算 | 一致计算，适合现代布局（flex/grid） | 老 IE 风格计算 |
| 兼容性 | 推荐使用，适配现代浏览器 | 为旧代码提供兼容，可能会产生不可预期的行为 |
示例说明
标准模式下的盒模型：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
📐 元素最终宽度为 100px（内容）+ 10*2（padding）+ 1*2（border） = 122px（但显示内容宽度仍为100px）
混杂模式下（没有 DOCTYPE）
<html>
<head>
<style>
div {
width: 100px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
📐 此时浏览器会把 100px 当成总宽度，所以内容宽度会被压缩（减去 padding 和 border）
实际开发建议
-
始终使用
<!DOCTYPE html>，强制标准模式。 -
避免依赖混杂模式下的行为，尤其是旧版盒模型。
-
如果要兼容 IE8 以下浏览器，考虑使用 CSS 重置（reset.css）或现代 polyfill。
