一、css布局模型

1.流動模型（Flow）

元素在不設置css樣式時的布局模型，是塊元素就獨占一行，是內聯元素就在一行逐個進行顯示

2.浮動模型（Float）

使用float屬性來進行網頁布局，給元素設置float後會脫離正常的文檔流

3.層模型（Layer）

使用position屬性對元素進行定位設置

二、定位

語法：position:static(默認值)|absolute(絕對定位)|relative(相對定位)|fixed(固定定位);

1.絕對定位

語法： position:absolute;

絕對定位的參照物必須滿足兩個條件，缺一不可：

a）參照物和絕對定位的元素必須是包含與被包含的關系

b) 參照物必須是具有定位屬性的元素

如果找不到滿足以上兩個條件的父包含塊，那麽將相對於瀏覽器窗口進行定位

註：絕對定位元素的位置通過left,right,bottom,top四個屬性來確定

設置了絕對定位的元素將會脫離正常的文檔流

2.相對定位

語法：position:relative;

相對定位的參照物：

相對於元素偏移前的位置進行定位

註：給元素設置了相對定位後，原來的位置會被保留，不會脫離文檔流

3.透明度的設置

語法： opacity:數值;(取值範圍：0-1,0為透明，1為不透明)

註：當給元素設置了opacity屬性後，容器中的文本，圖片都會跟隨透明

IE瀏覽器不識別opacity屬性，兼容寫法如下：

filter:alpha(opacity=數值); (取值範圍1-100)

eg: .box{
opacity:0.6;
filter:alpha(opacity=60);
}

4.定位層疊屬性

語法： z-index:auto(默認值)|數值;

註：a）z-index一般設置整數值，可以為負值

b) 沒有設置z-index時，最後寫的對象優先顯示在上層，設置後，數值越大，層越靠上；

5.固定定位

語法： position:fixed;

固定定位參照物：瀏覽器窗口（屏幕窗口）

註：給元素設置了固定定位後會脫離正常的文檔流，原來的位置會被其他元素占據

註：當元素設置絕對定位和固定定位參照物都是屏幕窗口時，設置絕對定位元素會跟隨滾動條滾動，設置固定定位元素不會跟隨滾動條滾動，

固定在屏幕窗口的某個位置

三、錨點鏈接

1.命名錨記名

語法： <標記 id="錨記名"></標記>

2.連接錨記名

語法: <a href="#錨記名"></a>

eg: <h1 id="pageone">第一章html基礎</h1>

<a href="#pageone">第一章 html基礎</a>

註：a)錨點鏈接是在本頁面不同位置的跳轉

--------------------------------------------------------------------------

擴展一：如何在網頁中插入flash

語法： <object width="1000" height="500">
<param name="movie" value="1.swf"/>
<embed width="1000" height="500" src="1.swf"></embed>
</object>

擴展二：滾動字幕

語法：<marquee behavior="scroll(滾動)|alternate(晃動)" direction="left|right|up|down" width="value" height="value"

scrollamount="數值">滾動的內容</marquee>

註：scrollamount 用來設置滾動的速度，值越大速度越快

從零開始學習前端開發 — 5、CSS布局模型