CSS-盒子模型，标准盒子模型，IE 盒子模型，盒模型之间的转换

我们可以把每一个HTML标记，都看成是一个"盒子"；这个"盒子"的特征包含：内容的宽度（width）或高度（height）、边框线（border）、内填充（padding）、外边距（margin）。

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

盒模型组成

盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成

• 盒子里面的文字、图片等元素就是内容区域
• 盒子的厚度就是盒子的边框
• 盒子内容与边框的距离就是内边距（类似于单元格的 cellpadding 属性)
• 盒子与盒子之间的距离就是外边距（类似于单元格的 cellspacing 属性）

盒模型分类

盒模型分为两种，一种是标准盒模型另一种是怪异盒模型（IE 盒模型）

标准盒模型

标准盒子模型中内容的宽高就是盒子的 width、height 属性值；如果给盒子设置了 padding、border、margin 盒子实际占有的宽高会发生变化

盒子实际占有宽度为： 内容宽度 + 左padding + 右padding + 左border + 右border + 左margin + 右 margin

实际占有高度的计算与上述实际宽度的计算方式类似

IE盒子模型

在 IE 盒子模型中 width 和 height 是盒子的 内容 + padding + border 三者之和；设置盒子的 pading 或 border 后盒子的宽高并不会发生变化，会去修改内容的宽高来保持盒子的宽高不变

盒子实际占有宽度为：width + 左margin + 右margin

盒子模型的相互转换

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

属性值	说明
content-box	标准盒子模型
border-box	IE盒子模型