HTML5和CSS3常用屬性和方法是什么

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

　　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) 實現2D轉換 matrix(a,b,c,d,e,f) 矩陣,扯淡,不會(不過參數是數字)

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

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

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

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

　　transform(3D) 實現3D轉換 martrix()

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

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

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

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

　　transform-origin 設置轉換角度 百分比,百分比 第一個參數控制水平方向,第二個控制垂直方向

　　transform-style 設置元素在什么空間 flat 默認值,2d空間

　　preserve-3d 將子元素位于三維空間內

　　perspective-origin 設置透視點坐標值 百分比,百分比 第一個參數控制水平方向,第二個控制垂直方向

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

　　backface-visibility 設置背部是否可見 visible 默認值 可見

　　hidden 背面元素不可見

　　過渡

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

　　transition-property 屬性 css屬性

　　all 設置所有屬性

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

　　ease 默認值

　　ease-in 加速

　　ease-out 減速

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

　　transtion-delay 延遲的時間 time 設置延遲的時間

　　動畫

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

　　”

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

　　animation-duration 執行時間 time 動畫的執行時間

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

　　ease 默認值

　　ease-in 加速

　　ease-out 減速

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

　　steps 設置需要多少步數

　　animation-delay 延遲的時間 time 設置延遲的時間

　　animation-iteration-count 循環的次數 infinite 無限循環

　　animation-direction 循環的方向 normal 默認值,正常方向

　　reverse 反方向運行

　　alternate 先正常,再反向,并持續運行

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

　　animation-play-state 是否暫停 running 默認值

　　paused 暫停、運行

　　animation-fill-mode 設置對象事件之外的狀態 none 默認值,不設置

　　forwards 設置對象狀態為動畫結束的狀態

　　backwards 設置對象狀態為動畫開始的狀態

　　both 設置對象狀態為動畫結束或者開始的狀態

　　伸縮盒子

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

　　百分比 按照元素長寬

　　auto 無特定寬度

　　flex-direction 調整主軸方向 row 默認值:水平方向

　　row-reverse 水平方向反向排序

　　column 主軸為垂直方向

　　column-reverse 垂直方向反向排序

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

　　wrap 自動換行

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

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

　　flex-end 從主軸結束為止

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

　　space-between 平均分配舉例

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

　　stretch 默認值:會拉伸盒子

　　當伸縮容器的側軸還有多余空間時,本屬性可以用來調準「伸縮行」在伸縮容器里的對齊方式,這與調準伸縮項目在主軸上對齊方式的 屬性類似.

　　justify-content 調整主軸方向對其方向 flex-start 默認值:主軸開始方向對其

　　flex-end 主軸結束方向對其

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

　　space-between 平均分配舉例

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

　　align-items 調整側軸對其方式 flex-start 默認值:主軸開始方向對其

　　flex-end 主軸結束方向對其

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

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

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

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

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

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

　　flex-start 默認值:主軸開始方向對其

　　flex-end 主軸結束方向對其

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

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

　　stretch 默認值:會拉伸盒子

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

以上是“HTML5和CSS3常用屬性和方法是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！