CSS盒子模型

在“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