第五次web前端學習筆記

2021-10-16 17:15:45 字數 3115 閱讀 8964

掌握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...