---恢复内容开始---
在清楚了CSS盒模型的基本概念，盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是CSS最基本，最核心的概念。但布局模型是建立在盒型基础之上，又不同于我们常说的CSS布局样式或CSS布模板。如果说布局模型是本，那么CSS布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer、Float。
在网页中，元素有三种布局模型：
1，流动模型（Flow）
2，浮动模型（Float）
3，层模型（Layer）
一、流动模型
流动是默认的网页布局模式。也就是说见面在默认状态下的HTML网页元素都是根据流动模型分布网页内容的。
流动布局模型具有2个比较典型的特征：
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。
2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示.
二、浮动模型
在流动模型中，块状元素是自上而下的，那么有什么方法可以让块状元素并排呢，这就需要使用CSS样式。
如下代码：
<html>
<head><style>
div{
width:200px;
height:200px;
border:1px red solid;
float:left;
}</style>
</head>
<body>
<div><p>123</p></div>
</body>
</html>
此代码将div标签从左到右显示，那么，如何从右向左或者一左一右呢？
那么我们应当改写代码：float:right
层模型:
在讲层模型前,先问个问题,什么是层布局模型?层布局模型就像是图像软件PS中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网页上局部使用层布局还是有其方便之处的.下面我们来学习一下html中的层布局.
如何让html元素在网页中精确定们,就像图像软件PS中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)忏悔来支持层布模型.
层模型有三种形式:
1.绝对定位(position:absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left,top,right,bottom属性相对于其最接近的一个具有定位属性的你包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口.
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px.
<html>
<head>
<style>
div{
width:200px;
height:200px;
border:2px red dashed;
position:absolute;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.相对定位(position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程是首先按static(float)方式生成了一个元素(并且元素像层一样浮动了起来,然后相对于以前的位置移动,移动的方向和幅度由left,right,top,bottom属性确定,偏移的位置保留不动.
如下代码实现相对于以前位置向下移动50px,向右移动100px.
<html>
<head>
<style>
#div1{
width:200px;
height:200px;
border:2px red solip;
position:relative;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
什么叫做"偏移前的位置保留不动"呢?
大家可以做一个实验,在右侧代码编辑器的19行div标签的后面加入一个span标签,在标并在span标签中写入一些文字.如下代码:
<body>
<div id="div1"></div><span>123</span>
</body>
我们发现,虽然div元素相对于以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以后面的span元素是显示在了div元素以前位置的后面.
3.固定定位(position:flxed)
fixed:表示固定定位，与absolute定位类型类似，但他的相对移动人坐标是视图本身。由于视图本身是固定的，他不会随你浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动的影响，这与background-attachment:fixed;属性相同，以下文档可以实现对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变
<html>
<head>
<style>
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
position:absolute and position:relative差别
absolute是指绝对的，不受控件的影响，而relative却是相对的，随着控件的变化而变化。若是想要把relative和absolute相互结合也是可以的，如下代码：
<html>
<head>
<style>
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
}
#div2{
width:200px;
height:200px;
border:2px red solid;
position:relative;bottom:0px;
}
</style>
</head>
<body>
<div id="div1">123</div>
<div id="div2">123</div>
</body>
</html>
这样的话div2就在div1底部的上方了。
来源：https://www.cnblogs.com/yuhailong/p/5971146.html