网页设计：这是一个盒子的世界……
CSS盒子模型 示意图
“办公楼是盒子，办公室也是盒子，家也是盒子，中午吃的也是盒饭，车、电梯、文件、桌子、椅子、书等一切一切都是盒子，一个盒子套着一个盒子。因为，每个人都在一个又一个盒子里生存，移动，所以，人也变成了盒子。”
上面这段话来自张小盒漫画中对“为什么是盒子”的描述。
其实，在我们的世界远不止上面提到的那些盒子，在其他许多地方也充斥着盒子。就拿网页设计来说，其中的每个元素都是一个“长方形的盒子”，这也就是网页布局中常说的CSS盒子模型。
CSS 盒子模型：content(内容)+border(边框)+padding(内边距)+和margin(外边距)4个部分组成，如上图所示。
计算 CSS盒子模型宽度=内容+内边距+边框+外边距
计算 CSS盒子模型高度=内容+内边距+边框+外边距
盒子中content(内容)所占的矩形大小=CSS 中设定的width和height的值
下面两个视频来自《CSS设计彻底研究》，其中对盒子模型进行了透彻的讲解。
