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

一台可联网电脑

浏览器

什么是盒子模型？    所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。  盒子模型的组成？  一个盒子是由四个部分组成：①　“内容--content”（盒子内的物件）、②　“内间距--padding”（物件和盒子的距离）、③　“边框--border”（盒子壁）、④　“外间距--margin”（盒子和其它物体的距离）

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

标准盒子模型使用举例     如下图所示：我们给元素设置的100px的宽高在标准盒子模型下之后作用到内容上，和padding与border是不相干的。 

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

怪异盒模型又是什么样的？（也称之为IE盒模型） 由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。 IE浏览器盒子模型      最终盒子的width”和“height == 我们给元素设置的宽高换句话说：     在标准模型下，我们给元素设置的宽高为content+padding+borderde

怪异盒模型使用举例 

怪异盒模型示例效果 从下图可以看出，在IE这种怪异盒模型下，我们设置的宽高变成了 100px == 内容宽高 + border + padding

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