css盒模型

盒模型的作用：规定了网页元素如何显示以及元素间的相互关系；

1.标准盒模型

标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。

标准盒大小计算公式：width(content) + padding + border + margin

 

2.怪异盒模型

怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。
怪异盒大小的计算公式：width(content + padding + border) + margin

 

盒模型box-sizing属性的三个值：
content-box，border-box，inherit

content-box chrome浏览器默认的盒子属性值。
        content-box的width和height从content算起，不包含border和padding。
border-box  IE浏览器默认的盒子属性值。
        border-box的width和height从border算起,包含border和padding
inherit
        inherit 关键字指定一个属性应从父元素继承它的值。