掌握css的定位和層級顯示
1、 固定定位 2、 絕對定位 3、 相對定位 4、 元素的顯示方式 5、 元素的層級
2023年1月6日
1、 技術筆記 1遍 2、csdn 技術部落格 1 篇 3、 製作58同城登入介面
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
#d1/* 固定定位 */
#d2a
style
>
head
>
>
>
我是h1h1
>
>
我是p1p
>
>
我是p2p
>
"d1"
>
"d2"
>
href
="#"
>
回到頂部a
>
div>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
/* 絕對定位:絕對定位元素位置相對於已經定位的最近的父元素
(如果參照最近的父元素,那麼父元素必須開啟定位)如果祖先元素沒有開啟定位,
那麼參照的位置可能是畫布可能是html
注意:開啟絕對定位的元素和文件流沒有關係,所以它們可能會覆蓋其他元素
書山有路勤為徑p
>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
/* 注意:無論如何偏移相對定位不會釋放自己所佔的位置,也就是說相對定位不會脫離文件流。
除了浮動定位相對定位,固定定位,絕對定位開始使用postion
*/#d1,#d2
#d1style
>
head
>
>
"d1"
>
我是d1
div>
>
定位時觀察我的位置p
>
"d2"
>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
/* 塊元素:從上到下排列
行內元素:從左到右,不能設定寬高(span,a)
行內塊:從左到右,可以設定寬高(input,img)
display來設定元素的顯示方式,可取值有:
none:不顯示該元素,釋放其占用位置
block:將元素設定為塊元素
inline:將元素設定為行內元素
inline-block:將元素設定為行內塊元素
*/#d1,#d2
#d3img
/* 元素的隱藏 */
觀察我的位置p
>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
/*
z-index:可以設定元素的層級,值為整數,z-index的值越大那麼元素層級越高,如果元素的層級一樣,則優先顯示靠下的元素。
祖先元素的層級再高,也不能覆蓋子元素。
*//* .box1
.box2 */
.box3
.box4
style
>
head
>
>
class
="box1"
>
1div
>
class
="box2"
>
2div
>
class
="box3"
>
3 class
="box4"
>
4div
>
div>
body
>
html
>
Django第五次學習筆記
管理器 bookinfo.objects.all objects是乙個什麼東西?objects是django幫我們自動生成的管理器物件,通過這個管理器可以實現對資料的查詢 objects是models.manger類的乙個物件。自定義管理器之後django不再幫我們生產預設的objects管理器。1...
Linux第五次學習筆記
定義乙個指令集體系結構 包括定義各種狀態元素 指令集和它們的編碼 一組程式設計規範和異常事件處理。類似ia32,存在8個程式暫存器。3個一位的條件碼 zf sf of 程式計數器pc存放當前正在執行指令的位址 儲存器,儲存程式和資料。y86用虛擬位址來引用儲存器位置 狀態碼stat,表明程式執行的總...
2018 9 7第五次筆記
這次筆記是接著上上一次筆記繼續介紹基本linux命令的。5.mv move,移動 作用 在目錄建移動檔案,重新命名檔案,在需要的情況下,可以移動並重命名。基本格式 mv 原始檔pathname 目的檔案pathname 下圖是mv命令的結果顯示 wb ubuntu wb ls 1.txt arm c...