CSS------布局模型

CSS布局模型是建立在盒模型基础之上的
CSS包含三种基本的布局模型，分别是：

1.Flow（流动模型）
2.Layer（浮动模型）
3.Float（层模型）

一、流动模型

流动模型是默认的网页布局模式，也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的

流动布局模型的特征:

1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在
  默认状态下，块状元素的高度都为100%，实际上，块状元素都会以行的形式占据位置
2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示

二、浮动模型

块状元素都是霸道的独占一行，浮动模型可以让两个块状元素并排显示
ps：任何元素在默认的情况下都是不能浮动的，但可以用CSS定义浮动，如div、p、table、img等元素都可以被定义为浮动

用法： float
例如：
（1）把两个div标签显示到一行（靠向左边）
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>


（2）把两个div标签显示到一行（靠向右边）
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}
<div id="div1"></div>
<div id="div2"></div>


（3）把div1标签放到左边，div2标签放到右边
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
#div1{float:left;}
#div2{float:right;}
<div id="div1"></div>
<div id="div2"></div>

三、层模型

作用：可精确的定位到每个html元素

1.层模型有三种定位方式：

（1）绝对定位
（2）相对定位
（3）固定定位

2.绝对定位

需要设置position:absolute(表示绝对定位），这条语句的作用是将元素从文档流中
拖出来，然后使用left、right、top、bottom属性相对其最接近的一个具有定位属性
的父亲包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于
浏览器窗口

用法：position：absolute
例如：把div元素相对于浏览器窗口向右移动100px，向下移动50px
div{
width:200px;
height:200px;
border:2px  red  solid;
position:absolute;
left:100px;
top:50px;
}
<div>文本</div>

3.相对定位

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


例如：
把div元素相对于以前的位置向下移动50px，向右移动100px
#div1{
width:200px;
height:200px;
border:2px  red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>

4.固定定位

fixed:表示固定定位，与absolute定位类型相似，但它的相对移动的坐标是视图（屏
幕内的网页窗口）本身。由于视图本身是固定的，他不会随浏览器窗口的滚动而变化，除
非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位
的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响


用法----position：fixed
例如：
以下实现相对于浏览器视图向右移动100px，向下移动50px，并且拖动滚条时位置
固定不变
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

5.relative和absolute的混合使用

position：absolute可以实现被设置元素相对于浏览器（body）设置定位，但是加上
position：relative就可以实现相对于其他元素的定位了

一起组合的规范：

（1）参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）

（2）参照定位的元素必须加入position:relative；
#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3.定位元素加入position:absolute,便可以使用top、bottom、
left、right来进行偏移定位了
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是
浏览器了，而可以自由设置了）

这三个要求总结来说就是：参照定位的元素必须是相对定位元素的前辈元素（例如父元素）、参照定位的元素（就是第一个要求说的前辈元素）必须加入position:relative和定位元素加入position:absolute