web前端复习系列[4]——布局模型

在网页中，元素有三种布局模型：
|---- 1、流动模型（Flow） —— 默认的网页布局模式
    |---- 特点一：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
    |---- 特点一：在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
|---- 2、浮动模型 (Float) —— 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动
|---- 3、层模型（Layer）——CSS定义了一组定位（positioning）属性来支持层布局模型。
    |---- ①绝对定位(position: absolute)
    |---- ②相对定位(position: relative)
    |---- ③固定定位(position: fixed)

【应用】Relative与Absolute组合使用
要实现一个元素相对参考元素进行定位，要进行以下两步：
①将前辈元素position改为：relative
②将要定位的元素position改为：absolute + 定位值。