![css中的盒子模型]()
一、CSS盒子模型概述
本质上，css中的每个元素都被一个盒子所包围。这个盒子规定了元素框的处理，其中由中心向外扩展包括盒子的尺寸(宽和高：width和height)，内边距（padding）、边框（boader）和外边距（margin）。css盒子模型示意图如下所示：
![css中的盒子模型]()
二、CSS盒子模型的具体描述：
如示意图所示，盒子模型中由width和height规定的区域为实际的内容所能使用的区域；接着，直接包围内容的是
内边距（padding），内边距区域内可以显示盒子元素的背景颜色或者背景图片；与内边距接壤的边缘边框（boader）；边框以外是外边距（margin），外边距默认是透明的，即盒子的背景颜色或者背景图片在外边距不可见，它不会遮挡其后的任何元素，但是父元素的内容可透出来可视。
![css中的盒子模型]()
三、对CSS盒子模型的测试：
![css中的盒子模型]()
1、基本的HTML代码：
其中页面里简单的设置一个DIV块，将其作为测试的盒子对象，其中添加了一张200*200像素的图片作为DIV块的内容。
