CSS学习<7>

一、CSS框模型概述

CSS框模型（box model）规定了元素处理元素内容、内边距、边框、外边距的方式。

框模型图

元素框的最内部分是内容，直接包围内容是内边距。内边距呈现了元素的背景，内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于内容、内边距和边框组成的区域。

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框、外边距不会影响内容区域的尺寸。但是会增加元素框的总尺寸。

二、CSS内边距属性

三、CSS边框属性

四、CSS外边距

围绕在元素边框的空白区域就是外边距。设置外边距会在元素外创建额外的空白。

设置外边距最简单的方法就是使用margin属性。

五、外边距合并

外边距合并指的是：当两个垂直外边距相遇时，他们将形成一个外边距。（注意此合并只针对于垂直方向）

合并后的外边距高度等于两个发生合并的高度中的最大高度者。

外边距合并的目的在于：