- cursor :hover时鼠标样式
pointer ------------------- 小手
url --------------定制鼠标样式
- overflow 溢出处理
scroll ------------------ 出现滚动条
hidden ------------------隐藏
auto ------------------ 不溢出则不管,溢出就出现滚动条
- position 定位
sticky ------------------ 粘性定位
- flex 弹性盒模型
display------------flex | inline-flex;
- flex-direction ------------水平布局
row | row-reverse
column | column-reverse
- flex-warp 如何换行
nowarp --------不换行 ,不够就压缩
warp -----------------从上到下 从左到右
warp-reverse ---------从下到上 从右到左
- flex-flow -----> flex-direction + flex-warp
- justify-content 主轴排列方式
flex-start ----------主轴 起始点
flex-end ---------- 主轴 结束点
center ------------主轴 居中
space-between --------- 第一个靠起始,最后一个靠结束,中间的平均分配
span-around ---------- 每个元素两侧相同,所以每两个之间是靠边的两倍
space-evenly-------------- 元素之间距离平均分配
- align-litems 交叉轴排列方式
flex-start ----------交叉轴 起始点
flex-end ---------- 交叉轴 结束点
center ------------交叉轴 居中
stretch------------- 拉伸直至占满 (注意要记得清除宽高)
- align-content 当出现多行时,交叉轴排列方式
flex-start ----- 起始
flex-end ------ 结束
center ------- 居中
space-between --------- 第一个靠起始,最后一个靠结束,中间的平均分配
span-around ---------- 每个元素两侧相同,所以每两个之间是靠边的两倍
space-evenly-------------- 所有空间平均分配
stretch------------- 除了第一组外,将剩余空间平均分配
- align-self 弹性盒子内单个元素的排列方式
stretch -------- 拉伸
flex-start ----- 起始
flex-end ------ 结束
center ------- 居中
- flex-grow 剩余空间的分配
- flex-shrink 空间不够时的缩小比例
- flex-basis 当有剩余空间时,元素的主轴尺寸