要掌握的三个最重要的CSS概念是浮动、定位和框模型。这些概念控制在页面上安排和显示元素的方式，形成CSS的基本布局。如果你习惯于用表格控制布局，那么这些概念初看上去可能有点儿奇怪。实际上，大多数人只有在使用CSS开发站点一段时间之后，才能完全掌握框模型的复杂性、绝对定位和相对定位之间的差异以及浮动和清理的实际工作方式。在切实掌握这些概念之后，使用CSS开发站点就会变得容易多了。
在本章中，你将学习：
□ 框模型的复杂性和特性。
□ 如何以及为什么使用空白边叠加。
□ 绝对定位和相对定位之间的差异。
□ 浮动和清理是如何工作的。
2.1 框模型概述
框模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。页面上的每个元素被看做一个矩形框，这个框由元素的内容、填充、边框和空白边组成（见图2-1）。
填充出现在内容区域的周围。如果在元素上添加背景，那么背景会应用于由内容和填充组成的区域。因此，常常使用填充在内容周围创建一个隔离带，使内容不会与背景混在一起。添加边框会在填充的区域外边加一条线。这些线可以有多种样式，比如实线、虚线或点线。在边框外边是空白边。空白边是透明的。一般使用它控制元素之间的间隔。
图2-1 框模型的示意图
填充、边框和空白边都是可选的，默认值为零。但是，许多元素将由用户代理样式表设置空白边和填充。可以通过将元素的margin或padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
*{
margin:0;
padding:0;
}
在CSS中，width和height指的是内容区域的宽度和高度。增加填充、边框和空白边不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有10像素的空白边和5像素的填充，如果希望这个框达到100像素宽，就需要将内容的宽度设置为70像素（见图2-2）：
图2-2 正确的框模型
#mybox {
margin:10px;
padding:5px;
width:70px;
}
填充、边框和空白边可以应用于一个元素的所有边，也可以应用于单独的边。空白边还可以是负值，并且在多种技术中都要使用负值的空白边。
购买《精通CSS:高级Web标准解决方案》：http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414