html盒子模型

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，
CSS盒子模式都具备这些属性。


CSS盒子模式

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

关于margin:

CSS中：margin:auto与margin: 0 auto;有什么区别:

首先你要知道,margin后面是有4个参数的。例如：margin:1px 1px 1px 1px

分别表示 上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px,那么着是代表 上下都为1px 左右都为2px.

至于居中，很明显，margin:0 auto 是标准的写法.

看下css手册，margin后跟四个参数：top right bottom left 还可简写为两个参数 即为 上下 左右 也可以设置一个参数 这样就代表设置这四个选项了，解释下margin: 0 auto；0为上下外间距为0px auto代表左右自动适应。