CSS怪異模型是指在渲染頁面時，元素的盒模型寬度的計算方式和通常認知的不同，主要表現在IE瀏覽器中。下面我們來探討下CSS怪異模型的計算規則。

/*樣式代碼*/
div{
width:100px;
padding:10px;
border:1px solid red;
margin:20px;
}

在W3C標準盒模型下，元素的盒模型寬度計算公式為：content width + padding + border + margin。如上代碼中的div元素，其盒模型寬度計算公式為100px（content width） + 10px（padding）+ 2px（border）+ 20px（margin） = 132px。

然而，在CSS怪異模型下，元素的盒模型寬度計算公式為：content width + margin，即只包括元素的寬度和外邊距的寬度。如上代碼中的div元素，其盒模型寬度計算公式為100px（content width）+ 20px（margin）= 120px。

為什么會出現這種差異呢？因為在IE瀏覽器中，元素的padding和border會撐開元素盒模型大小，導致元素的實際寬度大于設置的寬度，這和W3C標準盒模型的定義有所不同。

在實際開發中，我們可以通過在CSS中添加box-sizing屬性來控制元素的盒模型大小是采用W3C標準盒模型還是CSS怪異盒模型，其默認值為content-box（W3C標準盒模型）。如果要使用CSS怪異盒模型，可以將box-sizing設置為border-box。

/*樣式代碼*/
box-sizing:border-box;

以上就是關于CSS怪異模型的計算規則的介紹，希望對大家有所幫助。