css的盒子模型

在html中，一块内容，就是像一个盒子一样，所以在css（层叠样式表）中，控制样式的时候，充分用到了这个模型。

盒子模型由四部分构成，里面的内容，内容外边的内边距（padding，又叫填充），内边距外边的边框（border），以及边框外边的外边距（margin）。这就像一个盒子在装东西一样，他们的位置是这样固定的。内容只可以将盒子撑大，却不会将盒子撑坏了。

盒子的各个部分都可以为0，比如，内容为零的时候，应用就比较广泛了。在一个span标签中，本身就是一个盒子，如果他的内容为0，那么可以利用给边框赋予不同的值来做出下拉三角。

定义一个斜角：

span{

height:0;

width:0;

border-bottem:solid6px#C00;

border-left:solid6px#fff;

position:absolute;

top:0;

left:0;

overflow:hidden;

}

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

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

盒子模型的border有好多种类型：

none:无

dotted:点线式

dashed:破折线式

solid：直线式

double：双线式

groove：槽线式

insert：内嵌式

outset：突起

对于盒子模型，每一个属性都有四个位置，所以指定值的时候也有不同的指定方法：

指定两个值的时候：第一个值指上下，第二个值指左右

指定三个值的时候：第一个值指上，第二个值指左右，第三个值指下

指定四个值的时候：四个值分别指上、右、下、左