在Web開發中，CSS怪異盒模型是個常見的問題。怪異盒模型的出現是因為早期瀏覽器的盒子模型定義不同于標準盒模型。在理解CSS怪異盒模型之前，我們需要先了解盒模型。

盒模型指CSS框模型，它是由外到內分別是：margin（外邊距）、border（邊框）、padding（內邊距）和content（內容）。標準盒模型的寬度（width）和高度（height）指的是content的寬度和高度。而怪異盒模型則是把邊框和內邊距計算在盒子的總寬度和高度里，即盒子的大小包括了border和padding。

舉個栗子，假設我們有一個元素，它的 width: 200px; height: 100px; border: 10px solid black; padding: 20px;。 在標準盒模型下，這個元素的總寬度為240px（200px content + 20px padding + 20px padding），總高度為140px（100px content + 20px padding + 20px padding + 10px border + 10px border）。而在怪異盒模型下，這個元素的總寬度為200px（200px content + 20px padding + 20px padding + 10px border + 10px border），總高度為100px（100px content + 20px padding + 20px padding + 10px border + 10px border）。

/* 標準盒模型 */
#box {
width: 200px;
height: 100px;
border: 10px solid black;
padding: 20px;
}
/* 怪異盒模型 */
#box {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 10px solid black;
padding: 20px;
}

為了避免CSS怪異盒模型的問題，我們可以使用box-sizing屬性。box-sizing屬性有兩個可選值：content-box和border-box，前者采用標準盒模型，后者采用怪異盒模型。如果希望盒子的大小不受border和padding的影響，我們應該將box-sizing設為content-box。

總之，CSS怪異盒模型和標準盒模型的區別在于計算盒子大小時是否包括邊框和內邊距。為了解決怪異盒模型的問題，我們可以使用box-sizing屬性。當然，Web開發時還有其他的問題需要我們注意，但對于盒子模型來說，理解盒子的大小如何計算是非常重要的。