css小知识点

  1. cursor :hover时鼠标样式

pointer ------------------- 小手
url --------------定制鼠标样式

  1. overflow 溢出处理

scroll ------------------ 出现滚动条
hidden ------------------隐藏
auto ------------------ 不溢出则不管,溢出就出现滚动条

  1. position 定位

sticky ------------------ 粘性定位

  1. 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 当有剩余空间时,元素的主轴尺寸
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。