第6天筆記定位

position 定位屬性，檢索對(duì)象的定位方式；

語(yǔ)法：position：static /absolute/relative/fixed

取值：

1、static：默認(rèn)值，無(wú)特殊定位，對(duì)象遵循HTML原則；

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

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

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

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

包含塊的概念及作用 包含塊是絕對(duì)定位的基礎(chǔ)，包含塊就是為決定定位元素提供坐標(biāo)，偏移和顯示范圍的參照物，即確定絕對(duì)定位的偏移起點(diǎn)和百分比 長(zhǎng)度的參考；

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

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

如果我們的父素設(shè)置了position:absolute;那么子元素也會(huì)相對(duì)父元素來(lái)定義自己的位置。

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

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

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

定位元素層疊屬性：

z-index : auto | number

檢索或設(shè)置對(duì)象的層疊順序。

auto：默認(rèn)值。遵從其父對(duì)象

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

說(shuō)明：

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

命名錨點(diǎn)鏈接的應(yīng)用

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

命名錨點(diǎn)鏈接的應(yīng)用：

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

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

語(yǔ)法：<標(biāo)記 id="命名錨記名"> </標(biāo)記>

3)命名錨記連接

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

Flash和marquee(滾動(dòng)字幕)

1、插入flash

1）語(yǔ)法：

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

2）將flash背景設(shè)置為透明

<embed wmode="transparent" />

給<embed>標(biāo)記添加屬性：wmode="transparent"

說(shuō)明：flash源文件格式.fla,

導(dǎo)出影片為.swf,

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

gif格式：.gif

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

A.下載安裝flash player;

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

2、滾動(dòng)字幕的應(yīng)用：

<marquee

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

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

滾動(dòng)條

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

屬性：

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

以上三個(gè)屬性設(shè)置的屬性值：

visible、scroll、hidden、auto、

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

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

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

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

應(yīng)用:

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

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

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

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

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

2、自己定義滾動(dòng)條的顏色

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

scrollbar-base-color:#f8f8f8; /滾動(dòng)條的基本顏色/

}