CSS盒模型

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素中心有一个内容区（content area）。这个内容区周围有可选的内边距、边框和外边距。这些项是可选的，以为他们的宽度可以设置为0，实际上这就是从元素框去除了这些项。

CSS盒模型图列：



可以用多种属性设置各外边距、边距和内边距，如margin-left或border-bottom。内容的背景也会应用到内边距。外边距通常是透明的，从中尅看到父元素的背景。内边距不能是负值，但外边距可以。

边框使用已定义的样式生成，如solid或inset，边框的颜色使用border-color属性设置。如果没有设置颜色，那么边框将取元素内容的前景色。如果没有显示地声明另外一种边框色，那么，边框与内边距和内容有相同的背景。边框的宽度绝对不能为负。

每个盒子都有：边界、边框、填充、内容四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

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

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

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

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