盒模型：
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
即都包含content内容区、padding补白（填充）、border边框、margin边界(外边距)这就是盒模型。
盒模型的作用：
1:用来控制父元素和子元素之间的位置关系；
2:用来控制元素和内容之间的位置关系的;
3:用来控制同辈元素之间的位置关系。
padding（填充）：
1：padding在内容和盒子之间的，在盒子内部；
2：padding是为了调整子元素在父元素里面位置关系；
3：添加padding值会把盒子撑大，如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值；
4：padding不能设置负值；
5: padding不会对背景图造成影响；
6：如果一个盒子没有设置固定的宽和高，添加padding是不用减的；
7：给单一方向添加padding值：
padding-left/right/top/bottom:;
8：padding的设置方法：
padding:1个值 四周
padding:2个值 上下 左右
padding:3个值 上 左右 下
padding:4个值 上 右 下 左
margin（外边距）:
1: margin在盒子（元素）外部；
2: margin控制的是同级元素之间的位置关系；
3: margin不会对盒子本身的宽高造成影响；
4: margin可以设置负值；
5: 给单一方向添加margin值
margin-left/right/top/bottom:;
6: margin的设置方法：
margin:1个值 四周
margin:2个值 上 下 左右
margin:3个值 上 左右 下
margin:4个值 上 右 下 左
7: margin:0 auto; （让当前元素在父元素里面左右居中）；
注：margin常出现的bug:
a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top,会错误的把margin-top加在父元素上面。
b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。
标准盒模型的所占位置的组成：
占有的宽度：width + padding-left/right + border-left/right + margin-left/right
占有的高度：height+ padding-top/bottom + border-top/bottom + margin-top/bottom
原文：https://www.cnblogs.com/-xiaohei/p/12594324.html