盒模型（标准，怪异）

**

盒模型（标准，怪异）

	盒模型一共有两种模式：W3C标准模式和IE怪异模式

• 概念：css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
• 作用：css中的盒子模型是为了让你充分理解div+css模型的定位功能，也就是利用盒子模型这样的布局方式代替了传统的表格布局方式。
• 盒模型的组成：content（内容区）+ padding（填充区）+ border（边框区）+ margin（外边界区）

标准模式：盒子的总宽度=width+padding+border+margin
怪异模式：盒子的总宽度=width(包含padding+border)+margin

网页中经常用到以下四个属性：
1、Content：元素的宽和高，内容。也就是元素的width、height
2、Border ：盒子边缘或盒子边缘的厚度
3、Padding ：在盒子里面，盒子和内容之间的距离
4、Margin ： 外边距

特点1：加了padding值后，会把元素原本有的大小撑大，如果让元素原本的大小不变，需要在元素的宽高上减掉所加的padding值。
特点2：padding属性对背景图片不起作用的，也可以说背景图片的位置不受padding的影响。 特点3：背景色会延展到padding区域。