盒模型属性

在HTML5逆战班的第二周的的学习中，我们终于接触到了css里的一大重点——盒模型。这一节的学习可以说是非常的有趣了，因为当我们对盒模型的不同属性进行控制时，有时是可以达到相同的目的的。但我们一定要记住差别并对这些属性进行差别使用，否则在进行css布局时会出现不少麻烦。

盒模型

在介绍盒模型的属性值之前，我们先简单看一下盒模型的结构组成。作为css布局的基础，盒模型是控制元素与元素与元素之间（or元素与内容之间）的位置关系的，它的组成包括内容区（content），补白（填充），边框以及边界（外边距）。这里我借用元素div进行举例。

<div class="div1"><p>模型一模型一模型一</p></div>
<div class="div2"><p>模型二模型二模型二</p></div>

*{margin: 0;padding:0;}
/*取消默认值*/
div{float:left;width:300px;height:300px;}
.div1{background-color:#b0d8f5;}
.div2{background-color:#efcda9}

如图：

1. content（内容区）
   即我们编辑的内容部分所在的区域。

2. padding（补白；填充）
   指用来控制父元素和子元素之间的位置关系，亦或者控制元素与内容之间的位置关系。
   如图，对于内容区，他是被padding四面包裹的，我们可进行单侧方向的控制，即padding-top，padding-right，padding-bottom，padding-left。
   例：若我们我们想要p标签内容与其父元素div2拉开距离：就可以给父元素div2加padding属性并赋值，如

.div2{background-color:#efcda9;padding-top:20px;}

不难发现，目标虽然达成但div2的大小发生了变化，这便是padding的特点，padding会将元素原有大小撑大。
之后若想元素保持原有大小，则需要对其宽高减去相应的值就解决啦：

.div2{height:280px;}

3. margin（外边界）
   待续 (●’◡’●)