css的盒子模型

    在html中，一块内容，就是像一个盒子一样，所以在css（层叠样式表）中，控制样式的时候，充分用到了这个模型。
    盒子模型由四部分构成，里面的内容，内容外边的内边距（padding，又叫填充），内边距外边的边框（border），以及边框外边的外边距（margin）。这就像一个盒子在装东西一样，他们的位置是这样固定的。内容只可以将盒子撑大，却不会将盒子撑坏了。
    盒子的各个部分都可以为0，比如，内容为零的时候，应用就比较广泛了。在一个span标签中，本身就是一个盒子，如果他的内容为0，那么可以利用给边框赋予不同的值来做出下拉三角。

    定义一个斜角：
    span{
        height:0;
        width:0;
        border-bottem:solid 6px #C00;
        border-left:solid 6px #fff;
        position:absolute;
        top:0;
        left:0;
        overflow:hidden;
    }


    此外，设置border的上下和左右颜色值不同，可以形成视觉差效果，以及给四个边框赋不同的相邻颜色值可以产生凹陷效果。


     在盒子模型中，会有一种特殊的现象，叫做“塌陷”，这个意思就是，相邻的两个块之间的数直距离只有margin-bottem与margin-top中较大的那个数值。


     盒子模型的border有好多种类型：
      none:无
      dotted:点线式
      dashed:破折线式
      solid：直线式
      double：双线式
      groove：槽线式
      insert：内嵌式
      outset：突起


     对于盒子模型，每一个属性都有四个位置，所以指定值的时候也有不同的指定方法：
           指定两个值的时候：第一个值指上下，第二个值指左右
           指定三个值的时候：第一个值指上，第二个值指左右，第三个值指下
           指定四个值的时候：四个值分别指上、右、下、左