夜靈的Html筆記Day09 定位 漸變

2021-08-08 02:15:43 字數 2615 閱讀 2090

23.重點(***)

1.相對定位

2.絕對定位

3.固定定位

1.定位

語法:position

取值:1.static   預設值

2.relative  相對定位

3.absolute  絕對定位

4.fixed     固定定位

**:如果元素設定為 相對定位,絕對定位,固定定位的話,則被稱之為「已定位元素」

2.偏移屬性

作用:******: 對已定位屬性實現位置的移動

屬性:top       以上邊為基準邊改變元素位置  

right      以右邊。。。

bottom     以下邊

left       以左邊。。。。

取值:以px為單位的值

3.堆疊順序 

已定位的元素允許出現堆疊效果的,可以通過z-index改變堆疊的順序

(尤其絕對定位)

語法:z-index

取值:數字 (無單位)

(數越大,越靠上)

**:父子關係元素是不受堆疊順序影響,永遠都是子壓父上

4.定位----相對定位

1.什麼是?

元素會相對於它原來的位置偏移某個距離 

2.語法:position

取值:relative

**:配合偏移屬性 完成位置的移動 (top,left)

使用場合:

1.位置微調時

2.配合 絕對定位 元素實現位置偏移

**:相對定位元素 原來的位置會被保留,不能被其它元素所佔據

5.定位---絕對定位

1.什麼是?

1. 絕對定位元素會脫離文件流---不佔據頁面空間

2.絕對定位的元素會相對於 離它最近的 已定位的 元素去實現位置初始化

3.配合 偏移屬性 實現位置的移動

4.如果絕對定位元素 沒有 已定位的祖先元素,那它的位置相對於最初(body,html)實現初始化

2.語法:

position

取值:absolute

**:配合偏移屬性 完成位置的移動

使用場合:

1.彈出框

特點:    1,脫離文件流

2.絕對定位元素會變成塊級元素

3.絕對定位元素在正常情況下,margin:auto會失效,其它正常

4.非正常情況,auto會生效

(絕對定位元素 top,right,bottom,left同時為0),auto會生效

(居中效果????)

6.固定定位

語法:position

取值: fixed

**:配合偏移屬性 實現位置的微調

特點: 固定定位永遠都是相對於body實現定位的

脫離文件流

會變成塊級元素

pm:1.漸變

1.什麼是?

兩種或多種顏色平緩過渡的效果

2.元素

色標:指定每個顏色的值及出現的位置

3.分類

1.線性漸變

以直線的方式填充漸變顏色 

2.徑向漸變

以圓形的方式填充漸變顏色

3.重複線性漸變

4.重複徑向漸變

4.語法:

background-image

取值:1.線性漸變 

linear-gradient(angle,color-point1,color-point2,color-point3);

1.angle關鍵字

to top:   從下向上填充漸變色

第乙個色標在最底下

最後乙個色標在最上面

to right:  從左向右填充漸變色

第乙個色標在最左邊

最後乙個色標在最右邊

to bottom:   從上向下填充漸變 色

to left:    從右向左填充漸變色

具體角度值:

0deg~360deg

2.color-point

色標:包含顏色及其出現的位置

eg:1.red 0%

從開始的位置顯示為紅色

2.blue 50%

從中間位置顯示為藍色

3.yellow 200px

4.green

省略位置,由瀏覽器自動計算

2.徑向漸變

語法:background-image

取值:     radial-gradient([size at position],color-point1,color-point2);

1.size at position

size:半徑大小,以px或%為單位

at:不能省略

position:  圓心所在位置

3.重複線性漸變

background-image:repeating-linear-gradient(angle,color-point);

eg:background-image:repeating-linear-gradient(to top,red 0%,blue 10%);

4.重複徑向漸變

bakcground-image:repeating-radial-gradient([size at position],color-point1);

前端筆記day09

1 完 員列表的刪除功能 姓名姓別 刪除 2 vue的v for語法可以遍歷那些值,分別寫出遍歷不同值的 1 迭代數字 這是第 個p標籤 2 迭代data中的普通物件 3 迭代data中的陣列 3 文字敘述v model和v bind的差別 1 v bind動態繫結指令,預設情況下標籤自帶屬性的值是...

淘淘商城筆記 day09

耦合度是指其他團隊的版本公升級會影響到我們系統 簡單佇列 生產者將訊息傳送到佇列,消費者從佇列中獲取訊息 work模式 乙個生產者,2個消費者,同乙個訊息只能被乙個消費者獲取 訂閱模式 乙個生產者,多個消費者,每個消費者都有自己的乙個佇列 生產者沒有將訊息直接傳送到佇列,而是傳送到交換機 每個佇列都...

python學習筆記day09 函式

函式的定義和函式的呼叫不是一回事,程式執行時,遇到定義函式,只會執行定義函式名處,裡面的函式體這個時候是不會執行的 只有到呼叫函式處才會執行裡面的函式體 沒有返回值 無 return 返回none 只有 return 返回none return none 返回none 有返回值 可以返回任意資料型別...