小白初学盒模型

盒模型：布局网页的基石！
从内到外分别是:padidng,border,margin。

padding：内填充
1，padding长在内容与盒子之间,它属于内填充。用来控制红色板块在黄色板块（盒子）里的位置关系。
2，padding要在黄色板块里添加，也就是盒子上添加padding。
注意：当盒子添加了padding之后，盒子的宽高也要减去相应的padding值，因为加了padding值后，盒子会变大。列如：盒子宽200高200，添加padding值为50，那么盒子的宽就是250，高250，如果要保持原有大小，就要减去50.

**
width:150px;
height:150px;
padding:50px;
**

3,padding有四个方向：padidng-top，padding-bottom，padding-left，padding-right。
4,padding值得设置：padding：10px 指四个方向都加padding
padding：10px 20px 指上下10px 左右20px
padidng:10px 20px 30px 指上10px 左右20px 下30px
padding：10px 20px 30px 40px 指上10px，右20px，下30px，左40px（顺时针）
5，padding的值没有负数。
border：边框
1，红色与黄色之间的黑色部分就是内容的边框，即边框默认情况下，长在内容的宽高之外，盒子的里面。
2，border属性拆分：border-width（边框大小），border-color（边框颜色），border-style（边框类型）
3，设置边框方向:left,right,top,bottom四个方向，可以单独设置方向，其值的书写也遵循上右下左原则

margin：外边距
1，margin长在盒子外面。
2，它控制的是当前元素与同级元素的位置关系。列如：黄色板块与蓝色板块 它们是同级关系
3，添加margin值不会使盒子内部大小变化。它在盒子外面。
4，margin也有四个单一方向的设置，与padding相同。
5，margin值的设置也与padding相同。
6，margin的值可以为负数，负数即为相反的方向。

.yellow{
          width:100px;
          height:100px;
          margin-right:100px
}
给黄色板块右边添加100px的距离，使其与蓝色板块分离。