css盒子模型

请简述盒子模型

W3C组织建议把所有网页上的对象都放在一个盒子（box）中，就是所说的盒子模型，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：实际内容(content)、填充(padding)、边框(border)，边界(margin)。一个div就是一个盒子。

属性说明

Content(内容)- 盒子的内容，显示文本和图像。

Padding(内边距)- Padding是盒子中的文字距离盒子边框（border）的距离，内边距是透明的。

Border(边框)- 围绕在内边距和内容外的边框。

Margin(外边距)- margin是盒子距离网页边的距离，外边距是透明的。

盒子实际所占位置大小计算公式：

盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界

盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界

要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值，盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界（margin）所占的大小，即

盒子的实际宽度=宽度+左填充+右填充+左边框+右边框

盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框

盒子分类

W3C标准盒子模型

W3C标准盒子模式包括内容(content)、边框(border)、边界(margin) 、填充(padding)
W3C标准盒子模型 宽度=content

IE盒子模型（怪异模式）

IE盒子模型（怪异模式）宽度=content+padding+border