CSS基礎知識複習筆記 查漏補缺

2021-10-05 22:54:03 字數 2854 閱讀 5019

後代選擇器和子元素選擇器的區別

後代選擇器寫法:father son{}

子元素選擇器寫法:father>son{}

後代選擇器可以通過父元素直接找到所包含的子元素甚至是子元素的子元素,

fatther grandson{}

子元素選擇器需要一級一級地找。

father>son>grandson{}

同樣的選擇器效果可以通過id選擇器來實現,但使用後代選擇器與子元素選擇器執行更快速。

外邊距合併

當兩個相鄰元素都設定了margin的時候,

#div1

#div2

我們認為這兩個元素之間的間距應該是20px,但實際卻是10px,這就是外邊距合併。

當設定的margin值不一致的時候,間距取最大的外邊距的值。

使用了float樣式的元素1會漂浮在沒有使用float樣式的元素2上方,相當於元素1被單獨摳出來變成了乙個浮動視窗

給元素2也設定float樣式,那元素2會與元素1處在同一視窗平面上,如果float樣式都設定的是left,元素1和元素2會依次併排顯示在螢幕左邊

當三個元素都設定了float:left;,但並列後寬大於承載容器的寬時,會自動換行。如果元素1的高大於後面倆元素時,排列方式如下圖:

元素偏移了,但後面的元素並沒有產生任何變化。

absolute

position設定為absolute之後

我們把left和top樣式都刪掉後的效果如下

類似於float:left;的效果。

fix

將元素固定在頁面上,無論如何滾動頁面,始終顯示在那個位置,多用於設定導航條或者返回頁面頂端按鈕的位置。

static

靜態布局,left、top(包括z-index)等樣式的設定不再產生任何效果。頁面中的展現效果和沒有設定left、top等樣式的absolute效果一樣。

css3要注意瀏覽器的相容情況。

/*列數*/

column-count

:4;/*每列的寬度*/

column-width

:120px;

/*列與列的間距*/

column-gap

:10px;

/*類似border*/

column-rule

:5px outset red;

靜態效果:css3要注意瀏覽器的相容情況。

2d

transform

:translate

(100px,100px)

;

transform

:rotate

(180deg)

;

transform

:scale

(1,2)

;

引數為縮放的倍數,前乙個引數是寬度的倍數,後乙個是高度的倍數。

transform

:skew

(50deg,50deg)

;

前乙個引數是圍繞x軸傾斜的角度,後乙個引數是圍繞y軸傾斜的角度。

3d

圍繞x軸進行三維空間的旋轉。

transform

:rotatex

(120deg)

;

圍繞y軸進行三維空間的旋轉。

transform

:rotatey

(120deg)

;

動態效果(過渡):

/*設定div變化前的樣式以及動畫時間*/

div/*設定變化後的樣式*/

div:hover

/*設定div變化前的樣式以及動畫時間*/

div25%

50%75%

100%

}

CSS查漏補缺

從父類繼承 padding inherit 字母大寫 小寫,首字母大寫 h1 h2 credits 字母 漢字間距 letter spacing 0.2em 文字對齊方向 text align right 鏈結下劃線aa hover 首字母 首行 p.intro first letter p.int...

c語言基礎查漏補缺

該部分只是用來記錄c語言模糊的知識點 以下寫法錯誤 char c 123 char c1 哦 1.作用 用來計算乙個變數或者乙個常量 一種資料型別所佔的記憶體位元組數。2.基本形式 sizeof 變數 常量 int size sizeof a sizeof 變數 常量 int size sizeof...

Python基礎索引 查漏補缺

2.python基礎語法 二 3.python基礎語法 三 4.python基礎語法 四 5.python基礎語法 五 6.python基礎語法 六 7.python基礎語法 七 8.python基礎語法 八 9.python基礎語法 九 10.python基礎語法 十 11.python基礎語法 ...