html盒模型

1.盒模型由哪几方面组成

• content : 盒模型内容区 (由css设置的width 和 height组成)
• padding : 盒模型内容区与边框的距离
• border : 盒模型边框（也可以设置宽度）
• margin : 盒模型边框与其它盒模型边框的距离
  盒模型由这几部分由里到外组成

2.标准盒模型 和IE盒模型（又称为怪异盒模型）

可以通过css属性来设置这两种盒模型

• 怪异盒模型：box-sizing:content-box;
• 标准盒模型：box-sizing:border-box;
• 标准盒模型和怪异盒模型的区别？

通过上面的图片可以清楚的看到 未设置box-sizing:border-box;的盒模型 ，也就是被称为标准盒模型的盒子 在改变border的大小后 它的实际大小已经发生了改变，在试了下margin 和padding后。

得出结论：

1. 标准盒模型使用padding 或 改变border 的大小 会改变盒模型的真实大小
2. 怪异盒模型使用padding 或 改变border 的大小 不会改变盒模型的真实大小 但是会向内挤压盒模型的内容区域
3. 在使用margin后 不会改变盒模型的实际大小 但是会改变当前盒模型的位置

3.盒模型的宽度计算

offsetWidth = 盒子宽度 + padding + border

clientWidth = 盒子宽度 + padding

scrollWidth = 盒子宽度 + padding