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：突起


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