在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开发时还有其他的问题需要我们注意，但对于盒子模型来说，理解盒子的大小如何计算是非常重要的。