CSS基礎(零散補充知識點)

2021-10-22 17:35:17 字數 2675 閱讀 2410

文字垂直對齊

vertic-align,,常用於設定或者表單和文字垂直對齊,只能用於行內元素或行內塊元素

動畫

transform,可以進行旋轉,平移,3d轉換,還可以控制變化的時間和樣式

三角製作

我們用css 邊框可以模擬三角效果

實心箭頭,可設定盒子為0*0,我們4個邊框都要寫, 只保留需要的邊框顏色,其餘的不能省略,都改為 transparent 透明就好了。

設定旋轉時存在乙個問題,如果單純設定透明,會圍繞中心點轉,旋轉後就不在原來的位置上了,很彆扭,所以這時候可以將對角邊框(如需要top,就設定bottom)設為0,就可以在原來的位置進行旋轉。

空心箭頭,可以設定邊框顏色來達到目的,再進行旋轉。

還可以通過改變單個邊框的大小,獲取不同形狀的三角形,巧妙運用。其原理就是當內容為0*0時,每個邊框都是乙個三角形。

video,與img用法相似。 常見屬性?

音訊

audio,同上。

新增input型別

快速做驗證表單

新增表單屬性

類選擇器,屬性選擇器,偽類選擇器權重為0010

屬性選擇器

/* 選擇具有value的input屬性 */

input[value]

/* 用於元素和類相同的類,選擇text屬性 */

input[type=text]

/*選擇class類的div且以...開頭的div元素*/

div[class^="..."]

/*選擇class類的div且以...結尾的div元素*/

div[class$="..."]

/*選擇class類的div且含有...的div元素*/

div[class*="..."]

type

="text"

value

="nihao"

>

type

="password"

>

偽元素選擇器::before ::after,在css中插入新盒子,content為輸出內容

結構偽類選擇器

兩者區別:

常見公式:

特別注意:使用偽類選擇器,旋轉元素的兄弟元素只能是往後選的,不能是往前選。

定義動畫

@keyfram 動畫名稱

100%

}

0為初始狀態,100為介紹狀態。(from to也可以)

2. 呼叫動畫

div
動畫常用屬性rotate旋轉

/* 單位是:deg */

img:hover

設定旋轉的中心:transform-origin: x y;scale放大縮小:transform: scale(x, y)

3d位移

translate3d,在2d移動的基礎上多加了乙個z軸移動,需要配合透視perspective才能有效果。

translate3d(x,y,z);

透視

寫在被觀察元素的父盒子上

3d旋轉

繞軸轉,繞x軸時與2d旋轉沒區別。

左手準則,拇指指向正方形,四指彎曲方向則為運動方向。

若多個旋轉rotate3的(x,y,z,…deg)方向為向量相加。如(1,1,0,45deg)則為xy軸中的45°轉。

做乙個旋轉盒子,如硬幣之類的?

零散知識點

魔術變數 echo 這是第 line 行 當前行號 echo 該檔案位於 file e wamp www test index.php 絕對路徑 echo 該檔案位於 dir e wamp www test 等價於 dirname file echo 命名空間為 namespace 當前命名空間的名...

零散知識點

一 sendmessage 和broadcastmessage 在了解專案結構的前提下,sendmessage 和broadcastmessage 方法使用起來非常靈活而且容易實現,但它使用了反射,而反射會造成更多的cpu開銷。在清楚要呼叫哪個元件的哪個方法時應該通過元件的引用直接呼叫方法 在不清楚...

vue基礎零散知識點

建立前beforecreat 建立後created,掛載前beforemount,掛載後mounted 更新前beforeupdate,更新後update 銷毀前beforedestroy,銷毀後destroyed created為資料載入後 mounted為dom載入後 詳情 子傳值給父元件 em...