CSS怪異性模型（quirks mode）是一種特殊渲染模式，在這種模式下，瀏覽器不會按照標準的HTML和CSS規范渲染網頁，而是按照舊的渲染方式來渲染頁面。這種模式主要出現在老式瀏覽器或者網頁代碼中存在錯誤的情況下。
在CSS怪異性模型下，一些難以預料的渲染結果可能會出現。例如，一些元素會出現行為異常，頁面布局可能出現錯亂，甚至會出現文字疊加的情況。
.box {
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 30px;
}上述代碼中的盒子（box）使用了padding屬性，預期它的寬度應該是160px。但在CSS怪異性模型下，由于padding值不再被計算在盒子的寬度之內，實際上盒子的寬度是保持在100px的情況下，內部會顯示出30px的空白區域。這種現象被稱作盒模型的怪異性。
為了避免CSS怪異性模型，我們應該盡可能遵循HTML和CSS的標準規范，以及使用最新的瀏覽器版本。此外，可以通過在文檔頭部添加一個聲明來告知瀏覽器當前網頁使用的標準規范，從而觸發標準模式的渲染方式。例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標準模式的聲明</title> </head> <body> <h1>標準模式的聲明</h1> </body> </html>
在舊式網頁設計中，CSS怪異性模型可能是難以避免的。但在現代網頁設計中，我們需要盡可能避免它的出現，以便保證網頁效果的一致性和穩定性。