怪异盒模型与标准盒子模型的区别(IE与w3c)

在我们做前端开发中，对于盒子模型的使用是非常频繁使用的，但是盒子模型却又有两种：怪异盒模型与标准盒子模型(IE与w3c)，为了更好的开发，我们有必要把它们搞清楚。 下面我们开看看：怪异盒模型与标准盒子模型的区别？(IE与w3c)

2、标准盒子模型是什么样的？(也称w3c盒模型)在标准的盒子模型中：最终盒子的“width”和“height”=我们给元素设置的宽高 + padding+ border；换句话说： 在标准模型下，我们给元素设置的宽高只会作用到内容content上,如果元素padding和border有值的话，那么这些值是另外算的

4、标准盒子模型示例效果演示从下图我们看出，100像素确实只作用到元素的内容上了，padding和border是另外计算的。即：最终盒子的“width”和“height”=我们给元素设置的宽高 + padding+ border；

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>

8、开发时选择什么盒子模型？ 开发时，在大部分情况下，为了更好的控制，我们一般选择的是IE盒模型。当然，这并不绝对。