CSS水平居中和垂直居中的方法总结-形变及动画的基本使用

transform属性值(掌握)

位移 transform: tanslate(x, y) ;
- 一个值表示设置x轴上的位移
- 两个值表示设置x轴和y轴上的位移
- 单独设置x轴位移 transform: tanslateX(x) ;
- 单独设置y轴位移 transform: tanslateY(y);
- x 和 y 的值为百分比时
  - 如果x轴设置为百分比: 那么参考的是自身的宽度
  - 如果y轴设置为百分比: 那么参考的是自身的高度
缩放 transform-scale(x, y)
- 一个值表示设置x轴上的缩放
- 两个值表示设置x轴和y轴上的缩放
- 值类型
  - 数字:
    
    1: 保持不变
    
    2: 放大一倍
    
    0.5: 缩小一倍
  - 百分比(不常用)
旋转 transform-rotate(<angle>)
- 只有一个值 表示旋转的角度
- 值类型
  - 常用单位deg: 旋转的角度
  - 正数为顺时针
  - 负数为逆时针
形变原点 transform-orgin
- 一个值表示设置x轴上的原点
- 两个值表示设置x轴和y轴上的原点
- 值类型
  - 像素单位 从左上角开始计算
  - 关键字 left right top bottom
  - 百分比 参考元素本身大小

transform属性值(了解)

倾斜 transform-skew(x, y)
- 一个值表示设置x轴上的倾斜
- 两个值表示设置x轴和y轴上的倾斜
- 值类型
  - deg: 倾斜的角度
- 注意倾斜也会受transform-orgin 的影响

transform设置多个值

多个值之间空格分隔

transform: translate(100px) scale(0.5) rotate(45deg)

水平居中总结

行内级元素
- 设置父元素的 text-align: center;
块级元素 (当前块级元素必须有固定宽度 )
- 设置当前块级元素 margin: 0 auto;
绝对定位 (当前定位元素必须有固定宽度 )
- 设置当前定位元素 left: 0; right: 0; margin: 0 auto;
flex布局
- 设置 justify-content: center;
transfrom + 相对定位
- 设置
  - position: relative;
  - left: 50% (top百分比相对父元素)
  - transfrom: translateX(-50%)
- 过程
  - 先往右走父元素距离的一半
  - 再往左走自身距离的一半

垂直居中总结

行内级元素
- 设置父元素的 line-height
绝对定位 (当前定位元素必须有固定高度 )
- 设置当前定位元素 top: 0; bottom: 0; margin: auto 0;
flex布局
- 设置 align-items: center;
transfrom + 相对定位
- 设置
  - position: relative;
  - top: 50% (top百分比相对父元素)
  - transfrom: translateY(-50%)
- 过程
  - 先往下走父元素距离的一半
  - 再往上走自身距离的一半

transition动画(过渡)

transition动画介绍
- CSS transition 提供了一种在更改 CSS属性时 控制 动画速度的方法
- 可以让CSS属性变化成为一个持续一段时间的过程,而不是立即生效
- 比如将一个元素从一个位置移动到另一个位置,默认在修改完CSS属性后会立即生效
- 但是我们可以通过CSS transition,让这个过程加上一定的动画效果, 包括一定的曲线速率变化
通常两个状态之间的过渡称为隐式过渡, 因为开始和结束之间的状态由浏览器决定
CSS transition 可以决定
- transition-property
  - 哪些属性发生动画效果
  - 属性值:
    - all: 所有属性都执行动画
    - none: 所有属性都不执行动画
    - CSS属性名称: 指定要执行动画的属性例如 left translate
- transition-timng-function
  - 持续多久
  - 单位可以是秒(s)或者毫秒(ms)
- transition-duration
  - 如何动画(例如匀速或者先快后慢)
- transition-delay
  - 何时开始
transition简写属性
- transition: 动画的属性持续时间运动曲线何时开始;
  - 如 transition: all 1s linear 1s;
- 多个transition动画之间用逗号分隔
  - 如 transition: all 1s linear 1s, all 3s linear 0s;
transition弊端
- transition只能定义开始状态和结束状态, 不能定义中间状态, 也就是说只有两个状态
- transition不能重复执行, 出发重复触发动画
- transition需要在特定状态下才能执行, 比如某个属性被修改了

animation动画

animation动画可以有更多的变化
animation的使用分为两个步骤
- 步骤一: 使用keyframes定义动画序列 (每一帧动画如何执行)
- 步骤二: 配置动画执行的名称持续时间动画曲线延迟执行次数方向等等

可以使用**@keyframes**定义多个状态

关键帧使用百分比来指定动画发生的时间点

0%表示动画的第一时刻 100%表示动画的最终时刻

@keyframes move {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 100px) rotate(90deg);
  }
  50% {
    transform: translate(100px, 100px) rotate(180deg);
  }
  75% {
    transform: translate(100px, 0) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

也可以使用 from表示动画的第一时刻 to表示动画的最终时刻

@keyframes move {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 100px) rotate(90deg);
  }
  50% {
    transform: translate(100px, 100px) rotate(180deg);
  }
  75% {
    transform: translate(100px, 0) rotate(270deg);
  }
  to {
    transform: translate(0, 0) rotate(360deg);
  }
}

animation属性
- animation-name: 指定执行关键帧动画的名称
- animation-duration: 指定动画的持续时间
- animation-timing-function: 指定动画的变化曲线
- animation-delay: 指定延迟执行的时间
- animation-iteration-count: 指定动画执行的次数, 设置infinite表示无限动画
- animation-direction: 指定方向常用值normal和reverse(反转)
- animation-fill-mode: 执行动画最后保留哪一个值
  - none: 回到没有执行动画的位置
  - forwards: 动画最后一帧的位置
  - backwards: 动画第一帧的位置
- animation-play-state: 指定动画运行或者暂停 (常在js中使用,用于暂停动画)

vertical-align

作用: 用来控制一个行盒中行内级元素的垂直对齐方式
属性值:
- vertical-align: baseline
  - vertical-align默认值为baseline (基线对齐)
- vertical-align: top
  - 顶线对齐
- vertical-align: middle
  - 中线对齐
- vertical-align: bottom
  - 底线对齐
基线banseline:
- 文本的基线就是字母x的下方
- inline-block 没有文本时默认的基线是margin-bottom的底部 (如果没有margin-bottom就是盒子的底部)
- inline-block 有文本时基线是最后一行文本的下方
vertical-align给谁设置
- vertical-align给行盒内的行内替换元素或inline-block设置
- 没有设置的依然是基线对齐