在我们做前端开发中，对于盒子模型的使用是非常频繁使用的，但是盒子模型却又有两种：怪异盒模型与标准盒子模型(IE与w3c)，为了更好的开发，我们有必要把它们搞清楚。 下面我们开看看：怪异盒模型与标准盒子模型的区别？(IE与w3c)
工具/原料
一台可联网电脑
浏览器
怪异盒模型与标准盒子模型的区别？(IE与w3c)
1、什献垴淄睬么是盒子模型？ 所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。盒子模型的组成？一个盒子是由四个部分组成：① “内容幻腾寂埒--content”（盒子内的物件）、② “内间距--padding”（物件和盒子的距离）、③ “边框--border”（盒子壁）、④ “外间距--margin”（盒子和其它物体的距离）
2、标准盒子模型是什么样的？(也称w3c盒模型)在标准的盒子模型中：最终盒子的“width”和“height”=我们给元素设置的宽高 + padding+ border；换句话说： 在标准模型下，我们给元素设置的宽高只会作用到内容content上,如果元素padding和border有值的话，那么这些值是另外算的
3、标准盒子模型使用举例 如下图所示：我们给元素设置的100px的宽高在标准盒子模蕞瞀洒疸型下之后作用到内容上，和padding与border是不相干的。<style>div{bor颊俄岿髭der: 10px red solid;padding: 10px;width: 100px;height: 100px;box-sizing: content-box; /* 标准盒子模型（默认也是这个值） */}</style><div>hello</div>
4、标准盒子模型示例效果演示从下图我们看出，100像素确实只作用到元素的内容上了，padding和border是另外计算的。即：最终盒子的“width”和“height”=我们给元素设置的宽高 + padding+ border；
5、怪异盒模型又是什么样的？（也称之为IE盒模型）由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。IE浏览器盒子模型 最终盒子的width”和“height== 我们给元素设置的宽高换句话说： 在标准模型下，我们给元素设置的宽高为content+padding+borderde
6、怪异盒模型使用举例<style>div {border: 10px red solid;padding: 10px;width: 100px;heig茑霁酌绡ht: 100px;/* box-sizing: content-box; 标准盒子模型（默认也是这个值） */box-sizing: border-box;/* IE盒子模型（也称之为怪异盒子模型） */}</style><div>hello</div>
7、怪异盒模型示例效果从下图可以看出，在IE这种怪异盒模型下，我们设置的宽高变成了100px == 内容宽高 + border + padding
8、开发时选择什么盒子模型？ 开发时，在大部分情况下，为了更好的控制，我们一般选择的是IE盒模型。当然，这并不绝对。