盒模型

我是一名逆战班的学员，在一些时间段的课程上下来之后，有一些东西想要和大家分享一下，今天就让我来简单分享一些盒模型的属性。
相信只要知道前端，了解过前端的人，对盒模型.一定都不会陌生，那么什么是盒模型呢，它有什么属性呢？盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。

由图我们可以看出，盒模型是由：Content,Padding,Margin,Border几部分组成的。Content 是盒模型里的内容区，它需要写元素的宽和高；Border是盒模型的边框区，它呢，是盒模型的边缘。Content和Border我们就不重点讲了，主要来讲一下Padding和Margin。
Padding是盒模型的填充区：
Padding是用来控制父元素和子元素之间的位置关系以及用来控制元素和容器之间的位置关系的，padding有一个特点是当一个元素添加了padding值之后，Padding值就会把原有的大小撑大。下面说一下padding如何使用：
padding-top:;/上填充/
padding-right:;/右填充/
padding-bottom:;/下填充/
padding-left:;/左填充/
它还有一种使用方法就是：
padding：1234 1.上 2.右 3.下 4.左
padding：123 1.上 2.左和右 3.下
padding：12 1.上和下 2.左和右
padding-left:1 1.上右下左
这是padding的复合式写法，当你在padding后面写1234个值时，分别代表的是上填充还是下填充等等，你可以对照一下上面的顺序，这里就不一一赘述了。
padding在使用时还有两点要注意，就是padding属性对背景图片是不起作用的还有就是你设置的背景颜色会延展到padding区域，这两个特点还有一些其他的用途，以后有机会再细说吧。
说完了padding我们再来说一下margin：
margin是盒模型的外边界区：
margin的作用是控制同辈元素之间的位置关系。它的特点是margin是显示在元素边框以外的空白区。它的使用方法和padding类似，也是有两种：
方法一：
margin-top:;/上填充/
margin-right:;/右填充/
margin-bottom:;/下填充/
margin-left:;/左填充/
方法二：
margin：1234 1.上 2.右 3.下 4.左
margin：123 1.上 2.左和右 3.下
margin：12 1.上和下 2.左和右
margin-left:1 1.上右下左
是不是很像呢，但是有一点要注意，margin是可以写负值的，但是padding不可以哦。
我这次的分享就到这里了，盒模型在前端里是一个非常重要的东西，希望大家都能理解学会并且掌握，我也要在逆战班里继续加油，学习！
Fighting!