css盒模型的组成（margin、padding）

1.盒模型的概念和组成
  1）盒模型的概念：css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。
  2)css盒子模型都具备这些属性：内容（content）、填充（padding）、边框（border）、边界（margin）
2.padding
定义：padding是元素内容到元素边框之间的距离，叫内填充、补白或内边距；
      padding区域内会显示背景色和背景图片；
用法：1）用来调整内容在容器中的位置关系
      2）用来调整子元素在父元素中的位置关系（注：padding属性需要添加在父元素上）
       3)padding值是额外加在元素原有的大小之上的，如果想保证元素大小不变，需从元素宽或者高上减掉后添加的padding属性值
  padding-left：左内边距  padding-right：右内边距 padding-top：上内边距 padding-bottom：下内边距
3.padding属性值的4种形式
 一个值：padding：2px；四周的填充都是2px;
 两个值：padding：10px 20px 上下
 三个值：padding：10px 20px 30px;上 左右 下
 四个值:padding:10px 20px 30px 40px 上 右 下 左
4.margin
定义：在元素外边的空白区域，称为外边距
margin-left：左边界  margin-right：右边界  margin-top：上边界  margin-bottom：下边界
5.margin属性值的4种形式
四个值：上 右 下 左
三个值： 上 左右 下
两个值： 上下 左右
一个值：四个方向

margin:2px;/*定义元素四边边界为2px*/ margin:2px 4px;/*定义元素上下边界为2px，左右边界为4px*/ margin:2px 4px 6px;/*定义元素上边界为2px，左右边界4px，下边界为6px，*/  margin:2px 4px 6px 8px;/*定义元素上边界为2px，右边界为4px,下右边界为6px，左边界为8px*/  margin:0 auto;/*可以让一个盒子在浏览器中水平居中*/。
6.border的使用方法
border：边框宽度 边框风格 边框颜色； 例如：border:5px solid #f00;

.盒子的实际大小（公式）
实际宽：左右margin+左右border+左右padding+width
实际高：上下margin+上下border+上下padding+height