CSS注意事項(二)

2021-10-09 14:47:13 字數 2917 閱讀 1165

1、static(靜態定位):預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告

2、absolute(絕對定位)

absolute定位的元素脫離了文字流,在正常流中的位置不再存在。相對於 static 定位以外的第乙個父元素進行定位或參照瀏覽器的左上角通過top,right,bottom,left(簡稱trbl) 定位。

如果設定trbl,並且父級設定position屬性,則以父級的左上角為原點進行定位,位置由 trbl決定。即使父級有padding屬性,對其也不起作用

因此把乙個定位屬性為absolute的元素定位於其父級元素內,只有滿足兩個條件:

第一:設定trbl

第二:父級設定position屬性

在position屬性值為absolute的同時,如果有一級父物件(無論是父物件還是祖父物件,或者再高的輩分,一樣)的position屬性值為relative時,則上述的相對瀏覽器視窗定位將會變成相對父物件定位

3、relative(相對定位)

定位為relative的元素脫離正常的文字流中,但其在文字流中的位置依然存在。

他是預設參照父級的原始點為原始點,無父級則以文字流的順序在上乙個元素的底部為原始點,配合trbl進行定位,當父級內有padding等css屬性時,當前級的原始點則參照父級內容區的原始點進行定位。

無論父級存在不存在,無論有沒有trbl,均是以父級的左上角進行定位,但是父級的padding屬性會對其影響。

總結:relative定位的層總是相對於其最近的父元素,無論其父元素是何種定位方式

對於absolute定位的層總是相對於其最近的定義為absolute或relative的父層;如果其父層中都未定義absolute或relative,則其將相對body進行定位

摘抄自下面博文:

文字陰影的順序:水平偏移距離,垂直偏移距離,模糊度,陰影的顏色

發光效果:可進行多個陰影的疊加,例如:text-shadow:0px 0px 10px yellow,0px 0px 5px orange

3d效果:通過層次感營造出3d立體效果

閃亮的效果:使用動畫animation和keyframes 名稱

transition屬性:要過渡的屬性 過渡時間

transition-property:width,background;

transition-duration:2s,10s;

transition-timing-function:ease;

/*ease:預設先慢後快再變慢*/

/*linear:線性速度*/

/*還可以通過瀏覽器獲取貝塞爾曲線值*/

transition-delay:3s;

transform:translate(x,y);

/*x代表水平移動,y代表垂直移動的距離。*/

等同於transform:translatex() translatey()

transform:rotate();

旋轉x軸:transform:rotatex();此時看到只是3d旋轉之後的二維投影平面。

3d效果呈現:

perspective:距離值;/設定透視點/

margin:0 auto居中生效的情況:

**塊級元素:**給定要居中的塊級元素的寬度。

**行內元素:**①設定display:block;②給定要居中的行內元素的寬度。(行內元素設定成塊級元素後可以對其寬高進行設定)

**行內塊元素:**設定display:block。

margin:乙個元素在水平方向上所佔的長度,由width ,padding ,和margin 決定。這些值中,只有width和margin-left,margin-right可以設為auto。

1、auto 可解釋為:彌補其它部分與所要求總合之間的差別;

2、如果兩個邊界都被設為 auto ,則被設為相等的值。

3、如果兩個邊界之一和width設為auto ,則被設定為auto的邊界值為0

4、三個都被設為auto ,則2個邊界的值都為0,width的值為最大可能值

1、在使用該屬性的時候,需要給容器新增height和width,不然無法顯示。因為背景不會撐開容器,只有容器的內容(content+padding)才能撐開容器。

background-size:100%100%; 按容器比例撐滿,變形;

background-size:cover;把背景放大到適合元素容器的尺寸,比例不變

2、該屬性的路徑(url)問題

路徑可以是絕對路徑、根相對路徑、文件相對路徑

絕對路徑是包括伺服器協議的完全路徑

根相對路徑(也稱相對跟目錄)的路徑以「/」開頭,路徑是從當前站點的根目錄開始計算。

文件相對路徑就是指包含當前文件的資料夾,也就是以當前網頁所在資料夾為基礎開始計算路徑

當使用相對位址時,相對位址和css是內聯還是外聯是有關係的:在css中當使用內聯css時,相對位址為影象相對於htm檔案的位址;當使用外聯css時,相對位址應為影象相對於css檔案的位址!

關於background-image的路徑問題參考自下面博文:

關於斜槓和反斜槓

web應用最新使用在unix系統上面,所以目前所有的網路位址都採用 斜桿/ 作為分隔符。

windows系統上的檔案瀏覽器都是用 反斜槓\ 作為路徑分隔符(由於使用 斜桿/ 作為dos命令提示符的引數標誌)

在該屬性的url中,需要使用/或者//。

參考博文:

CSS注意事項

一 寬度 高度 對齊方式請別忘記他們 只要你時刻記得 div css 不變形的秘密你已經掌握了 90 也有對齊方式哦!一定要掌握當 對齊方式不同是 布局出現的問題!左右左 能不變形嗎?預設 是要換行的哦 div css的 居中對齊 是有條件的哦 所有當同級元素的對齊方式都為居中對齊的時候可以採用居中...

css注意事項04

css的盒子模型分類 1.塊級元素 width height margin的四個方向 padding的四個方向都正常顯示,遵循標準的css盒模型。例如 div 2.行內元素 2.1.行內替換元素 width height margin的四個方向 padding的四個方向都正常顯示,遵循標準的css盒...

css基礎注意事項

1.px受顯示器解析度影響,手機端設定字型一般不使用px 2.web安全色 216種web安全色,可以安全應用於所有web中,不需要擔心顏色在不用應用程式之間的變化 3.font weight 預設值 normal 相當於400 700等同於bold,一般常使用bold 4.vertical ali...