css盒子模型

css盒子模型
盒子的标准流

块级元素：与同级的兄弟依次竖直排列，左右撑满。如<div>
行级元素：横向排列，到最右端自动折行。如<span>

盒子定位：margin用于指定盒子之间的距离。
行元素之间的距离为：margin right+margin left
块元素之间的距离为：max(margin bottom,margin top)即两者之间的最大值。

嵌套盒子之间的margin：
在一个<div>之中包含另一个<div>
一个块级元素的盒子水平方向的宽度会自动延伸至上一级盒子的限制。
高度方向自动收缩到能够包容下内容的最小高度。
宽和高的自动伸缩都是在没有设定width和height的情况下的表现。
如果设定width和height，则盒子的实际宽度和高度都会按照实际值来确定。盒子的实际大小width(height)+padding+border+margin

IE中如果父容器的高度值小于子容器的高度加上margin值,父容器会自动扩大。

margin的属性设为负值时，会使块向相反的方向移动，甚至覆盖在另外的块上。

盒子的浮动与定位

在标准流中，一个块级元素在水平方向会自动伸展直到包含它的元素的边界，而在竖直的方向和兄弟元素依次排列，不能并排。使用浮动后，会有所不同。
css中有一个float属性，默认为none，也就是使用标准流的情况。
如果将float属性，设定为left或right，元素会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。