在網(wǎng)頁(yè)中，元素有三種布局模型：
1、流動(dòng)模型（Flow）
2、浮動(dòng)模型 (Float)
3、層模型（Layer）
流動(dòng)模型
流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式。流動(dòng)布局模型具有2個(gè)比較典型的特征：
1.塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。
在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素那樣占一行），如a、span、em、strong等標(biāo)簽
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流動(dòng)模型</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
#box2{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box2">box2</div>
<h1>標(biāo)題</h1><!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<div id="box1">box1</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>
效果：
浮動(dòng)模型
元素默認(rèn)情況下是從上往下排列，如果想要并排顯示，那么可以設(shè)置浮動(dòng)
如：
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
兩個(gè)div就會(huì)在左側(cè)并排顯示：
同理可以設(shè)置右側(cè)，可以設(shè)置一個(gè)左一個(gè)右
層模型
層模型：類似PS中的圖層，可以對(duì)每層進(jìn)行單獨(dú)處理，由于瀏覽器大小的活動(dòng)性，限制了層模型的運(yùn)用，不過(guò)在某些方面，還是很方便的
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3、固定定位(position: fixed)
- 層模型--絕對(duì)定位
絕對(duì)定位，需要設(shè)置position:absolute，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
代碼示例：
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
效果：
- 層模型--相對(duì)定位
既相對(duì)于之前位置的便宜量，需要設(shè)置position:relative，然后通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。
代碼示例：
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
效果：
注意：
假如上面div后面有跟一個(gè)< span>的文字標(biāo)簽，那么在設(shè)置偏移后，僅僅是< div>標(biāo)簽進(jìn)行了移動(dòng)，文字還是在原來(lái)未發(fā)生偏移的位置，就把這個(gè)偏移看作是障眼法，假的偏移，實(shí)際位置還是在原來(lái)的位置，這樣理解會(huì)簡(jiǎn)單點(diǎn)
- 層模型--固定定位
固定定位與絕對(duì)定位差不多，絕對(duì)定位是居于父包含塊，如果不存在父包含塊就居于瀏覽器，固定定位是直接居于瀏覽器
假如這么設(shè)定：
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
這樣的效果是無(wú)論放大縮小瀏覽器，都會(huì)在瀏覽器的右下角
