CSS布局模型
CSS包含3種基本的布局模型，用英文概括為：Flow总滩、Layer 和 Float纲堵。
在網(wǎng)頁中，元素有三種布局模型：
1闰渔、流動模型（Flow）
2席函、浮動模型 (Float)
3、層模型（Layer）
流動（Flow）是默認(rèn)的網(wǎng)頁布局模式冈涧。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的茂附。
流動布局（網(wǎng)頁默認(rèn)方式）模型具有2個比較典型的特征：
第一點正蛙，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認(rèn)狀態(tài)下营曼，塊狀元素的寬度都為100%乒验。實際上，塊狀元素都會以行的形式占據(jù)位置溶推。如右側(cè)代碼編輯器中三個塊狀元素標(biāo)簽(div徊件，h1，p)寬度顯示為100%蒜危。
第二點虱痕，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示辐赞。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行）
float為左對齊部翘，右對齊，（注意要想讓兩個div框一行顯示响委，要保證浮動距離小于容器的寬度新思，容器的寬度隨時變化的，否則放不下的移到下一行）
層模型有三種形式：（層模型顯示更精確的位置）
1赘风、絕對定位(position: absolute)
2夹囚、相對定位(position: relative)
3、固定定位(position: fixed)
1
2
3
4
5
6
7 div{
8? ? width:200px;
9? ? height:200px;
10? ? border:2px red solid;
11? ? position:absolute;
12? ? right:100px;
13? ? top:20px;
14
15
16 }
17
18
19
20
21
22
fixed：表示固定定位邀窃，與absolute定位類型類似荸哟，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的瞬捕，它不會隨瀏覽器窗口的滾動條滾動而變化鞍历，
absolute:絕對定位{需要設(shè)置position:absolutc(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來肪虎，然后使用”left? ? right? ? top? ? bottom屬性相對于其最近的一個具有定位屬性的父包含進(jìn)行絕對定位劣砍。如果不存在這樣的包含塊，則相對body元素扇救，即相對于瀏覽器窗口刑枝。
relative：相對定位{? ? 如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative(表示相對定位)迅腔，他通過left? ? right? ? top? ? bottom? ? 屬性確定元素在正常文檔流中的偏移位置装畅。相對定位完成的過程是首先按static（float）方式生成一個元素（并且元素像層一樣浮動了起來），然后相對于以前的位置移動钾挟，移動的方向和幅度有l(wèi)eft? ? right? ? top bottom 屬性確定洁灵，偏移前的位置保留不動。
fixed：固定定位{? ? 表示固定定位，與absolute定位類型類似徽千，但他的相對移動的坐標(biāo)視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身苫费。由于視圖本身是固定的，他不會隨瀏覽器窗口的滾動而變化双抽，除非你在屏幕中移動瀏覽器窗口的屏幕位置百框，或改變?yōu)g覽器窗口的顯示大小，因此固定的點位的元素會始終定位于瀏覽器的某個窗口內(nèi)視圖的某個位置牍汹，不會受某文檔流影響铐维。
relative和absolute混用：
1標(biāo)簽相對于2標(biāo)簽，則2標(biāo)簽設(shè)置為relative樣式慎菲，1標(biāo)簽設(shè)置為absolute樣式嫁蛇，并且在1標(biāo)簽中改變相對于2標(biāo)簽的距離
1
2
3
4
5
6
7 div{border:2px red solid;}
8 #box1{
9? ? width:200px;
10? ? height:200px;
11? ? position:relative;
12
13 }
14 #box2{
15? ? ? position:absolute;
16? ? top:20px;
17? ? left:30px;
18
19 }
20 /*下面是任務(wù)部分*/
21 #box3{
22? ? width:200px;
23? ? height:200px;
24? ? position:relative;
25 }
26 #box4{
27? ? width:99%;
28? ? ? position:absolute;
29? ? bottom:0;
32 }
33
34
35
36
37
38? ?
39
40
41
下面是任務(wù)部分
42
43? ? 
44? ?
45
46
47
