CSS布局总结

css布局模型有三种，分别为流动模型（Flow）、浮动模型和层模型。

流动模型
    - 为默认模型，当未设置其他模型时使用。
    - 块状元素在包含其的父元素内部，从上到下顺序排列，每个一行（设置宽度时按设置的宽度显示）。
    - 内联元素和内联块状元素都会在包含其的元素内从左到右水平顺序显示。
    - 无法通过设置left、right、top和bottom来确定位置。
    - 可通过设置margin及padding来确定位置。


浮动模型
     - 使用"float:left;"和"float:right;"设置。
     - 可使块状元素、内联元素和内联块状元素都浮于一行。


层模型
通过设置left、right、top和bottom来确定位置。
-绝对定位
        "position: absolute;"
        距离是相对于包含其的有定位属性的祖先元素的相对距离。
        最“祖先”可追溯至body元素。表现为相对于浏览器窗口的距离。
- 相对定位
        "position: relative;"
        距离是相对于该元素原来在流动模型中的位置。（且流动模型仍为其保留位置）
- 固定定位
        "position: fixed;"
        距离是相对于屏幕内页面窗口视图的距离。（即滚动鼠标，在窗口中位置不变）