盒模型——快递比喻法

盒模型，在整个HTML里面都是一个非常重要的关键点，那么，如何正确快速有效的学习好盒模型呢？这就可以用到我们的快递比喻法！
首先，让我们来看一张图。

这张图我们可以看**出什么呢！当然，一个快递，里面放了一个鸡蛋。那么，如何通过这张图看出什么东西来，这就是我们需要做的！
一个鸡蛋如果单纯的把它放在一个快递盒里，很明显它会上下左右乱动，试想这个鸡蛋就是一个元素，一个元素可以在一个页面中左右乱动吗，答案当然是不行，那如何把它固定在一个地方不乱动，这就要用到我们的内填充。一个鸡蛋不让它乱动，我们可以给他周边加上一些泡沫，这样鸡蛋就移动不了，那要让一个元素不乱动，我们也可以给它加上"泡沫"，这个泡沫就是我们盒模型里的一个css属性：padding！

padding的作用就是让文本与盒子的周围产生间距，控制子元素在盒子内部的位置关系，我们知道，泡沫是加在快递盒里，而不是鸡蛋里，所以我们的padding一样的加在父元素上面，加了泡沫，盒子自然会被撑大，所以如果我们用了padding，我们需要在宽高的基础上减掉padding的值！但是，当盒子没有设置大小时，那我们就不用减了。因为我们的背景图不会占空间，所以自然不会对背景图产生影响，还有一点，padding是不能为负值的！
单一方向的设置padding值和设置的方法如下：

padding是用于文本与盒子之间，那如果是盒子与盒子之间呢？

如上图，如果想让两个盒子间产生距离，又该怎么做？
这就要用到我们盒模型的另一个css属性：margin！margin是用来让两个盒子产生距离，所以自然和padding不一样，margin是长在外围的，控制的是同级元素之间的位置关系！margin值在外围，那也自然不会改变盒子内部大小。
margin的单一方向设置与设置方法与padding一样，只是将padding改为margin


与padding不同的是它可以设置负值！
margin经常会出现一些BUG：
上图中也已经写出来了，A：同级元素上下之间的margin值，会重合，不会叠加，会按最大值设置！
B：当父元素和第一个子元素都没浮动，给第一个子元素加上margin-top，它会错误的加到父元素上面！
盒模型还有另外一个组成部分叫做border，就是我们通常所说的边框属性，边框在默认情况下是长在元素宽高外的，border具有三个属性：border-width（边框大小），border-color（边框颜色），border-style（边框类型），其中边框类型尤为重要，没有边框类型其他的设置就不会有体现，一般写border时，我们都是用的复合式写法，即：border：边框大小 边框类型 边框颜色；边框的单一方向设置和和设置方法与margin，padding一样，只需要将margin或padding写成border即可，具体如下：

以上就是盒模型的一些知识内容，希望我们都可以学有所成，共同进步！