CSS盒模型详解

一、盒模型简介

盒模型是CSS的基石之一，页面上的每个元素都可以看做一个矩形框，这个框由内容、内边距、边框和外边距组成。如下图所示：

                                                          

内边距、边框和外边距都是可选的，默认值为零。但是许多浏览器为元素设置了外边距和内边距，可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。例如

*{
	margin: 0;
	padding: 0;
}

现在也有一些流行的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。例如：

1、reset.css，地址：http://meyerweb.com/eric/tools/css/reset/

2、Normalize.css，地址：http://yuilibrary.com/yui/docs/cssnormalize/

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

例外，内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距还可以是负边距。

但是IE的早期版本，包括IE6，在混杂模式中使用自己的非标准盒模型，这些浏览器的宽度是内容。内边距和边框的宽度总和。

另外css3的box-sizing属性可以定义要使用哪种盒模型。

二、外边距叠加

当两个元素的垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大值。如下图所示：

   叠加之前                                                                                叠加之后

                                                                                                        

当一个元素包含在另一个元素中时（假设没有内边距或边框将外边距分隔开），它们的顶和或底外边距也会发生叠加。

注意：只有普通文本流中块框的垂直底外边距才会发生底外边距叠加。行内框、浮动框和绝对定位框之间的外边距不会发生叠加。