Day7 定位錨點透明

2021-09-20 18:47:27 字數 2414 閱讀 3985

position 定位屬性,檢索物件的定位方式;

語法:position:static /absolute/relative/fixed/inherit/sticky/unset(未設定是inherit和initial的結合)/initial(最初的)

取值:1、static:預設值,無特殊定位,物件遵循html原則;

2、absolute:絕對定位,將物件從文件流中完全拖離出來,使用left/right/top/bottom等屬性相對其最接近的乙個並有定位設定的父元素進行絕對定位;如果不存在這樣的父物件,則依據《瀏覽器》進行定位,而其層疊通過z-index屬性定義

3、relative :相對定位遵循正常的文件流,將依據right,top,left,bottom(相對定位)等屬性在正常文件流中相對自身位置進行偏移;其層疊通過z-index屬性定義.

4、fixed:(固定定位),類似於絕對定位的方式,但是它的參照物是瀏覽器的「可視」視窗,且脫離標準文件流;

5、inherit:規定元素的定位方式繼承父元素的position的屬性值。

注:任何元素設定過脫離文件流的定位方式時,就有了塊元素的顯示特性

6、sticky:(粘性定位)

粘性定位,該定位是相對定位和固定定位的集合,在跨越特定閾值前為相對定位,之後為固定定位。

7、unset(未設定,是inherit和initial的結合)

當當前屬性有繼承性時,他解析的是繼承(inherit)所得來的屬性值 ,如果當前屬性沒有繼承,解析的是初始(initial)值。

z-index : auto |number

設定定位物件的層疊順序。

auto:預設值。遵循結構,後寫的定位元素層的順序靠上。

number:無單位的整數值。可為負數,數值越大,層的順序越靠上

說明:此屬性僅僅作用於 position 屬性值 relative 或 absolute,fixed ,sticky的物件。

包含塊是絕對定位的基礎,包含塊就是為絕對定位元素提供座標,偏移和顯示範圍的參照物,即確定絕對定位的偏移起點和百分比 長度的參考;

預設狀態下,body是乙個大的包含塊,所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的,如果我們定義了包含元素為包含元素塊以後,對於被包含的絕對定位元素來說,就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。

定義元素為包含塊:給絕對定位元素的父元素新增宣告position:relative;

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

絕對和相對定位的區別

1、參照物不同,絕對定位(absolute)的參照物是包含塊(父級),相對定位的參照物是元素本身位置;

2、絕對定位將物件從文件流中拖離出來因此不佔據空間,相對定位不破壞正常的文件流順序無論是否進行移動,元素仍然佔據原來的空間。

命名錨點的作用:在同一頁面內的不同位置進行跳轉。

錨點鏈結語法:

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

語法:《標記 id="命名錨記名"> 鏈結文字或

ie9以下瀏覽器寫法:filter:alpha(opacity=value);取值範圍 0-100

相容其他瀏覽器寫法:opacity:0.5;    (value的取值範圍0-1 0.1,0.2,0.3-----0.9---1)

rgba(255,255,0,0.5)(最後一位值表示透明,取值範圍0-1) 只支援ie8以上的瀏覽器

1、插入flash

1)語法: 

2、滾動字幕的應用:內容

八、 css繼承

概念:所謂繼承,就是父元素的規則也會適用於子元素。繼承得來的規則沒有特殊性。

比如給body設定為color:red;那麼他內部的元素如果沒有其他的規則設定,也都會變成紅色。

內聯元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.

塊狀元素可繼承:text-indent和text-align。

列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image。

**元素可繼承:border-collapse。

九、css層疊

概念:乙個元素可能同時被多個css選擇器或樣式表選中,每個選擇器及樣式表都有一些css規則,這就是層疊。

這些規則有可能不矛盾的,自然這些規則將會同時起效,然而有些規則是相互衝突的。當發生衝突的時候必須選出一條最高特殊性(權重)的規則來應用。

定位錨點透明

position定位屬性和屬性值 定位元素的層級屬性 包含塊的概念和應用 錨點連線的語法和應用場景 透明屬性的應用 擴充套件 marquee 滾動字幕 position定位屬性 告訴瀏覽器這是定位屬性 語法 position static absolute relative fixed 取值 1 s...

6 定位錨點透明

day7 定位錨點透明 position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed 取值 1 static 預設值,無特殊定位,物件遵循html原則 2 absolute 絕對定位,將物件從文件流中拖離出來,使用left ri...

前端基礎(7) 定位錨點與透明屬性設定

position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed sticky 粘性定位 relative相對定位 定位偏移量 position relative 相對定位 a 不影響元素本身的特性 b 不使元素脫離文件流 c 如果...