CSS入門(定位之浮動定位、偽類之鼠標懸停、光標修改和透明度修改和列表樣式)


一、定位


所為定位,實際上就是定義元素框相對於其正常位置,應該出現在哪兒
定位就是改變元素在頁面上的默認位置

分類:

普通流定位(元素默認的定位方式)
浮動定位
相對定位
絕對定位
固定定位

1、普通流定位

文檔流是頁面元素默認的定位方式
塊級:從上到下排列(獨占一行)
行級:從左到右排列(不獨占一行)

2.浮動定位

如果將元素的定位方式設置了浮動定位那么具有以下幾個特點

1.浮動元素會脫離文檔流,其他未浮動的元素要上前補位
2.浮動元素會停靠在父元素的左邊或者右邊,或者停靠在其他浮動元素的邊緣上
3.浮動元素只會在當前行內浮動
4.浮動元素依然位於父級元素內
5.讓多個塊級元素處於一行

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會盡可能地窄。

注釋:假如在一行之上只有極少的空間可供浮動元素,那么這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。

元素的水平方向浮動,意味着元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動,下面的文本流將環繞在它左邊:

浮動引發的效果:

1.當父元素的寬度顯示不下所有已浮動的元素時,最后一個元素將換行(有可能會被卡住)
2.元素一旦浮動起來,那么將變成塊級元素,尤其對行內元素影響最大。
3.文本、行內元素、行內塊元素 采用文字環繞的方式排列,是不會被浮動元素壓在底下的會巧妙的避開浮動元素

3.清除浮動

元素浮動起來之后,除了影響到自己的位置,還會影響后續元素
如果不想被前面浮動元素影響 可以使用清除浮動來解決這個問題
誰被影響 就在誰身上用
關鍵字 : clear(clear屬性指定段落的左側或右側不允許浮動的元素) :

left 清除左浮動
right 清除右浮動
both 不管是左右都清除
浮動元素對父級元素帶來的影響


4.如果父級的高度設置100% 或者 沒有設置(自適應) 當元素全部浮動起來之后 父級的高度為0時如何去解決:

1.直接給父級設置高度px
弊端:必須要知道父級准確的高度
2.設置父元素浮動
弊端:對后續元素又影響
3.為父級元素設置overflow(溢出)
弊端:如果子級內容有溢出顯示的話會被一同隱藏
4.在父元素中追加一個空元素 設置清除浮動

二、CSS的偽類

 

:hover 選擇器用於選擇鼠標指針浮動在上面的元素。

 

提示::hover 選擇器可用於所有元素,不只是鏈接。

 

提示::link選擇器設置指向未被訪問頁面的鏈接的樣式,:visited選擇器用於設置指向已被訪問的頁面的鏈接,:active選擇器用於活動鏈接。

 

注釋:在 CSS 定義中,:hover 必須位於 :link 和 :visited 之后(如果存在的話),這樣樣式才能生效。

三、光標修改、透明度修改和列表樣式

1.cursor 屬性規定要顯示的光標的類型(形狀)。

  屬性值:

url    需使用的自定義光標的 URL。注釋:請在此列表的末端始終定義一種普通的光標,以防沒有由 URL 定義的可用光標。

default  默認光標(通常是一個箭頭)

auto   默認。瀏覽器設置的光標。

crosshair 光標呈現為十字線。

pointer  光標呈現為指示鏈接的指針(一只手)

move   此光標指示某對象可被移動。

text    此光標指示文本。

wait    此光標指示程序正忙(通常是一只表或沙漏)

help    此光標指示可用的幫助(通常是一個問號或一個氣球)。

2.Opacity屬性設置一個元素了透明度級別。

屬性值:指定不透明度。從0.0(完全透明)到1.0(完全不透明)

3.list-style 簡寫屬性在一個聲明中設置所有的列表屬性。

可以設置的屬性(按順序): list-style-type, list-style-position, list-style-image.

可以不設置其中的某個值,比如 "list-style:circle inside;" 也是允許的。未設置的屬性會使用其默認值

一般只設置第一個值,目前也只學了第一個值:list-style-type

屬性值:

none          無標記

disc            默認。標記是實心圓。

circle          標記是空心圓。

square         標記是實心方塊。

decimal         標記是數字。

decimal-leading-zero  0開頭的數字標記。(01, 02, 03, 等。)

lower-roman      小寫羅馬數字(i, ii, iii, iv, v, 等。)

upper-roman      大寫羅馬數字(I, II, III, IV, V, 等。)

......


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM