-
相對(duì)定位是相對(duì)于自身原有位置進(jìn)行便宜，仍處于標(biāo)準(zhǔn)文檔流中。局對(duì)定位脫離了文檔流，偏移的參照基準(zhǔn)是：有已定位的父元素以父元素為基準(zhǔn)，無(wú)父元素（即無(wú)position）的話(huà)以<html>為基準(zhǔn)。
查看全部 -
過(guò)度效果：
????? ??第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；
????????第二，聲明過(guò)渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
????????第三，在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)，添加一些不同的樣式。transition-property:指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性
transition-duration:指定完成過(guò)渡所需的時(shí)間
transition-timing-function:指定過(guò)渡函數(shù)
transition-delay:指定開(kāi)始出現(xiàn)的延遲時(shí)間查看全部 -
transform-origin
????改變自身元素的中心點(diǎn)，目的是為了配合css變形進(jìn)行的旋轉(zhuǎn)、位移、縮放，扭曲等操作
取值：
? ? 關(guān)鍵詞????????????????????????????????????????????????????????????????????????百分比
????top = top center = center top?????????????????????????????? ?????50% 0
????right = right center = center right?????????????????????????????100%或(100% 50%)
????bottom = bottom center = center bottom????????????????50% 100%
????left = left center = center left????????????????????????????????????0 或(0 50%)
????center = center?center????????????????????????????????????????????????50%或(50% 50%)
????top left = left top???????????????????????????????????????????????????? ????0 0
????right top = top right?????????????????????????????????????????????????????100% 0
????bottom right = right bottom????????????????????????????????????????100% 100%
????bottom left = left bottom? ????????????????????????????????????????????0 100%
查看全部 -
matrix()
?????是一個(gè)含六個(gè)值的(a,b,c,d,e,f)變換矩陣,和translate()類(lèi)似，只不過(guò)translate()用兩個(gè)值來(lái)控制視圖的位移，而matrix通過(guò)六個(gè)值來(lái)確定位移的位置
查看全部 -
translate()
????將元素向指定的方向移動(dòng)
三種情況：
? ? 1、translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)
????2、translateX(x)僅水平方向移動(dòng)
????3、translateY(Y)僅垂直方向移動(dòng)
查看全部 -
scale()函數(shù)
????讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放
?三種情況：
?????1、scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放
?????2、scaleX(x)元素僅水平方向縮放
?????3、scaleY(y)元素僅垂直方向縮放
查看全部 -
skey():
????能將元素傾斜顯示。它可以將一個(gè)對(duì)象以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤?。skey()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤?/p>
查看全部 -
rotate()函數(shù)：
????是結(jié)合transform一起設(shè)置的，但是只針對(duì)塊元素，如果想要內(nèi)聯(lián)元素旋轉(zhuǎn)的話(huà)，需要將內(nèi)聯(lián)元素變?yōu)閴K元素
示例：
????????.wrapper span {
????????????? display:block;
?????????????-webkit-transform: rotate(-20deg);
?????????????-moz-transform: rotate(-20deg);
????????????? transform:rotate(-20deg);
?????????}
查看全部 -
::before和::after這兩個(gè)主要用來(lái)給元素的前面或后面插入內(nèi)容,這兩個(gè)常和"content"配合使用,使用的場(chǎng)景最多的就是清除浮動(dòng)
查看全部 -
:read-write
????選擇器剛好與:read-only選擇器相反，主要用來(lái)指定當(dāng)元素處于非只讀狀態(tài)的樣式
查看全部 -
:read-only
????偽類(lèi)選擇器用來(lái)指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單點(diǎn)理解就是，元素中設(shè)置了"readonly = 'readonly' "
查看全部 -
::selection
????選擇器是控制選擇文本內(nèi)容時(shí)顯示的樣式
查看全部 -
:disabled
????選擇器決定標(biāo)簽不可用狀態(tài)
查看全部 -
:enabled
????選擇器控制標(biāo)簽的是否可用狀態(tài)
查看全部 -
:only-of-type
????選擇器用來(lái)選擇一個(gè)元素是它的父元素的唯一一個(gè)相同類(lèi)型的子元素。
查看全部 -
:only-child
????選擇器選擇的是父元素中只有一個(gè)子元素，而且只有唯一的一個(gè)子元素。也就是說(shuō)，匹配的元素的父元素中僅有一個(gè)子元素，而且是一個(gè)唯一的子元素
查看全部 -
:nth-last-of-type(n)?
????選擇器和":nth-of-type(n)"選擇器是一樣的，選擇父元素中指定的某種子元素類(lèi)型，但它的起始方向是從最后一個(gè)子元素開(kāi)始。
查看全部 -
:last-of-type
????選擇器和":first-of-type"選擇器功能是一樣的，不同的是他選擇是父元素下的某個(gè)類(lèi)型的最后一個(gè)子元素
查看全部 -
:nth-of-type(n)
????選擇器和"：nth-child(n)"選擇器非常類(lèi)似，不同的是它只甲酸父元素中指定的某種類(lèi)型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類(lèi)型的子元素時(shí)，使用":nth-of-type(n)" 選擇器來(lái)定位于父元素中某種類(lèi)型的子元素是非常方便和有用的。在":nth-of-type(n)"選擇器中"n"和":nth-child(n)"選擇器中"n"參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達(dá)式，還可以是關(guān)鍵詞。
查看全部 -
:first-of-type
????選擇器類(lèi)似于":first-child"選擇器，不同之處就是指定了元素的類(lèi)型，其主要用來(lái)定位一個(gè)父元素下的某個(gè)類(lèi)型的第一個(gè)子元素
查看全部
舉報(bào)