CSS基礎學習day02

2022-08-04 23:57:22 字數 1679 閱讀 8411

一、css布局

float :left或right 

1.可以把 塊狀元素放在同一行上。

2.若 是float:right,注意:寫在最前的靠在最右邊。

3.若父容器的寬度不足時,會自動換行。

4.若是設定了float,脫離文件位置。

clear:both; 清除浮動,使之不占用浮動的位置

overflow:hidden; //超出部分不顯示

overflow:scroll; // 內容過大,會顯示滾動條

二 、定位

position:[static|relative|absolute|fixed]

1.static=>靜態【預設】

2.relative=>相對定位,配合 (left,top)|(left,bottom)|(right,top)|(right,bottom)

設定 left,top,right,bottom 等屬性值時,元素會發生位置偏移,根據[自身原先的位置來計算偏移量

3.absolute=>絕對定位,配合 (left,top)|(left,bottom)|(right,top)|(right,bottom)

設定 left,top,right,bottom 等屬性值時,元素會發生位置偏移。

1.脫離文件流,不占用位置

2.參照的定位位置,

若父級元素設定了 定位【relative|absolute|fixed】,根據父級來設定 left,top, 若父級元素是靜態【static】,會繼續找父級的父級,如果都沒有,一直找到body,根據body來設定left,top。

效果圖:

效果圖:

4.fixed==>固定定位,配合 (left,top)|(left,bottom)|(right,top)|(right,bottom)

設定 left,top,right,bottom 等屬性值時,元素會發生位置偏移,參照與瀏覽器邊框,脫離文件流,不占用位置。

三、層次顯示優先順序

z-index:檢索或設定物件的層疊順序。

較大number

值的物件會覆蓋在較小number

值的物件之上。如兩個絕對定位物件的此屬性具有同樣的number

值,那麼將依據它們在html文件中宣告的順序層疊。對於未指定此屬性的絕對定位物件,此屬性的number

值為正數的物件會在其之上,而number

值為負數的物件在其之下。設定引數為null可以移除此屬性。

注意:此屬性僅僅作用於position 屬性值為relative 、 absolute、fixed的物件,意思是它們兩個必須存在於乙個css樣式中,否則設定無效。

例項:

1            

2

練習:寫出相同的布局。

**如下:   

css簡單學習總結day02

每個html標籤上有屬性style,用於結合。demo1 style background color aqua color rebeccapurple div 用head裡的標籤實現style。demo2 type text css 在style標籤內,import url css檔案 demo3...

Qt學習筆記day02

帶引數的訊號由於訊號可以過載,則在處理訊號的時候,要注意處理方式 qt5的方法 採用函式指標的方法指向過載的函式 void subwidget funsignal subwidget mysignal connect w,funsignal,this,mainwidget dealsub void ...

Python學習筆記 day02

一 組織列表 1.s.sort 方法可以將列表中的元素按照從小到大的順序排序,而且是永久的改變了 s的元素順序。如果想要倒序排序,則使用 s.sort reverse true 即可。2.sorted s 方法可以將列表 s按照從小到大的順序顯示出來,但只是臨時性地讓 s可以按照從小到大的順序顯示,...