好程序員web前端分享定位錨點透明
好程序員web前端分享定位錨點透明
學習目標
- 1、position 定位屬性和屬性值
- 2、定位元素的層級屬性
- 3、包含塊的概念和應用
- 4、錨點連接的語法和應用場景
- 5、透明屬性的應用
- 6、擴展：Flash和marquee(滾動字幕)
一、position 定位屬性和屬性值
position 定位屬性，檢索對象的定位方式；
語法：position：static /absolute/relative/fixed/inherit/sticky/unset(未設置是inherit和initial的結合)/initial(最初的)
取值：
1、static：默認值，無特殊定位，對象遵循HTML原則；
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 的對象。
三、包含塊的概念及作用
包含塊是絕對定位的基礎，包含塊就是為絕對定位元素提供坐標，偏移和顯示範圍的參照物，即確定絕對定位的偏移起點和百分比 長度的參考；
默認狀態下，body是一個大的包含塊，所有絕對定位的元素都是根據窗口來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含元素塊以後，對於被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
定義元素為包含塊：給絕對定位元素的父元素添加聲明position：relative；
如果我們的父素設置了position:absolute;那麽子元素也會相對父元素來定義自己的位置。
絕對和相對定位的區別
1、參照物不同，絕對定位（absolute）的參照物是包含塊（父級），相對定位的參照物是元素本身位置；
2、絕對定位將對象從文檔流中拖離出來因此不占據空間，相對定位不破壞正常的文檔流順序無論是否進行移動，元素仍然占據原來的空間。
四、錨點連接的語法和應用場景
命名錨點的作用：在同一頁面內的不同位置進行跳轉。
錨點鏈接語法：
1)給元素定義命名錨記名
語法：<標記 id="命名錨記名"> </標記>
2)命名錨記連接
語法：<a href="#命名錨記名稱">鏈接文本或圖片</a>
五、透明寫法
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以上的瀏覽器
六、Flash和marquee(滾動字幕)
1、插入flash
1）語法：
<object>
<embed width="value" height="value" wmode="transparent" src="flash路徑及全稱" ></embed>
</object>
2）將flash背景設置為透明
<embed wmode="transparent" />
給<embed>標記添加屬性：wmode="transparent"
說明：flash源文件格式.fla,
導出影片為.swf,
創建播放器格式為.exe.
3）IE中不顯示flash,可做如下操作：
A.下載安裝flash player;
B.打開IE瀏覽器，選擇工具菜單--Internet選項----安全----低。
2、滾動字幕的應用：
<marquee
behavior（行為）="scroll(滾動)/alternate（晃動）" direction（方向）="up(從下向上)/down（從上向下）/left（從右向左）/right（從左向右）"
scrollamount（滾動速度）="value" height="value(上下滾動範圍)" width=""(左右滾動範圍)>
內容
</marquee>
七、 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規則，這就是層疊。
這些規則有可能不矛盾的，自然這些規則將會同時起效，然而有些規則是相互沖突的。當發生沖突的時候必須選出一條最高特殊性(權重)的規則來應用。
好程序員web前端分享定位錨點透明