CSS盒子模型的更深层次理解

----摘自百度百科

    网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

 原理：这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

 结构：内容（CONTENT）就是盒子里装的东西；
            而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
            边框(BORDER)就是盒子本身了；

            至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取 出。

            在网页设计上，内容常指文字、 图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒            子，否则盒子会被撑坏的，而 CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解 为生              活中盒子每个HTML标记都可看 作一个盒子；

----摘自http://www.108js.com/article/article8/80058.html?id=1766  博大精深

           所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容大。 可以通过调整盒子的边框和边距等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响。
          掌握盒子模型需要从两方面来理解：一是理解单个的盒子的内部结构；二是理解多个盒子之间的相互关系。

在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：

 内容(content)：对应盒内物品
    边框(border)：对应包装盒的纸壳，具有厚度
    填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分
    边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙

盒子之间的关系

   单独的一个盒子不难理解，实际上网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们之间以各种关系相互影响着。为了适应各种排版要求，CSS规范的思路是：首先确定一种标准的排版模式，这个就是“标准流”。
       但仅通过标准流方式，很多排版是无法实现的，CSS规范中又给出了另外几种对盒子进行布局的方法，包括“浮动”和“定位”等属性，对某些元素进行特殊排版。

     特殊说明

  border-color: 指定颜色。

    语法：
      border-color : color
    取值：
       color:指定颜色。附：CSS 颜色十六进制值表

    说明：
         (1)从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）：第1组为红色，第2组为绿色，第3组为蓝色。根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。
        (2)数值大颜色亮
        (3)十六进制值是成对重复的可以简写，效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。
        (4)红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000，要记住（上面所提到的都是饱和色）。