第6天筆記定位

position 定位屬性，檢索對象的定位方式；

語法：position：static /absolute/relative/fixed

取值：

1、static：默認值，無特殊定位，對象遵循HTML原則；

2、absolute：絕對定位，將對象從文檔流中拖離出來，使用left/right/top/bottom等屬性相對其最接近的一個并有定位設置的父元素進行絕對定位；如果不存在這樣的父對象，則依據(jù)html(根元素)，而其層疊通過z-index屬性定義；

3、relative ：相對定位，對象不可層疊，將依據(jù)right，top，left，bottom（相對定位）

等屬性在正常文檔流中偏移位置(相對自己原來的位置偏移)。

4、fixed：固定定位，對象定位遵從絕對定位方式（absolute）；但是要遵守一些規(guī)范（IE6瀏覽器不支持此定位）根據(jù)瀏覽器的窗口來定義自己的位置。

包含塊的概念及作用 包含塊是絕對定位的基礎，包含塊就是為決定定位元素提供坐標，偏移和顯示范圍的參照物，即確定絕對定位的偏移起點和百分比 長度的參考；

默認狀態(tài)下，html是一個大的包含塊，所有絕對定位的元素都是根據(jù)根元素來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含塊以后，對于被包含的絕對定位元素來說，就會根據(jù)最接近的具有定位功能的上級包含元素來定位自己的顯示位置。

定義元素為包含塊：給絕對定位元素的父元素添加聲明position：relative；

如果我們的父素設置了position:absolute;那么子元素也會相對父元素來定義自己的位置。

絕對定位和相對定位的區(qū)別

1、參照物不同絕對定位的參照物是包含塊，相對定位的參照物是元素本身位置；

2、絕對定位將對象從文檔流中拖離出來因此不占據(jù)空間，相對定位不破壞正常的文檔流順序無論是否進行移動，元素仍然占據(jù)原來的空間。

定位元素層疊屬性：

z-index : auto | number

檢索或設置對象的層疊順序。

auto：默認值。遵從其父對象

number:無單位的整數(shù)值。可為負數(shù)

說明：

1）較大 number 值的對象會覆蓋在較小 number 值的對象之上。如兩個絕對定位對象的此屬性具有同樣的 number 值，那么將依據(jù)它們在HTML文檔中聲明的順序?qū)盈B。 此屬性僅僅作用于 position 屬性值為 relative 或 absolute,fixed 的對象。

命名錨點鏈接的應用

定義：是網(wǎng)頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接，運用相當普遍。

命名錨點鏈接的應用：

1)命名錨點的作用：在同一頁面內(nèi)的不同位置進行跳轉。

2)給元素定義命名錨記名

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

3)命名錨記連接

語法：<a href="#命名錨記名稱"></a>

Flash和marquee(滾動字幕)

1、插入flash

1）語法：

<object width="value" height="value"> <param name="movie" value="flash路徑及全稱" /> <embed width="value" height="value" src="flash路徑及全稱"></embed> </object>

2）將flash背景設置為透明

<embed wmode="transparent" />

給<embed>標記添加屬性：wmode="transparent"

說明：flash源文件格式.fla,

導出影片為.swf,

創(chuàng)建播放器格式為.exe.

gif格式：.gif

3）IE中不顯示flash,可做如下操作：

A.下載安裝flash player;

B.打開IE瀏覽器，選擇工具菜單--Internet選項----安全----低。

2、滾動字幕的應用：

<marquee

behavior（行為）="scroll(滾動)/alternate（晃動）"direction（方向）="up(從下向上)/down（從上向下）/left（從右向左）/right（從左向右）"

scrollamount（滾動速度）="value"height="value(上下滾動范圍)"width=""(左右滾動范圍)> 內(nèi)容 </marquee>

滾動條

1,Overflow內(nèi)容溢出時的設置

屬性：

overflow 水平及垂直方向內(nèi)容溢出時的設置 overflow-x 水平方向內(nèi)容溢出時的設置 overflow-y 垂直方向內(nèi)容溢出時的設置

以上三個屬性設置的屬性值：

visible、scroll、hidden、auto、

visible 默認值。使用該值時，無論設置的"width"和"height"的值是多少，其中的內(nèi)容無論是否超出范圍都將被強制顯示。

hidden 效果與visible相反。任何超出"width"和"height"的內(nèi)容都會不可見。

scroll 無論內(nèi)容是否超越范圍，都將顯示滾動條。

auto 當內(nèi)容超出范圍時，顯示滾動條，否則不顯示。

應用:

1）沒有水平滾動條: <div style="overflow-x:hidden">test</div>

2）沒有垂直滾動條 <div style="overflow-y:hidden">test</div>

3）沒有滾動條 <div style="overflow-x:hidden;overflow-y:hidden" 或

style="overflow:hidden">test</div>

4）自動顯示滾動條 <div style="height:100px;width:100px;overflow:auto;">test</div>

2、自己定義滾動條的顏色

Body { scrollbar-arrow-color: #f4ae21; /圖6,三角箭頭的顏色/ scrollbar-face-color: #333; /圖5,立體滾動條的顏色/ scrollbar-3dlight-color: #666; /圖1,立體滾動條亮邊的顏色/ scrollbar-highlight-color: #666; /圖2,滾動條空白部分的顏色/ scrollbar-shadow-color: #999; /圖3,立體滾動條陰影的顏色/ scrollbar-darkshadow-color: #666; /圖4,立體滾動條強陰影的顏色/ scrollbar-track-color: #666; /圖7,立體滾動條背景顏色/

scrollbar-base-color:#f8f8f8; /滾動條的基本顏色/

}