css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别
文章目录
- css怪异模式（Quirks Mode）和标准模式（Standards Mode）最明显的区别
- 详细对比
- 示例对比（盒模型）
- 标准模式（Standards Mode）
- 怪异模式（Quirks Mode）
- 如何触发两种模式？
- 其他区别
- 为什么需要了解这个区别？
css怪异模式（Quirks Mode）和标准模式（Standards 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 居中 | 正常生效 | 可能失效 |
示例对比（盒模型）
标准模式（Standards Mode）
.box {width: 100px;padding: 20px;border: 5px solid black;
}
- 实际宽度 =
100px（仅内容） - 总占用宽度 =
100px + 40px (padding) + 10px (border) = 150px
怪异模式（Quirks Mode）
.box {width: 100px;padding: 20px;border: 5px solid black;
}
- 实际宽度 =
100px（包含padding和border） - 内容宽度 =
100px - 40px (padding) - 10px (border) = 50px
如何触发两种模式？
- 标准模式：使用
<!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正确声明，避免意外进入怪异模式。 - 兼容旧代码：维护老项目时可能需要处理怪异模式下的样式问题。
- 面试常考点：前端基础核心知识之一。
总结：盒模型的计算方式是两者最明显的区别，始终使用 <!DOCTYPE html> 可强制浏览器使用标准模式！ 🚀