Css布局模型

布局模型是建立在盒模型基础之上。

CSS包含三种基本布局模型

1. 流动模型（Flow）

2. 浮动模型（Float）

3. 层模型（Layer）

---

流动模型（Flow）

首先流动模型是默认的网页布局模型.

块状元素都会在所处的包含元素内自上而下按顺序垂直分布，在默认的情况下，块状元素的宽度为100%，所以都是占据一行的。

内联元素都会在所处的包含元素内从左到右水平分布显示

---

浮动模型（Float）

使用浮动模型可以使达到并排的效果。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{

width:200px;

height:200px;

border:2px red solid;

float:left;                 //靠左边一行显示

}效果如下：

还可以float:right，如果需要两个元素一左一右的话，则分别设置 left与right

---

层模型（Layer）

让html元素在网页中精确定位，css定义了一组定位属性来支持层布局模型。

1. 绝对定位（position：absolute）

2. 相对定位（position：relative）

3. 固定定位（position：fixed）

---

绝对定位

需要设置position:absolute来表示绝对定位，在配合left，right，top，bottom来定位，他需要父类块进行参考，如果不存在这个，就相对于body元素，即浏览器窗口

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

效果如下：

---

层模型--------相对定位

想为元素设置层模型中的相对定位，需要设置position:relative,他是通过left，right.....来确定元素在正常文档中的偏移位置，相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

---

层模型--------固定定位

fixed表示固定定位，他可以一直固定在浏览器的某个地方（无视浏览器大小的变化，哪怕向下滚动他还是固定在那里）帮助理解：比如说网页中的广告一直固定在右下角

右下角广告固定：如下

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

position:fixed;

bottom:0;

right:0;

}

---

Relative和Absolute组合使用

要满足以下条件：

1. 参照定位的元素必须是相对定位元素的前辈元素（父类元素）

2. 参照定位的元素必须加入position:relative

3. 定位元素加入absolute配合top等等

---