盒模型是网页布局的基石，从盒子的内部到盒子的外围分别是：
1.内容（content）
2.内填充（padding）
3.盒子本身（border）
4.外边距（margin）
下面就让我们来说说一些基础的盒模型的css属性
一.内填充（padding）
-
padding的作用：让文本和盒子的周围产生间距，主要控制子元素和盒子内部。
-
关于 padding的注意事项：
（1）padding是长在内容和盒子之间的距离
（2）padding是长在盒子里面的
（3）padding是添加在父元素上面的
（4）padding可以把盒子撑大
（5）padding不会对背景图的位置造成影响
（6）padding不能为负值 -
单一方向上设置padding的值：
（1）padding-left
（2）padding-right
（3）padding-top
（4）padding-bottom -
padding的设置方法：
（1）padding：一个值 四周都是padding
（2）padding：两个值 上下 左右
（3）padding：三个值 上 左右 下
（4）padding：四个值 上右下左
二.外边距（margin）
1.margin的作用：让两个盒子（同级的盒子）之间，产生一定距离，盒子的周围产生间距
2.关于margin的注意事项：
（1）margin是用来控制当前元素 与 其他同级元素的位置关系
（2）margin 是长在盒子外围的
（3）margin不会改变盒子内部的大小
（4）margin是可以设置负值的
（5）7:margin常出现的BUG:
a: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
b: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面
3.单一方向上设置margin的值
（1）margin-right
（2） margin-left
（3） margin-top
（4） margin-bottom
4.padding的设置方法：
（1）margin：一个值 四周都是margin
（2）margin：两个值 上下 左右
（3）margin:三个值 上 左右 下
（4）margin:四个值 上右下左
逆战班