老司机Studio 第三章

CSS3的进阶特性

  • verticle-align

    • 垂直对齐方式
    • 只对容器内的inline-block元素起作用:图片,按钮,单复选框,单行/多行文本框等HTML控件
    • top, text-top, middle, bottom, text-bottom, baseline
      http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html
  • flex

1
2
3
4
老司机Studio 第三章_第1张图片
flex布局
- ie9开始支持
- display:flex;
- justify-content: 主轴对齐方式
- align-items: 副轴对齐方式
- order: 顺序
- wrap: 是否换行 默认不换
- flex-basis: 在还有剩余空间时的
- flex-grow:
- flex-shrink:
老司机Studio 第三章_第2张图片
主轴对齐
老司机Studio 第三章_第3张图片
副轴对齐
  • transform
Hello
老司机Studio 第三章_第4张图片
旋转
老司机Studio 第三章_第5张图片
平移
老司机Studio 第三章_第6张图片
缩放
老司机Studio 第三章_第7张图片
skewX
老司机Studio 第三章_第8张图片
skewY
  • transform-origin
    • transform-origin:(left,top):


      老司机Studio 第三章_第9张图片
      transform-origin
    • transform-origin:(right):


      老司机Studio 第三章_第10张图片
      transform-origin
    • transform-origin:(25%,75%):


      老司机Studio 第三章_第11张图片
      image.png


老司机Studio 第三章_第12张图片
3d
Hello
  • transition动画


    老司机Studio 第三章_第13张图片
    transition
Hello
  • animation动画


    老司机Studio 第三章_第14张图片
    animation
Hello

你可能感兴趣的:(老司机Studio 第三章)