网站建设——盒子模型的概念

熟练掌握Div和CSS的布局方法，首先要对盒模型有足够的了解。盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正地布局网页中各个元素的位置。

所有页面中的元素都可以看作是一个装了东西的盒子，盒子里的东西到盒子的边框之间的距离即填充( padding),盒子外边框和其他盒子之间的距离，即边界( margin)。个盒子由4个独立部分组成。第一部分是最外面的边界( margin);第二部分是边框( border),边框可以有不同的样式；第三部分是填充( padding),填充用来定义内容区域与边框( border)之间的空白；第四部分是内容区域。

填充、边框和边界都分为【上、右、下、左】4个方向，既可以分别定义，也可以统一定义。当使用CSS定义盒子的宽度和高度时，定义的并不是内容区域、填充、边框和边界所占的总区域，而是内容区域( content)的宽度和高度。为了计算盒子所占的实际区域必须加上填充、边框和边界。