css选择器的优先级 弹性布局 2D变形 隐藏标签

!important>行内样式>id选择器 >class选择器>标签选择器

flex弹性布局

**display:flex 开启弹性布局 父元素为容器 子元素为项目
flex-direction: 设置主轴的方向 默认为row 横轴 从左向右排列
row-reverse 横轴 从右向左排列
colum 设置主轴的方向为数轴 默认从上向下进行排列
colum-reverse 设置主轴方向为属性 默认从下往上
justify-content 设置项目在主轴的对齐方式 默认为flex-start 主轴方向开始对齐
flex-end 项目从左往右依次排列 整体右边对齐
center 项目从左往右依次排列 整体居中对齐
space-around 整体两端有留白
spanc-betwwen 整体两端对齐 没有留白

交叉轴 align-items 设置项目在交叉轴的对齐方式
默认为 flex-start 交叉轴开始位置布局
flex-end 结束位置布局
center 居中显示
stretch 项目为设置高度时,则拉伸为容器同等高度
baseline 项目基线对齐
flex-wrap:nowrap 默认不换行
wrap 换行

项目的属性
flex-grow :0 设置项目放大比例 0-1
flex-shrink:1 当容器没有设置换行是 一行显示会被压缩
0表示不被压缩
align-self 单独设置某个项目的交叉轴对齐方式**

---

变形
transform 变形的样式 rotate()旋转变形 translate 平移变形
scale()等比例缩放变形

---

隐藏标签
display :none 设置元素隐藏 标签在文档流中不占位置
visbility:hidden 隐藏标签 单是文档流中位置还在
opcity 设置标签的透明度 范围0~1 0表示完全透明