CSS盒子模型

 

可以把它想像成现实中上方开口的盒子， 然后从正上往下俯视， 边框相当于盒子的
厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，
边界呢相当于在这个盒子周围要留出一定的空间， 方便取出。是不是这样就很容易理解盒模
型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右
边框+右边界组成，而 css样式中 width所定义的宽度仅仅是内容部分的宽度，这是许多
朋友容易搞混的地方。
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁