這篇文章主要介紹HTML5和CSS3常用屬性和方法是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站服務(wù)緊隨時代發(fā)展步伐，進行技術(shù)革新和技術(shù)進步，經(jīng)過十余年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對網(wǎng)站進行網(wǎng)站制作、成都網(wǎng)站設(shè)計、建設(shè)、維護、更新和改版，實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

DOM擴展

獲得元素 document.querySelector(‘selector’) 獲得符合的第一個元素

document.querySelectorAll(‘selector’) 獲得符合的所有元素

類名操作 Node.classList.add(‘class’) 添加類名

Node.classList.remove(‘class’) 移除類名

Node.classList.toggle(‘class’) 切換類名

Node.classList.contains(‘class’) 檢測類名

漸變

linear-gradient 線性漸變 方向 to top/left/right/bottom

顏色+百分比

radial-gradient 徑向漸變 半徑 像素值

- at 位于

- 圓心(x,y) 百分比或者像素值

- 顏色+百分比

變換

transform(2D) 實現(xiàn)2D轉(zhuǎn)換 matrix(a,b,c,d,e,f) 矩陣,扯淡,不會(不過參數(shù)是數(shù)字)

-translate(x,y) 表示移動距離(長度單位或者百分比)

-rotate(x,y) 表示旋轉(zhuǎn)角度(角度單位)

-scale(x,y) 數(shù)值,大于1表示放大,小于1表示縮小

-skew(x,y) 表示斜切角度(角度單位)

transform(3D) 實現(xiàn)3D轉(zhuǎn)換 martrix()

translate(x,y,z) 表示對象的3d位移

rotate3d(x,y,z) 表示對象的3d旋轉(zhuǎn)

scale3d(x,y,z) 表示3d縮放

perspective 表示透視距離 像素值 一般取值600-1200px

transform-origin 設(shè)置轉(zhuǎn)換角度 百分比,百分比 第一個參數(shù)控制水平方向,第二個控制垂直方向

transform-style 設(shè)置元素在什么空間 flat 默認(rèn)值,2d空間

preserve-3d 將子元素位于三維空間內(nèi)

perspective-origin 設(shè)置透視點坐標(biāo)值 百分比,百分比 第一個參數(shù)控制水平方向,第二個控制垂直方向

單詞 center,left,right,top,center,bottom等

backface-visibility 設(shè)置背部是否可見 visible 默認(rèn)值 可見

hidden 背面元素不可見

過渡

transition 符合屬性 [ none | ] || || ||

transition-property 屬性 css屬性

all 設(shè)置所有屬性

transition-timing-function 指定過渡的速度 linear 線性過渡(勻速)

ease 默認(rèn)值

ease-in 加速

ease-out 減速

ease-in-out 先慢到快在到慢

transtion-delay 延遲的時間 time 設(shè)置延遲的時間

動畫

animation 符合屬性 “ || || || || || || ||

”

animation-name 動畫名稱 自定義名稱 必須與規(guī)則@keyframes配合使用,因為動畫名稱由@keyframes定義

animation-duration 執(zhí)行時間 time 動畫的執(zhí)行時間

animation-timing-function 指定過渡的速度 linear 線性過渡(勻速)

ease 默認(rèn)值

ease-in 加速

ease-out 減速

ease-in-out 先慢到快在到慢

steps 設(shè)置需要多少步數(shù)

animation-delay 延遲的時間 time 設(shè)置延遲的時間

animation-iteration-count 循環(huán)的次數(shù) infinite 無限循環(huán)

animation-direction 循環(huán)的方向 normal 默認(rèn)值,正常方向

reverse 反方向運行

alternate 先正常,再反向,并持續(xù)運行

alternate-reverse 先反向,在正向,并交替運行

animation-play-state 是否暫停 running 默認(rèn)值

paused 暫停、運行

animation-fill-mode 設(shè)置對象事件之外的狀態(tài) none 默認(rèn)值,不設(shè)置

forwards 設(shè)置對象狀態(tài)為動畫結(jié)束的狀態(tài)

backwards 設(shè)置對象狀態(tài)為動畫開始的狀態(tài)

both 設(shè)置對象狀態(tài)為動畫結(jié)束或者開始的狀態(tài)

伸縮盒子

flex-basis 定義元素寬度 長度值 定義長度

百分比 按照元素長寬

auto 無特定寬度

flex-direction 調(diào)整主軸方向 row 默認(rèn)值:水平方向

row-reverse 水平方向反向排序

column 主軸為垂直方向

column-reverse 垂直方向反向排序

flex-wrap 換行不換行 nowrap 默認(rèn)值:不換行,寬度不夠時,會壓縮子盒子

wrap 自動換行

flex-flow 為flex-direction和flex-wrap的復(fù)合屬性,值也相同

align-content 設(shè)置該父元素的子元素對其方式 flex-start 從主軸起始位置

flex-end 從主軸結(jié)束為止

center 各行向容器中間為止堆積

space-between 平均分配舉例

space-around 平均分布,兩端距離為子元素之間距離的一半

stretch 默認(rèn)值:會拉伸盒子

當(dāng)伸縮容器的側(cè)軸還有多余空間時,本屬性可以用來調(diào)準(zhǔn)「伸縮行」在伸縮容器里的對齊方式,這與調(diào)準(zhǔn)伸縮項目在主軸上對齊方式的 屬性類似.

justify-content 調(diào)整主軸方向?qū)ζ浞较?flex-start 默認(rèn)值:主軸開始方向?qū)ζ?/p>

flex-end 主軸結(jié)束方向?qū)ζ?/p>

center 各行向容器中間為止堆積

space-between 平均分配舉例

space-around 平均分布,兩端距離為子元素之間距離的一半

align-items 調(diào)整側(cè)軸對其方式 flex-start 默認(rèn)值:主軸開始方向?qū)ζ?/p>

flex-end 主軸結(jié)束方向?qū)ζ?/p>

center 各行向容器中間為止堆積

baseline 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與’flex-start’等效.其它情況下,該值將參與基線對齊.

flex 用于子元素 數(shù)值(number) 設(shè)置子盒子在主軸方向的縮放比例

flex-grow 用于子元素 數(shù)值定義擴展比例 數(shù)值(number) 根據(jù)彈性盒子元素所設(shè)置的擴展因子作為比率來分配剩余空間.

flex-shrink 用于子元素 數(shù)值定義收縮比例 數(shù)值(number) 根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間.

align-self 定義子元素縱軸對其方式,可以覆蓋父元素的align-items屬性 auto 默認(rèn)值,跟隨父元素

flex-start 默認(rèn)值:主軸開始方向?qū)ζ?/p>

flex-end 主軸結(jié)束方向?qū)ζ?/p>

center 各行向容器中間為止堆積

baseline 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與’flex-start’等效.其它情況下,該值將參與基線對齊.

stretch 默認(rèn)值:會拉伸盒子

order 控制子元素順序 整數(shù) 設(shè)置或檢索彈性盒模型對象的子元素出現(xiàn)的順序(誰小誰在前面)

以上是“HTML5和CSS3常用屬性和方法是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！