第三章盒模型

3.6  盒模型

1、盒模型的基本概念

在CSS中，为了方便设置元素的CSS属性和实现相应的布局，浏览器首要任务就是判定元素大小。

CSS中的一个基本概念就是盒模型，所谓盒模型就是把HTML页面中的元素看作是一个矩形区域，即元素的盒子。

如下图所示，一个元素盒子是由margin（外边距）、border（边框）、padding（内边距）、content（内容区域）四部分组成。

与这四部分对应的CSS属性分别是：

（1）内容区域，即真正包含元素内容的区域，它通过width和height属性进行设置。

（2）内边距，即内容与边框间的空白区域，它通过padding属性进行设置，可分别设置4个方向的内边距。

（3）边框，就是指元素边框，它通过border属性进行设置，可分别设置4个方向的边框。

（4）外边距，即相邻盒子间的空白区域，它通过margin属性进行设置，也可分别设置4个方向的外边距。

在标准盒模型下（即box-sizing取值为border-content），盒子实际大小的计算公式如下：

    盒子实际大小 = content + padding + border + margin

在CSS3中，如果box-sizing取值为border-box时，整个盒子实际大小就是所设置的宽和高，那么内容的宽度=width - (padding-left + padding-right) - (border-left + border-right)，内容的高度=height - (padding-top + padding-bottom) - (border-top + boder-bottom)。

除此之外还有IE盒模型，但只会出现在IE6和IE怪异模式下。

2、多盒子边距合并问题

网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象，具体如下：

（1）上下相邻的块元素垂直外边距合并，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。如下图所示。

  （2）嵌套块级元素的垂直外边距合并，父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。