CSS3 一些屬性

2021-07-31 08:11:50 字數 2502 閱讀 8066

1.flex-direction

調整主軸方向(預設為水平方向)包括row、

column

、row-reverse

、column-reverse

2.justify-content

主軸方向對齊,可以調整元素在主軸方向上的對齊方式,包括flex-start、

flex-end

、center

、space-around

、space-between

幾種方式

3.align-items

調整側軸方向對齊方式,包括flex-start、

flex-end

、center

、baseline

、stretch

4.flex-wrap

控制是否換行,包括wrap、

nowrap

5.align-content

堆疊排列,可對應用flex-wrap: wrap後產生的換行進行控制,包括

flex-start

、flex-end

、center

、space-between

、space-around

、stretch

6.flex-flow

flex-direction和

flex-wrap

的簡寫形式(

flex-flow: column wrap)

7.flex

控制子元素伸縮比例

8.align-self

同align-items可覆蓋父元素設定的

algin-items

,包括flex-start

、flex-end

、center

、baseline

、stretch

9.order

控制子元素的順序

10.rotate

通過 rotate() 方法,元素可以實現旋轉效果,允許負值,元素將逆時針旋轉。

使用方法如:transform: rotate(45deg)、

transform: rotate(-90deg)

11.scale

通過 scale() 方法,可以更改元素的尺寸,可以分別調整x和

y兩個方向的大小

使用方法如:transform: scale(x, y)

12.translate

通過 translate() 方法,可以使元素從其當前位置移動,通過設定水平(x軸

)和垂直(y軸

)距離實現

使用方法如:transform: translate(x, y)

13.rotatex/y/z

通過 rotatex()、

rotatey()

、rotatez()

可以實現x、

y、z軸上的旋轉

使用方法如:transform: rotatex(45deg)、

transform: rotatey(90deg)

、transform: rotatex(45deg)

14.在css3背景屬性中,background-size和background-origin要保持一致。

15.background-clip是用來確定背景區域為內容部分,不包含padding和border部分;background-origin是用來設定背景圖的定位原點,預設為padding-box。

15.伸縮布局:先設定這個盒子為display:flex;再設定屬性來確定子盒子的布局方式。

16.多列布局:

-webkit-column-span:4;    列數

-weblit-column-width:400px;    列寬

-webkit-column-gap:60px;    列與列之間的寬度

-webkit-column-rule:2px solid #ccc;    列之間的線

-weblit-column-span:all;    留出標題

當列寬*列數大於盒子總寬,會自動調整列數。

17.根據螢幕大小顯示內容

<

style

>

@media

screen

and (max-width:600

px)

}@media

screen

and (min-width:900

px)

}@media

screen

and (min-width:1200

px)

}style

>

18.將全屏顯示

html

, body

19.設定全屏填充

min-height: 100%;

min-width: 1024px;

width: 100%;

height: auto !important;

height: 100%;

css3一些屬性

1.第乙個引數預設朝外,可設定朝內inset或者不寫 2.第二個引數必須寫,左右水平偏移量 3.第三個引數必須寫,上下垂直偏移量 4.第四個引數可選,擴散blur寬度 5.第五個引數可選,顏色 box shadow裡面引數可以疊加,eg box shadow inset 1px 1px 1px pi...

css3的一些屬性

以前還沒有注意過css的一些屬性,近期發現有一些樣式很好用,現在整理一遍。keyframes 規定動畫 可以通過keyframes 改變乙個塊的樣式當然這是要配合animation屬性來結合的 keyframes mymove mymove必須定義動畫的名稱在 100 moz keyframes m...

css3 的一些新屬性

1.邊框新屬性 border radius border shadow border image 2.背景新屬性 background size background origin 規定背景的定位區域 3.文字效果 text shadow 文字陰影 word warp 強制換行 4.字型 font ...