CSS-盒子模型

 由来：

        在网页布局中，为了能够在纷繁复杂的各个部分合理地进行组织，这个领域的一些研究者对它的本质进行充分研究后，总结了一套完整的原则与规范。这就是“盒子模型”的由来。

        所有网页中的元素都可以看成一个盒子，占据着一定的页面空间。可以通过调整盒子模型的边框和距离等参数，来调节盒子的位置和大小。在CSS中一个独立的盒子模型由Conternt(内容)、padding（内边距）、border（边框）和margin（外边距）4部分组成。

原理：

      先说说我们在网页:内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点：
想象一个盒子，它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;
让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容(content)，都包括四个部分:上下左右;这四部分可同时设置，也可分别设置;内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

结构：
内容(CONTENT)就是盒子里装的东西;
而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，每个HTML标记都可看作一个盒子;

1.内容区

       内容区是盒子模型的中心，它呈现了盒子的主要信息内部，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性width、height、和overflown.使用width和height属性可以指定盒子内容区的高度和宽度，其值可以是长度值或百分比值。

2.内边距

       内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。内边距的属性有五种，即padding-top,padding-bottom,padding-left、padding-right以及综合了以上四种方向的快捷内边距属性padding.使用这五种属性可以指定内容区与个方向边框间的距离。同时通过对盒子背景色属性的设置可以使内边距部分呈现相应的颜色，起到一定的变现效果。  

3.边框

       边框的属性有border-style、border-width和border-color以及综合了以上三类属性的快捷边框属性border。

4.外边距

      外边距位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。外边距使元素盒子之间不必紧凑的连接在一起，是CSS布局的一个重要手段。外边距的属性有五种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上四种方向的快捷外边距属性margin,其具体的设置和使用与内边距属性类似。

计算一个盒子

例如一个盒子模型如下：

margin:20px,  border:10px,   padding:10px;   width:200px;  height:50px;
如果用w3c盒子模型解释，这个盒子模型占用的
  宽度为：20*2+10*2+10*2+200=280px; 
  高度：20*2+10*2+20*2+50=130px;
  盒子的实际宽度大小为:10*2+10*2+200=240px;
  盒子的实际高度：10*2+10*2+50=90px;
  用ie的盒子模型解释 ：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;
  盒子的实际大小为：宽度:200px, 高度:50px;