一、概述
怪異盒子模型（Quirks mode）是指瀏覽器解析 HTML 文件時，如果其文檔類型聲明不規範或者沒有聲明，瀏覽器會啟用一種怪異模式進行解析，此時網頁渲染可能會與標準模式下的渲染有較大的差異。
在怪異盒子模型下，瀏覽器會使用自己的特定算法為 DOM 元素計算寬度和高度，這種計算方式與標準盒子模型存在較大的差別，稱之為怪異盒子模型。
二、怪異盒子模型特點
1. 怪異模式下，盒子的寬度和高度會被瀏覽器計算成內容寬度和高度，不會考慮 padding 和 border 的尺寸。
/* HTML */
<div id="demo">
<p>Hello World</p>
</div>
/* CSS */
#demo {
padding: 20px;
border: 10px solid #000;
}
在怪異盒子模型下，#demo 元素的寬度為 p 元素內容的寬度，不包括 padding 和 border 的尺寸。
2. 相鄰元素之間如果沒有空格，margin 會重疊，造成布局的不穩定性。
/* HTML */
<div class="demo">原創文章，作者：NMZHL，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/334958.html
微信掃一掃 
支付寶掃一掃 