盒模型(Box Model)详解

CSS 框模型 (Box Model) 规定了元素框处理元素外边距（margin）、边框（border）、内边距（padding）、内容（content）的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的，默认值是零。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

DIV实际宽度=width+2*内边距+2*外边距+2*边框，这就使得实际的div所占宽度比设计时大。
我们可以通过设置CSS box-sizing属性，来避免内边距和边框对于div的影响。
根据浏览器的不同，有三种写法：分别是
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

原文链接http://www.daimatree.com/dll_website/dll_showHTML.php?html_url=css_box_model