css中怪异盒模型的产生

在CSS中，盒模型是用来描述HTML元素在页面上所占用的空间的。但是在CSS中又存在着怪异盒模型，它是如何产生的呢？

.box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
} 

在上面这段CSS代码中，我们为一个元素添加了宽高为100px，padding为20px和边框为10px的样式。这个元素所占用的空间是多少呢？

根据标准盒模型，这个元素所占用的空间应该是宽度为100+20*2+10*2=160px，高度也是同样的计算公式。也就是说，padding和border都是算在元素的宽高中的。

但是在IE6及其以下的版本中，存在着怪异盒模型，它计算元素所占用的空间的方式与标准盒模型不同。在怪异盒模型中，元素的宽高不包括padding和border，所以这个元素所占用的空间只有100px。

产生怪异盒模型的原因是因为IE一开始的设计并没有考虑到padding和border的计算方式，后来为了向后兼容，就在IE6及其以下的版本中保留了这种计算方式。虽然现在IE已经基本上不再使用怪异盒模型，但是为了兼容旧版本的浏览器，我们还是需要了解它。