核心提示：原来存在两种盒模型，W3C标准盒模型和IE盒模型。两者盒模型下计算元素的宽高不一致，为了实现统一，采取的方法是避免触发IE盒模型，使用声明就可以避免。下面我们来看看两者的区别。W3C标准盒模型 wid...
原来存在两种盒模型，W3C标准盒模型和IE盒模型。两者盒模型下计算元素的宽高不一致，为了实现统一，采取的方法是避免触发IE盒模型，使用声明就可以避免。
下面我们来看看两者的区别。
W3C标准盒模型 width=(margin-left)+(margin-right)+(padding-left)+(padding-right)+(border-left)+border-right+content;(content不包含其他部分)
height类似。
IE盒模型 width=(margin-left)+(margin-right)+content;(content包含border,padding);
height类似。
例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个 盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，
盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；
如果用IE 盒子模型，那么这个
盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，
盒子的实际大小为：宽 200px、高 50px。
