css列表和定位

2021-09-29 15:28:41 字數 1780 閱讀 3034

列表

1、列表項標識

屬性:list-style-type

取值:1、none : 無標記

2、disc

3、circle

4、square

5、… …

2、列表項影象

屬性:list-style-image

取值:url()

3、列表項位置

屬性:list-style-position

取值:outside : 預設值,標識位於列表項區域之外

inside : 標記放在列表項區域之內

4、列表屬性

屬性:list-style

取值:type url position;

常用方式:list-style:none;

定位1、定位屬性

1、定位屬性

屬性:position

取值:1、static

預設值,預設定位方式

2、relative

相對定位

3、absolute

絕對定位

4、fixed

固定定位

注意:position取值為 relative,absolute,fixed 的元素被稱為 已定位元素

2、偏移屬性

作用:移動已定位元素

屬性:top:值;

bottom:值;

left:值;

right:值;

3、堆疊順序

屬性:z-index

取值:無單位數值

2、定位方式-相對定位

1、什麼是相對定位

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

元素移動位置後,原來所佔據的空間依然會保留

2、使用場合

位置微調

3、語法:

屬性:position:relative;

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

3、定位方式-絕對定位

1、絕對定位的特徵

1、元素會脫離文件流

2、相對於 最近的 已定位的祖先元素 來實現位置的初始化

3、如果元素沒有已定位祖先元素,那麼它的位置就相對於最初的包含塊(body,html)

2、語法

屬性:position:absolute;

配合著 偏移屬性 實現位置的初始化或移動

3、絕對定位使用場合

彈出選單

4、注意

1、絕對定位的元素會變成塊級

2、絕對定位的元素可以使用 margin來改變位置,但是 margin:auto 會失效

4、堆疊順序

1、作用

處理 已定位元素的 堆疊效果

2、預設堆疊效果

1、平級元素-後來者居上

2、子元素壓在父元素之上-子壓父

3、屬性

z-index

取值:數值越大越靠上

4、注意

1、取值可以為負

取值為負時,當前元素會位於頁面正常顯示內容之下

2、z-index 是無法改變父子關係的堆疊順序

5、固定定位

1、什麼是固定定位

將元素固定在網頁的某個位置處

不會隨著滾動條而發生位置的變化

2、語法

position:fixed;

配合 片以屬性 改變元素位置

3、注意

固定定位永遠都是相對於瀏覽器視窗進行位置初始化的。

"div1">窗前明月光

"div2">疑是地上霜

CSS列表,定位和例項

每乙個成功者都有乙個開始。勇於開始,才能找到成功的路!今天讓我們繼續努力吧!加油!列表css 列表屬性允許你放置 改變列表項標誌,或者將影象作為列表項標誌。css 列表 從某種意義上講,不是描述性的文字的任何內容都可以認為是列表。人口普查 太陽系 家譜 參觀選單,甚至你的所有朋友都可以表示為乙個列表...

CSS3 4 顯示 列表 定位

1.2 顯示效果 1.3 游標 2 列表 3 定位 3.2 定位方式 1.1.1 顯示方式 所有元素都可以顯示為框 塊級元素顯示為一塊內容 塊框 div h1 p等 行內元素顯示在行中 行內框 span a等 可以使用display屬性來修改元素框的顯示方式 1.1.2 display屬性 取值di...

列表 定位 css優先 劇中總結

列表樣式列表樣式可以設定其列表符號,列表 代替列表符號 列表符號的位置。list style type 設定列表符號,可以是我們之前學的無序列表符或有序列表符。list style image 設定列表的 此時list style type自動就無效了,被代替了 list style positio...