CSS布局模型

1.CSS的三种布局模型
①流动模型（Flow）
②浮动模型（Float）
③层模型（Layer）


2.流动模型
流动是网页默认的布局模式。
特征：
①块状元素在所处的包含元素内自上而下按顺序垂直延伸分部，块状要素的宽度都为100%。
②内联元素在所处的包含元素内从左到右水平分部显示。


3.浮动模型
浮动模型可以使两个块状要素并排显示。
比如要实现两个div并排显示，就这样：
div{
float:left; 设置两个div向左移动
float:right; 设置两个div向右移动
}


4.层模型
可以使html元素在网页中精确定位。层模型有三中形式：
①绝对定位(position:absolute)
②相对定位(position:relative)
③固定定位(position:fixed)


5.层模型-绝对定位

绝对定位是将元素从文档流中拖出来然后使用top，right，bottom，left四个属性，相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

如果不存在这样的包含块，则相对于html元素进行定位。

他的位置的真真正正发生了变化。

当一个元素设置绝对定位后，没有设置它的宽度，那么他的宽度是根据其内容扩展而扩展。

语法：

position:absolute;

举个例子：
div{
width:200px;

height:200px;

border:1px solid red;

position:absolute;

top:20px; 向下移动20px

right:20px;向左移动20px

bottom:20px:向上移动20px

left:20px; 向右移动20px
}
我给的汉语意思，不是我写错了，是真的是这样。你可以想象一下，你现在有个div，他是一个块状要素独占一行。他是在屏幕左上方的。

你现在要把他往下移动20px，其实就是div他的border和网页的顶端之间有20px的距离，那肯定是用top啊。其他的三个同理。

6.层模型-相对定位
他也是使用上右下左四个属性来变位置，和绝对定位不同的是，相对定位是在他移动了位置之后，他原来的所处的那个位置是不可以被其他元素占用的。
举个例子，就像是搬家，绝对定位这个人，搬家之后就真真正正搬走了，把原来的房拆了。其他人可以在那个地方干其他的。
而相对定位，他搬家之后，原来的房子他不拆，还在那放着，也不给别人用。也就是偏移前的位置保留不动。
语法：

position:relative;

7.层模型-固定定位
这个就很好理解了，效果我们都见过，就是有的时候打开一个网站，他在右下角有个广告框，不管你怎么拉动滚动条，他就一直在右下角。
就是用的这个。
当然还是用上右下左四个属性来变位置的。
语法：

position:fixed;

8.层模型-绝对定位和相对定位的组合使用
这个呢，就是在你想用绝对定位使一个元素相对于另外一个元素来定位的时候来使用。
举个例子：

我有一张图片，我现在要在这张图片下面加一段话来标注这个图片。

像这样的
这个其实就是用了两个div，一个div用来放照片，一个div用来写文字。然后进行一个嵌套，再在css里用ar组合来实现。
#box3{
    width:200px;
    height:200px;
    position:relative;       
}
#box4{
    width:99%;
    position:absolute;
    bottom:0;
}
<div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>


代码就是这样，因为你是把文字放在了图片中，所以要用图片的那个div来当文字的div的父元素。然后就是父元素的那个要写为relative，子元素的那个要写为absolute。


我还写了一个，像这样

粉色的是一个p标签
绿色的是一个span标签
代码是这样：
p{
    background:pink;
    position:relative;
}
span{
    background:green;
    position:absolute;
    left:145px;
}
<p>你说前半生就这样吧<span>还有明天</span></p>
虽然这样写出来不知道有什么用，但是很酷啊！