css的盒子模型

一、盒子模型分两种

第一种：W3C标准盒子模型（标准盒模型）
第二种：IE标准的盒子模型（怪异盒模型）

二、标准盒模型与怪异盒模型的区别

标准盒模型：width指的是内容区域content的宽度，height指的是内容区域content的高度
标准盒模型下盒子的大小=content +padding+border+margin

怪异盒模型：width指的是内容、内边距、边框的宽度、height指的是内容、内边距、边框的高度
width=content +padding-left+padding-right+border-left+border-right，
height=content +padding-top+padding-bottom+border-top+border-bottom
怪异盒模型下盒子的大小:宽度=width+margin，高度=height+margin

三、通过box-sizing设置盒子模型的解析模式

box-sizing有两个值可选：
（1）content-box：默认值，标准盒模型，盒子的大小=content +padding+border+margin
（2）border-box：怪异盒模型，宽度=width+margin，高度=height+margin