盒模型

区别

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

并不是所有的IE都使用IE盒模型

1. 早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型
2. 没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”

兼容方案

使用css3新样式box-sizing

box-sizing有两个值

1. content-box：w3c标准盒模型

2. border-box：“IE盒模型”

   <div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
   </div>
   

两层容器

<div style="height:200px;width:200px;">
    <div style="border:solid 10px #333;padding:100px;"></div>
</div>