盒子模型与定位

盒子模型（margin&padding）

margin是外边距，padding是内边距。margin变了，border和里面的content还有padding作为一个整体一起都动了。padding变了，border和外面的margin不动，就content动了。margin是块与块之间的距离，padding是单个块内内容与边框的距离。

浮动（float）定位（position）针对块级元素

float: left 向左浮动 ，right向右浮动。

position:absolute 绝对的，相对于第一个父元素进行定位；relative 相对的，相对于其正常位置进行定位；fixed 相对于浏览器窗口进行定位。

    浮动的意思就是让这个块浮出页面来，进入同一行，进行向左靠还是向右靠，而定位的含义是找个参照物进行定位。如果再写一个块，而不加float则会显示在前一个块的下面被盖住，这时需在块里写入clear:both清除浮动，这样这个块就会另起一行。

例：写两个宽高都为200px，一红一蓝的块。在红块里写float: left，蓝块不写的时候，蓝块就会被红块盖住，蓝块也写float: left的时候，那么红蓝块就会显示在同一行。

    相对定位（relative）和绝对定位（absolute）
相对定位是参照自己，绝对定位是参照上级或者是上上级，如果没有就参照body。如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用relative，计算的时候不要忘记padding的值。