css盒模型
拿快递盒中的鸡蛋举例——由里向外：内容区content（鸡蛋）——内填充padding（泡沫）——盒子边框border（快递盒）——外边距margin（快递盒与快递盒之间的距离）
（一）padding内填充
作用：调整子元素在父元素中的位置关系
特点：
- 会把盒子撑大，若想保留盒子原来大小，需要在盒子原来的基础上减去padding的值
- 给单一方向设置padding的值：padding-left、padding-right、padding-top、padding-bottom
- 设置方法：padding：；一个值代表四周，两个值代表上下，三个值代表上、左右、下，四个值代表上、右、下、左
- Padding的值不能为负值
- Padding不会对背景图造成影响
- 若盒子未设置固定的宽高则添加padding，宽高不用减
（二）margin外边距
1.长在元素之外，控制同级元素之间的距离
2.不影响盒子的大小
3.给单一方向设置margin的值：margin-left、margin-right、margin-top、margin-bottom
4.设置方法：margin：；一个值代表四周，两个值代表上下，三个值代表上、左右、下，四个值代表上、右、下、左
5.可以为负值
6.margin：0 auto；让元素在父元素中水平居中显示
7.margin常出现的bug：当父元素与子元素都未浮动时，给第一个子元素添加margin-top，它会错误的将margin-top加在父元素身上；上下相邻的两个元素之间的margin会重合按照最大值处理；左右不会重合。