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 有返回值 可以返回任意資料型別...