css 布局模型

在CSS中，有三种布局模型，分别为：流动模型，浮动模型，层模型。

1. 流动模型（Flow）

流动模型为网页默认的布局模式。

其中两个比较典型的特征：

a. 块状元素都占满一行，垂直分布下来，宽度默认都为100%。

b. 行内元素从左向右水平分布。

2. 浮动模型（Float）

可为元素定义浮动模型：

float: left; //向左浮动    float: right; //向右浮动

为元素（div）定义浮动模型后，相应的元素，如块状元素将不会独自占一行，元素将会根据相应的大小，水平分布。（此种方法通常可用于解决多个div并列分布的效果）

3. 层模型（Layer）

层模型有三种形式：

a. 绝对定位（position: absolute）

b. 相对定位（position: relative）

c. 固定定位（position: fixed）

其中，关于绝对定位跟相对定位的配合使用（博主一开始学习到这个点的时候很是懵逼啊~）

如果元素的父元素等没有相应相对定位设置，则元素会相对于html绝对定位，当将元素的父元素设置了相对定位之后，对元素设置绝对定位后，该元素的绝对定位将相对于此父元素。（即相对于最近的父元素）

其中该子元素的绝对定位，可通过设置top, bottom, left, right进行相应的设置。

如：

<div id = "father">
    <div id = "child">子元素</div>
</div>


#father{
    position: relative;
}
#child{
    position: absolute;
    top: 20px;  //距离父元素顶部20px
    left: 10px; // 距离父元素左部10px
}

当设置多个子元素绝对定位时，可以再设置元素的z-index属性，防止子元素在页面产生重叠。

而关于固定定位，则通常用来将元素设置成不随滚动条滚动的效果。