CSS---03
2023-02-18
平面
位移
transform:translate x方向 y方向
只一个值的时候表示x轴方向的移动，
transform:translateX
transform:translateY
旋转
transform:rotate 单位deg
transform-origin 改变原点位置
多重转换
transform:translate() rotate()
同时定义平面移动和平面旋转，不可以打乱顺序
缩放
transform:scale() 缩放倍数
渐变
background-img:line-gradient(transparent,color) 使背景呈现渐变效果
flex布局/弹性布局
是浏览器提倡的布局模型
避免浮动脱标的问题
适合结构化布局
给父元素添加display:flex属性
构成： 弹性容器（父盒子）
弹性盒子（子盒子）
主轴（默认水平）
侧轴（默认竖直）
主轴 （对齐方式）
justify-content:
flex-start 从起始开始
flex-end 从终点开始
center 从中间开始
sapce-between 子元素之间等距（子元素与父元素之间无距离）
sapce-around 子元素两侧等距（子元素间的距离是子元素与父元素之间距离的2倍）
space-evenly 所有间距相等
侧轴（对齐方式）
align-item:
flex-start
fles-end
center 沿着侧轴剧中排列
stretch 子盒子不设置高度时，默认子盒子高度与父盒子高度一致
align-self 设置单个盒子侧轴的对齐方式
伸缩比
flex： 整数数值
主轴方向
flex-direction:
row
column
row-reverse
column-reverse
换行排列
flex-wrap:
wrap
no-wrap
对齐方式
align-content:
flex-start
flex-end
center
sapce-between
sapce-around
space-evenly
