在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
记住，是所有的元素都可以看出一个盒子！
下图为一个CSS盒子模型的内部结构：
从CSS盒子模型中，我们可以看出，元素的宽度width和高度height是针对内容区而言的
说明：
只有块元素能设置width和height，行内元素无法设置width和height。
内边距padding，又常常称为“补白”，它指的是内容区到边框之间的那一部分。
padding 局部样式
从CSS盒子模型中，我们可以看出，内边距padding分为四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left。
可以使用padding属性来设置四个方向的内边距。书写4个值的时候，按照顺时针方向记忆就可以了。
margin
和padding类似
http://www.lvyestudy.com/les_cj/css_list.aspx