什么是盒模型

    最近正在系统性的学习前端方面的知识，这周学习到盒模型相关地方，借此回顾并且巩固已学知识。
    第一次在CSDN上发布博客，不太熟练上面的排版格式，按照自己的喜好来进行的排版和整理，若有不足之处，望指正。**NZH5**

说起盒模型，首先要知道盒模型是css布局的基石，规定网页元素如何显示以及元素间相互关系的。 使元素拥有像盒子
一样的外形和平面空间。
盒模型的组成：内容区、填充区、边框区、外边距。
具体如图：

即：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
padding：用来控制父元素和子元素之间的位置关系；
margin：控制同辈元素之间的位置关系。
padding特点如下：
1：添加了padding值之后，padding值会把元素原有的大小撑大； 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding值；
2： padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding的影响的。
3：背景色会延展到padding区域。
padding的使用方法：
方法一 ：
padding-top:10px; 上填充
padding-right:10px; 右填充
padding-bottom:10px; 下填充
padding-left:10px; 左填充
方法二 ：
padding： 1 2 3 4 1、上 2、右 3、下 4、左
padding： 1 2 3 1、上 2、左和右 3、下
padding： 1 2 1、上和下 2、左和右
padding： 1 1、上 右 下 左
margin的使用方法：
方法一：
margin-top:10px; 上外边距
margin-right:10px; 右外边距
margin-bottom:10px; 下外边距
margin-left:10px; 左外边距
方法二 ：
margin：1 2 3 4 1、上 2、右 3、下 4、左
margin：1 2 3 1、上 2、左和右 3、下
margin：1 2 1、上和下 2、左和右
margin：1 1、上 右 下 左
margin和padding一样是从从上到左顺时针旋转的。
另外实现元素水平居中的方法：margin：0 auto；
注：margin 是可以写负值的，padding不可以写负值；
margin不会影响元素的实际宽高，但是会曾加的他的所占区域；
总之，通过本周盒模型的学习， 使我对css的布局有了更深入的了解，期待接下来更进一步的学习。