网格布局

容器属性

  1. 开启网格
    • display
      • grid
      • inline-grid
  2. 划分行列
    • 划分行——grid-template-rows
    • 划分列——grid-template-columns
    • 属性值
      1. 绝对大小
        • grid-temple-rows：50px 50px 20px
      2. 百分比
        • grid-temple-rows：30% 30% 30%
      3. 功能函数 repreat(重复的次数，重复的数值)
        • grid-temple-rows：repeat(3,15%)
      4. auto-fill关键字
        • 自动填充，配合功能函数repreat使用
          • grid-temple-rows：repeat(auto-fills,76.23)
      5. fr关键字
        • 片段划分
          • grid-template-rows：100px 1fr 3fr 1fr 35px
          • grid-template-columns：repeat(7,1fr)
      6. minmax()功能函数
        • 设置范围
          • 100px 100px minmax(150px，300px)
      7. auto自动填充
        • grid-template-rows：100px 100px auto
  3. 单元格间距
    • 单一属性
      • grid-row-gap
        • 行间距
      • grid-column-gap
        • 列间距
    • 复合属性
      • grid-gap
        • 行间距 列间距
      • 注意
        • 新版可以省略grid-
  4. 项目排列顺序
    • grid-auto-flow
      • row——默认值
      • column
  5. 单元格内容对齐
    • 单一属性
      • justify-items
      • align-items
    • 复合属性
      • place-items—值1 值2
  6. 单元格项目对齐
    • 单一属性
      • justify-content
      • align-content
    • 复合属性
      • place-content—值1 值2

项目属性

如上图所示，共十二列五行，每一列的分割线从左到右排序分别为1~13，每一行的分割线从上到下排序分别为1~6

grid-colume——合并行
属性值——所合并的行的上面的线的序号/所合并的行的下面的线的序号
gird-row——合并列
属性值——所合并的列的左面的线的序号/所合并的列的右面的线的序号

eg：如果要合并上图第一二列所有的网格
gird-colume:1/3;
gird-row:1/6;




    
    
    Document

效果图如下：




    
    
    Document

效果图如下：

过渡

  1. 单一属性
    • transition-property_过度的属性
      • all——默认值
      • 所有css3属性
    • transition-duration——过渡持续的时间
      • 属性值为数字，单位为s
      • 默认值为0
    • transition-delay——延迟执行的时间
      • 属性值为数字，单位为s
      • 默认值为0
    • transition-timing-function——过度的动画类型
      • linear——匀速
      • ease——逐渐慢下来——默认值
      • ease-in——加速
      • ease-out——减速
      • ease-in-out——先加速后减速
      • bezier——贝塞尔曲线
      • step()——步幅
  2. 复合属性
    • transition
      • 属性值
        • 过度属性 持续时间 延迟时间 过渡类型
          • eg：all 5s 3s linear
        • 可以简写——1s
          • 只有持续时间，其他使用默认值

2D效果

transform

  1. 平移——translate
    • 属性值为数字，单位为px
  2. 旋转——rotate
    • 属性值为数字，单位为deg
  3. 缩放——scale
    • 属性值为数字，没有单位
  4. 倾斜——skew
    • 属性值为数字，单位为deg
  5. 以上属性值均可给负数




    
    
    Document
    


    
    
        
  • linear匀速
    • 
        
  • ease逐渐慢下来
    • 
        
  • ease-in加速
    • 
        
  • ease-out减速
    • 
        
  • ease-in-out先加速后减速
    • 
        
  • bezier贝塞尔曲线
    • 
        
  • steps()步幅
    •