对于标准盒模型和IE盒模型的概述

这篇文章是，对于 标准盒模型 和 IE盒模型 的各自 定义，二者的 差异 性，彼此之间的 转换 方法的一个总结：

---

• CSS 中盒模型概念 ：

盒子模型组成 ：由元素的 内容（content），边框（border），内边距（padding），外边距（margin）组成。

1. 盒子里面的文字，图片等元素就是内容区域（content）。
2. 盒子的厚度就是盒子的边框（border）。
3. 盒子内容（content）和边框（border）之间的距离就是内边距（padding）（类似于单元格的 cellpadding 属性）。
4. 盒子于盒子之间的距离就是外边距（margin）（类似于单元格的 cellspacing 属性）。

CSS 中 width 指的是内容的宽度，而不是盒子的宽度；同样的 height 指的是内容的高度，而不是盒子的高度。 

• 盒模型的分类 ：

盒模型分类 ：

1. 标准（W3C）盒模型 。（box-sizing : content-box;）
2.  怪异（IE）盒模型 。    （box-sizing : border-box;）

• 标准盒模型和怪异盒模型的区别 ：

标准盒模型 :

• 盒子 宽度 ： 内容宽度（content）。
• 盒子 高度 ： 内容高度（content）。
• 盒子 实际占有的宽度 ：内容宽度 （content）+ 左右（padding） + 左右（boder） + 左右（margin）。
• 盒子 实际占有的高度 ： 内容高度 （content）+ 上下（padding） + 上下border + 上下（margin）。

---

怪异盒模型 :

• 盒子 宽度 ： 内容宽度（content） + 左右（padding ）+ 左右（border）。
• 盒子 高度 ： 内容高度（content） + 上下（padding） + 上下（border）。
• 盒子 实际占有的宽度 ：内容宽度（content） + 左右（padding） + 左右（boder）+ 左右（margin）。
• 盒子 实际占有的高度 ： 内容高度（content） + 上下（padding） + 上下（border） + 上下（margin）。

---

总结 ：二者盒子 实际占有的宽高 一样，CSS中显示的宽高 不一样。

• 盒模型之间的转换 ：

元素可以通过 CSS 中的 box-sizing 样式属性来转换盒子模型。

1. 标准盒模型 : box-sizing : content-box;
2. IE 盒模型 :    box-sizing : border-box;