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