資訊專(zhuān)欄INFORMATION COLUMN
摘要：屬性決定元素如何定位，通過(guò)實(shí)現(xiàn)位置的改變默認(rèn)值，元素按照標(biāo)準(zhǔn)流的方式正常排列。絕對(duì)定位，不受父元素父容器限制?？梢栽O(shè)置元素的疊加順序，但依賴(lài)定位屬性大的元素會(huì)覆蓋小的元素為的元素不參與層級(jí)比較為負(fù)值，元素被普通流中的元素覆蓋
?
transform 變形屬性
屬性：translate 平移，rotate 旋轉(zhuǎn), scale 縮放,skew 傾斜
◆ translate :指定對(duì)象的2D平移
第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二參數(shù)對(duì)應(yīng)Y軸；如果第二個(gè)參數(shù)未提供，則默認(rèn)為0；
translate(10px,10px)
X軸 往左邊移動(dòng) 對(duì)應(yīng)第一個(gè)參數(shù)的值 就是正數(shù)值。
Y軸 往下面移動(dòng) 對(duì)應(yīng)第二個(gè)參數(shù)的值 就是正數(shù)值。
◆ rotate :控制對(duì)象的2D旋轉(zhuǎn)，需要先定義transform-origin屬性；
列：Rotate(90deg),transform-origin:0 0;
角度值 為 正數(shù)值 對(duì)象順時(shí)針轉(zhuǎn)，負(fù)數(shù)對(duì)象逆時(shí)針轉(zhuǎn)；
transform-origin 如果不設(shè)置坐標(biāo)，默認(rèn)元素對(duì)象的中心點(diǎn)。
transform-origin:0 0; 以元素的左上角為中心點(diǎn)旋轉(zhuǎn)；
◆ scale: 指對(duì)象的2D縮放?？梢酝瑃ransform-origin 一起使用。
第一個(gè)參數(shù)對(duì)應(yīng)X軸 ；第二個(gè)參數(shù)對(duì)應(yīng)Y軸；如果第二個(gè)參數(shù)未提供默認(rèn)取第一個(gè)參數(shù)的值；
例如：scale(0.5,0.5);
參數(shù)值 為 1 時(shí)，不縮放，小于1時(shí)往里面縮??；大于1時(shí)，往大放。
配合transform-origin使用時(shí)，是沿著中心點(diǎn)縮放。
◆ skew : 指定對(duì)象斜切；
第一個(gè)參數(shù)對(duì)應(yīng)軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸；，如果第二個(gè)參數(shù)未提供默認(rèn)為0；
例如：skew(50deg,2deg);
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ 3D
◆ style : 樣式，變形樣式；
transform-style:preserve-3d; 此設(shè)置3D變形效果;
X軸正方向往左邊；Y軸正方向往下面；Z軸正方向面向屏幕前面，指向我們。
translateX(x px) ；X軸平移
translateY(y px) ；Y軸平移
translateZ(z px) ；Z軸平移
rotateX(x deg) ；沿著X軸進(jìn)行旋轉(zhuǎn)
rotateY(y deg) ；沿著Y軸進(jìn)行旋轉(zhuǎn)
rotateZ(z deg) ；沿著Z軸進(jìn)行旋轉(zhuǎn)
◆旋轉(zhuǎn)中心設(shè)置：transform-origin
X軸 可設(shè)置為：left 或 center 或 right;
Y軸 可設(shè)置為：top 或 center 或 bottom；
Z軸 可設(shè)置為：length px; 具體長(zhǎng)度；
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ transition 過(guò)度動(dòng)畫(huà)處理
transition:<過(guò)渡屬性名稱(chēng)><過(guò)渡時(shí)間><過(guò)渡模式>
屬性：property ,duration,timing-funciton,delay;
property : 檢索或設(shè)置對(duì)象中的參與過(guò)渡的屬性；設(shè)置原始的那些屬性參與動(dòng)畫(huà)。
duration : 過(guò)渡動(dòng)畫(huà)的持續(xù)時(shí)間；
timing-function : 檢索或設(shè)置對(duì)象中過(guò)渡的動(dòng)畫(huà)類(lèi)型（
linear : 動(dòng)畫(huà)從頭到尾的速度是相同的,
ease : 動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢,
ease-in : 動(dòng)畫(huà)以低速開(kāi)始,
ease-out : 動(dòng)畫(huà)以低速結(jié)束,
ease-in-out : 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束
）
delay : 設(shè)置對(duì)象延遲過(guò)渡的時(shí)間。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ position 屬性決定元素如何定位，通過(guò)top,bottom,left,right實(shí)現(xiàn)位置的改變；
static：默認(rèn)值，元素按照標(biāo)準(zhǔn)流的方式正常排列。
*-*-*-*-*-*-*-*-*-*-*-
relative：相對(duì)定位，相對(duì)元素自身原始位置，通過(guò) top,bottom,left,right實(shí)現(xiàn)位置定位；
當(dāng)處于父級(jí)容器中時(shí)，相對(duì)父級(jí)容器內(nèi)，本身位置作為標(biāo)準(zhǔn)，通過(guò) top,bottom,left,right進(jìn)行定位；
*-*-*-*-*-*-*-*-*-*-*-
absolute：絕對(duì)定位，相對(duì)瀏覽器窗口的定位。
當(dāng)父元素 是absolute定位或者relative時(shí)，那么子元素是按父元素進(jìn)行absolute絕對(duì)定位。
當(dāng)父容器沒(méi)有定位，那么子元素按瀏覽器窗口進(jìn)行定位。
*-*-*-*-*-*-*-*-*-*-*-
fixed:絕對(duì)定位，不受父元素父容器限制。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
z-index
可以設(shè)置元素的疊加順序，但依賴(lài)定位屬性
z-index 大的元素會(huì)覆蓋z-index小的元素
z-index為auto的元素不參與層級(jí)比較；
z-index為負(fù)值，元素被普通流中的元素覆蓋；
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1071.html
摘要：在動(dòng)畫(huà)過(guò)程中，您能夠多次改變這套樣式。以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞和，等價(jià)于和。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義和選擇器。注釋請(qǐng)使用動(dòng)畫(huà)屬性來(lái)控制動(dòng)畫(huà)的外觀(guān)，同時(shí)將動(dòng)畫(huà)與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實(shí)用模塊包括： 背景和邊框 文本效果 2D/3D 轉(zhuǎn)換 動(dòng)畫(huà) 多列布局 用戶(hù)界面 CSS3 邊框: 用于創(chuàng)建圓角 border...
摘要：前端最基礎(chǔ)的就是。類(lèi)同于標(biāo)簽將對(duì)象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線(xiàn)。是，表示終止時(shí)間和終止?fàn)顟B(tài)。動(dòng)畫(huà)過(guò)渡可以理解為兩個(gè)關(guān)鍵幀的補(bǔ)間操作。往期前端培訓(xùn)初級(jí)階段后記年月日更新。參考資料引用培訓(xùn)目錄出處已備份到筆記速查視差滾動(dòng) 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTM...
摘要：前端最基礎(chǔ)的就是。類(lèi)同于標(biāo)簽將對(duì)象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線(xiàn)。是，表示終止時(shí)間和終止?fàn)顟B(tài)。動(dòng)畫(huà)過(guò)渡可以理解為兩個(gè)關(guān)鍵幀的補(bǔ)間操作。往期前端培訓(xùn)初級(jí)階段后記年月日更新。參考資料引用培訓(xùn)目錄出處已備份到筆記速查視差滾動(dòng) 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTM...
摘要：硬件加速是指應(yīng)用的圖形性能對(duì)瀏覽器中的一些圖形操作交給來(lái)完成，因?yàn)槭菍?zhuān)門(mén)為處理圖形而設(shè)計(jì)，所以它在速度和能耗上更有效率。 在實(shí)習(xí)做一個(gè)移動(dòng)項(xiàng)目的時(shí)候，實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)效果，在 iPhone 和 Chrome 上調(diào)試沒(méi)有問(wèn)題，在千元左右的 Android 機(jī)上測(cè)試問(wèn)題就很大了，卡頓非常明顯，百思不得其解，吐血，卒。 這個(gè)悲傷的故事就是本文的引子，真真切切的體會(huì)到了 CSS 對(duì)用戶(hù)體驗(yàn)的影響非...
閱讀 2500·2021-11-16 11:45
閱讀 2478·2021-10-11 10:59
閱讀 2284·2021-10-08 10:05
閱讀 3909·2021-09-23 11:30
閱讀 2400·2021-09-07 09:58
閱讀 869·2019-08-30 15:55
閱讀 797·2019-08-30 15:53
閱讀 1945·2019-08-29 17:00
