文章目錄
- 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> 可強制瀏覽器使用標準模式！ 🚀
：歸并排序)
：解碼器塊，去模糊和提升圖像清晰度)
