关于CSS盒子模型的几点看法

1、盒子模型的height和width属性，指的是content区的高和宽，而不是整个盒子的。
2、div为块级元素，span为行级元素。
3、行内元素之间的水平距离为左元素的右margin和右元素的左margin之和。
4、块元素之间的竖直距离为上元素的下margin和下元素的上margin的最大值。
5、设置了float属性的块级元素脱离标准流，其下方的块级元素会占领其原来的位置，只是下方块级元素中的文字会被该块挤开，形成一个文字环绕该块效果。如果想清除浮动的影响，设置clear属性，该属性有3个值：left、both、right。
6、如果一个父类盒子中所有子类盒子均设置为浮动（float），该父盒子的高度几乎为零，如果想让父盒子的告诉何内部子盒子的高度自适应，在父盒子内部的下方添加一个div，设置其CSS属性为{clear:both;margin:0;padding:0}
7、盒子的定位，position属性的取值有四个。

   static:盒子按标准流进行布局。

   relative:相对定位，盒子相对原来标准位置偏移指定距离，相对盒子仍在标准流中，其后的盒子仍以标准方式对待他，就像他还在原处。

   absolute:绝对定位，相对其设置了postion属性的父类包含框进行定位，如父类没有设置该属性，则以浏览器窗口为基准进行定位，绝对定位的盒子脱离标准流，对其后的盒子无影响，就好像不存在一样。

  fixed：固定定位，总是以浏览器窗口为基准进行定位。

8、盒子的display属性：inline、block、none

 

参考视频：http://learning.artech.cn/category/css-research/box-model