初识Box Model

盒模型（box model）顾名思义，指将HTML元素看作一个盒子进行设置，这对于页面的布局与排版极为便利。

盒模型理解起来并不困难。设置盒模型的属性可以看作为元素分配领地，以一个<p> 元素为例：

padding指的是p元素的内边距，即content与border的距离，默认情况下border紧贴在content的四周，一旦padding有了数值，比如20px。content的四条边与其所对应border的四条边，距离都会变为20px;

brder上面已经提到，指包围内容的边框，它的宽度（width）,颜色（color）,样式(style)都可以设置，十分灵活。

margin指外边距，这如何理解呢？
我们可以想象在border外部还有一个边框，这个边框紧贴border，它和border的区别是—它永远是透明的。一旦margin有了数值如50px，他的四条边会分别于border的四条边相距50px.

至此，一个元素的领地分配完成。网页正是靠着一个又一个元素的领地排列在一起，完成了巧妙的布局。