相信只要是接触过前端的，一定会对盒模型有着深深地记忆，整理了一下：
盒模型，由内到外，分别是本身宽高、内边距、边框。然后盒模型还可以有外边距，之后解释。
本身宽高，没啥说的了；
内边距即padding，表示从元素本身内容到元素边框的距离，分上下左右四个方向，可以有1~4个值，如下：
padding:10px;
1个值，表示四个方向padding都是10像素大小；
padding:10px 20px;
2个值，第一个值表示上下，padding-top=padding-bottom=10px; 第二个值表示左右，padding-left=padding-right=20px;
padding:10px 20px 30px;
3个值，第一个值表示上，padding-top=10; 第二个值表示左右，padding-left=padding-right=20px;第三个值表示下，padding-bottom=30px
padding:10px 20px 30px 40px;
4个值，很好记，从上开始，按顺时针方向即上右下左的顺序分别赋值，即padding-top=10px,padding-right=20px,padding-bottom=30px,padding-left=40px
另外，有个需要注意的点：使用padding会增大盒模型面积。
边框即border
顾名思义，就是给盒模型加上一个边界，这个边界用有宽度有颜色有样式的线组成，从而传递一个信号，边框里面的东西，外界不能干预（在布局层面讲，并且暂时不考虑层级的问题）。
border-width 边框的宽度，没啥讲的，想给多宽直接设置；
border-color 边框的颜色，也没啥说的，想要啥颜色直接给，近期会再写一篇关于颜色的文章；
border-style 也很好理解，style样式嘛，比如最常用的实线虚线等，solid-实线 dashed-虚线 dotted-点线 三个最常用的属性。
border还支持简写，border:2px solid red;什么意思呢？2像素宽的红色实线边框。
这里还有一个很好玩的属性叫border-radius ,叫圆角度，就是让方方正正的角，变得圆滑一些，
可以用它做很多图形，当然后面可以用画布来做；需要注意的是，border的使用同样会增加盒模型面积；
盒模型面积计算：S=(border-left + padding-left + width + padding-right + border-right) * (border-top + padding-top + height + padding-bottom + border-bottom);
用下图来实战一下：
S=(20+40+100+20+10)*(5+10+150+30+15)=39900;
margin
margin是用来调节元素之间位置的这么一个属性，所以它不算在面积内部，margin同样有1~4个值，语法和padding是一样的，有两个要注意的点：
子债父偿和上下叠压
子债父偿：产生原因：块元素作为第一个子级，并且使用了margin或者margin-top。
效果：最开始
然后给粉色块一个margin-top想出现下面这个结果：
但是显示的是这样的：
不是子级相对于父级下移了，而是整体移动，这就是子债父偿，那么怎么解决呢？
有3个方法解决，①给父级一个border ②不用margin，让父级使用padding，把子级“挤下来” ；①②不推荐使用，因为会让父级面积增大，影响整体布局 ③为父级添加overflow:hidden，最常用也是最好用的解决办法。
上下叠压：在正常情况下，块元素使用margin会出现上下叠压现象，大家知道，margin是调整外部距离的，
这个情况下应该是两个块之间隔开150+100，一共250像素的位置，但是实际效果呢？
实际间隔是150（两个值中大的那个），这就是上下叠压现象。有问题就会有解决方案：使用浮动
完美解决。
