css盒子模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。



内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；

边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

盒子的高度 = content的高度(height) + padding-top(内上边距)+ padding-bottom(内下边距) + border-top(上边框边框)+ border-bottom(下边框)

盒子的宽度 = content的宽度(width)+padding-left(内左边距)+padding-right(内右边距)+border-left(左边框)+border-right(右边框)

参考：http://baike.baidu.com/link?url=RZXq6J5M-CldbgytY5LbmcFthk6y-a4pKm3fhBERv0lGJtUg1zPDdhjbOB22FB3K0Bo6LXuw65NjE9QIlAeo7n3PgIxXNS_RQQnOyPy31BqY5lkGHegBZxZbym477qhx