列表 定位 css優先 劇中總結

2021-09-19 21:04:03 字數 1440 閱讀 2067

列表樣式

列表樣式可以設定其列表符號,列表(代替列表符號),列表符號的位置。

list-style-type: 設定列表符號,可以是我們之前學的無序列表符或有序列表符。

list-style-image:設定列表的(此時list-style-type自動就無效了,被代替了)

list-style-position: 指將列表符放在li的裡面還是外面:outside(外面,預設值),inside(裡面)

list-style: 這是綜合屬性,可以設定上述幾個。

定位屬性:

定位就是指把元素(標籤)放在哪個位置。

實際上,每個元素都有個定位屬性:position。其有4個值:

position:static ——靜態定位;——所有元素的初始定位方式就是靜態(沒有額外使用position或浮動的時候)

position:relative; ——相對定位:其實就是指乙個元素在其父盒子中本來該放的位置(靜態位置)的乙個相對值(錯位值)。必須使用left和top配合來設定該值。

1.1 舉例:position:relative; left:10px; top:15px;

position:absolute; ——絕對定位;指該元素相對於其上級具有非靜態定位的元素的乙個絕對位置。如果上級沒有非靜態定位設定,則會相對網頁主體(html標籤)。常常絕對定位就是用於在整個網頁上進行「絕對位置設定」——就是相對網頁主體來說。

position:fixed; ——固定定位;有點類似絕對定位,但其是相對於整個「可視視窗」來設定的定位,(絕對定位是相當於網頁的版面的絕對值)。固定定位的盒子是以「視窗」為參照系,而絕對定位和相對定位的盒子是以網頁為參照系。

標準流與非標準流:

流:水流的流——所有「水」(物體)往乙個方向「流過去」——擠壓。

標準流:就是原始的html標籤在網頁中的原始表現——在遵循塊元素和行內元素的基礎上,全都往「右上角」擠靠過去。

非標準流:使用position的非靜態定位方式影響的元素位置,或者使用浮動而影響的元素的位置。

css優先順序:

基本優先順序:

!important 〉 行內樣式 > id選擇器 > 類選擇器|偽類選擇器 > 標籤選擇器 > 通用選擇器 > 繼承屬性

綜合優先順序(只討論選擇器):

則下列選擇器的優先順序如何呢?

.a1 div{}

.a1 .a2{}

.a1 div .a2 span{}

#d1 div {}

#d1 .a1 {}

則他們比較優先順序的原則是:

比較最高的優先順序選擇器的多少,多者勝;

最高的數量相等的時候,比較次高,多者勝;

依次類推

各種居中總結:

前提: 父盒子固定大小(寬高),其裡面的「內容」在水平和垂直方向的居中對齊的常見做法:

css列表和定位

列表 1 列表項標識 屬性 list style type 取值 1 none 無標記 2 disc 3 circle 4 square 5 2 列表項影象 屬性 list style image 取值 url 3 列表項位置 屬性 list style position 取值 outside 預設...

css定位總結

塊狀元素 display block可以作為其它元素的容器,排斥其它元素和他在一行 寬 width 高 height 值都是有作用的 內聯元素 內容屬性 內容本身的寬 width 內容本身的長 height margin 20px 0 0 2px 0表示不設定 因為瀏覽器的margin paddin...

CSS 定位總結

css 有三種基本的定位機制 普通流 浮動和絕對定位,但本篇文章要總結的是css中的position屬性,position有四個值,static,absolute,relative,fixed。生成相對定位的元素,相對於其正常位置進行定位,它原本佔據的空間流仍然存在。當使用left top righ...