盒模型

相信只要是接触过前端的，一定会对盒模型有着深深地记忆，整理了一下：

盒模型，由内到外，分别是本身宽高、内边距、边框。然后盒模型还可以有外边距，之后解释。

本身宽高，没啥说的了；

内边距即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（两个值中大的那个），这就是上下叠压现象。有问题就会有解决方案：使用浮动

完美解决。