css盒子模型

    虽然知道盒子模型，但让我用语言解释出来，还不知道从何说起。今天就来好好的看看这个盒子模型。盒模型是作为前端页面布局的一个基础也是很重要的一个部分，因此了解它是最基本的。盒状模型是CSS中重要的概念。虽然CSS中没有盒状模型这个属性，但它却是CSS中无处不在的，盒装模型是由margin、border、padding和content几个属性组合形成的。说通俗一点就和我们日常生活中的箱子一样，所以我们叫它为盒子模型。

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

       每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

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

        padding设置的是内容到边框之间的距离，就像一个缓冲带。 border设置内容的边框线粗线和样式等。 margin设置的是一块内容与另一块内容之间的距离。  使用css定义盒状模型时，我们设置的宽度和高度，只是设置了内容（content）区块的高度和宽度，而不是内容、内边距、边框和外边距的总和。  如果给盒状模型定义背景，定义后背景将在内容（content）区域和内边距（padding）区域显示，就是图上的蓝色区域，外边框是无法设置背景的。  从盒状模型的四个构成属性看，一个盒状模型的尺寸应该把这四方面尺寸全部合起来计算：  盒状模型宽度=左margin宽度+左border宽度+左padding宽度+content宽度+右padding宽度+右border宽度+右margin宽度  高度的计算方法和宽度计算方法相同，只要把左、右改为上、下即可。

 

 

上面那个图清楚的给我们画出了盒模型。

 Border和content就不用细说，一个是边框，另一个是具体内容。下面主要来看看，margin和padding.

1.                Margin: 包括margin-top, margin-right, margin-bottom,margin-left, 控制块级元素之间的距离, 它们是透明不可见的.代码如下（30是举例的）：

margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;

         上面的代码我们可以简写成：margin:30px；

为便于记忆, 我们可看下图:

这个是根据上, 右, 下, 左的顺时针规则。如果要分别设置它的属性我们这样写：

 Margin:30px 20px, 这样就是上下为30px,左右为20px;

Margin:10px20px 30px 40px 这样就是分别设置上，右，下，左了;

Margin:30px;这样就是4个方向都是30px.

2.                 Padding: 包括padding-top, padding-right,padding-bottom, padding-left, 控制块级元素内部,content与border之间的距离, 其代码, 简写请参考margin属性的写法.