如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充padding，盒子本身有边框border，而盒子边框外和其他盒子之间，还有边界margin.
如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
图1 盒模型图解
填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。
CSS内定义的宽（width）和高（height），指的是填充以内的内容范围，因此一个元素：
实际宽度 = 左边界 左边框 左填充 内容宽度（width） 右填充 右边框 右边界
实际高度 = 上边界 上边框 上填充 内容高度（height） 下填充 下边框 下边界
例如有CSS定义如下：
#menu { background: #9cf; margin: 20px; border: 10px solid #039; padding: 40px; width: 200px; }
则其实际宽度如图2所示。
图2 元素总宽度的计算
而对于Windows IE 5.x及更前的版本，把这个盒模型的定义搞错了，它认为：
宽度（width）= 元素内容 填充 边框
这个确实很容易搞错，很多对于盒模型定义没有深入了解的人也同样容易犯这个错误。例如：
#menu { width: 200px; padding: 5px; border: 1px solid #ccc; }
