对盒模型的理解

 

 

 此图为盒子的模型图，一个盒模型包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）。

1.content

内容,元素真实内容所占的区域,可以显示文本或者是图像；width，height，min-width，max-width等就是控制content的大小。将盒模型比作人，那么content就是人的身体.

我们平时给元素设置的width和height其实就是content的宽和高，如果指定高度大于显示内容所需高度，多余的高度会产生类似内边距一样的效果；

如果指定高度小于显示内容所需高度，会出现滚动条。如果元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性。

应用:通过content属性值,可以控制元素的大小,通常单位为px,制作网页时,需要页面自适应大小时,也可以设置为百分比形式.

2.padding

内边距,包括有padding-left,padding-right,padding-top和padding-bottom。padding的大小就是人的肥胖程度，top和bottom是纵向高度，left和right是横向肥胖程度。

盒子的内边距是图中去掉内容周围的虚线区域，内边距是透明的，取值不能为负值，受盒子的Background属性影响，padding是有背景的(padding所带的背景是本身的而非父元素的）。

应用:调节在同一个盒子内的两个元素之间的距离.在一个盒子中属于内部,所以用padding.

3.border

边框,border相当于在人身体外 包裹一层内容，内容的厚度可以控制。

盒子的边框,是围绕元素内容的内边距的一条或多条线。边框是由粗细、样式和颜色三部分组成。

应用:给内容设置边框

4.margin

外边框,包括margin-top,margin-bottom,margin-left,margin-right。margin的大小就是人外面的衣服，margin越大,衣服越多。

盒子的外边距,在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景。margin经常取负值实现定位的作用。

外边距还有一个合并的问题，简单来说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于  两个发生合并的外边距的高度中的较大的。

应用:常用来设置外部元素之间的距离或不在同一个box的元素之间的距离