个人笔记-常见的盒模型及区别

盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪异模式下的IE5.5+）

理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。

div{
    padding:20px;
    margin:20px;
    border:5px solid #ccddff;
    width:100px;
}

此div元素，在W3C盒模型中的宽度为190(100+20*2+20*2+5*2)px;在IE盒模型中的宽度是100px.

CSS3新增了box-sizing属性来改变盒模型的类型

box-sizing:content-box; 默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）
box-sizing:border-box; 代表IE盒模型：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）