什么是盒子？
盒子是一种概念，用于构建页面设计，我们可以把盒子当做是div来进行理解
盒子 = div + margin + padding + border
什么是margin？
简而言之就是该元素周围的真空区，其它元素距离这个元素至少要有多少距离，特称“外边距”。
怎么用？
-
margin： 10px；
指的是“ 上 右 下 左 ”（顺时针）外边距全部为10px
-
margin：10px 20px;
指的是“上 下”外边距为10px，“右 左”外边距为20px
-
margin：10px 20px 30px 40px;
指的是“上”外边距为10px，“右”外边距为20px，“下”外边距为30px，“左”外边距为40px
什么是padding？
简而言之就是该元素内部的真空区，其元素内容距离该元素边界至少要有多少距离，特称“内边距”。
怎么用？
-
padding： 10px；
指的是“ 上 右 下 左 ”（顺时针）内边距全部为10px
-
padding：10px 20px;
指的是“上 下”内边距为10px，“右 左”内边距为20px
-
padding：10px 20px 30px 40px;
指的是“上”内边距为10px，“右”内边距为20px，“下”内边距为30px，“左”内边距为40px
特别：
1.以下是两个div的嵌套，目的使子div居中，注意：父div没有控制边距属性
<div style="width: 200px; height: 200px; background:bisque; color:white;">
<div style="width: 50px; height: 50px; background:blue; color:white; margin-top: 50px; margin-left: 50px;">
</div>
</div>
从图中可以很明显看到子div向右移动了，但两个div整体向下移动，并没有达到居中效果。
原因在于根据W3C盒子模型的规范，一个盒子如果没有上内边距(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。解决办法最直接就是在父元素中添加padding-top或border-top属性值，但还有其它解决办法，要根据网页的具体情况做出相应的修改，点击此处可查看其它解决方案。
