55 lines
1.0 KiB
Plaintext
55 lines
1.0 KiB
Plaintext
|
|
平滑过渡
|
|
|
|
一种样式转变到另一个的时候
|
|
|
|
|
|
transform
|
|
|
|
translate() 和定位组合使用，实现元素快速的水平垂直居中
|
|
translateX
|
|
translateY
|
|
|
|
rotate() 旋转一定的度数 deg
|
|
scale() 放大和缩小元素
|
|
|
|
|
|
skew() 倾斜
|
|
matrix()
|
|
|
|
|
|
弹性盒子
|
|
|
|
在网页中实现快速布局（元素对齐，居中）
|
|
|
|
|
|
13 个css属性
|
|
|
|
display flex 开启弹性盒子 父元素上
|
|
|
|
子元素的浮动，清除浮动都将失效
|
|
|
|
7 应用在父元素上
|
|
|
|
align-items 垂直对齐
|
|
justify-content 水平对齐
|
|
flex-wrap 实现自动换行 需要手动设置一样一行能放下多少个元素
|
|
|
|
flex-direction 改变元素的排列方向
|
|
需要注意
|
|
align-items
|
|
justify-content
|
|
作用相反
|
|
|
|
align-content 多行对齐
|
|
|
|
6 应用在子元素上
|
|
|
|
order 改变元素的排列顺序 数值越小越靠前
|
|
flex-grow 元素的放大比例
|
|
flex-shrink 元素的缩小比例
|
|
|
|
flex 一般写一个数值，代表 flex-grow
|
|
|
|
flex-basis
|
|
align-self |