在本人参与的众多项目中，不管是C/S系统，B/S系统，移动Moblie应用，还是WebAPP应用，发现都需要用到CSS盒模型（CSS BOX MODEL，针对这个英文的翻译会有所不同，本人觉得盒模型要合适些)；同时发现不管开发语言是C#,Java，PHP，HTML5等等，也都绕不开这个模型。所以我特意将这个作为产品设计的第1篇来讲解。
方法/步骤
1
针对CSS盒季祝牢模型的定义，参加w3school的定义；网址是http://www.w3school.com.cn/css/css_boxmodel.asp；新手刚看到有点晕，其实分解为4个关键点即可理解，第1个个是元素本身（也就是存放的内容，如textbox中的文字，label中的文字）；第2个是部件边框的宽度；第3个是元素相对部件的位置，使用的内边距；第4个是部件与部件之间的关系，就是外边距
2
针对第1点，参见下方，若存在一个label中的内容是一行字，字体大小是13px。此时存放的部件是长方形，若长方形的高度是13px，则此时字体正好布满长方形。若长方形的高度是6px；则字体的上下都会被截掉一些；若长方形的高度大于13px，则此时label会垂直居中显示。以这个具体例子，可以做如下的衍生，若一个textbox中包含了图片，则图片显示的范围取决于薪番图片的高度与textbox的高度的关系。
3
针对第2点，假设部件的宽度、政炼长度；且里面的元素都保持不变，只变化部件的宽度，则下图清晰地表达了不同边框宽度的影响。
注意事项
盒模型的理解比较难，可以使用Dreamweaver，zendstudio，wpf，webstorm等自己上手试试会更清楚