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

迈不过友情╰ 2023-09-28 08:33 5阅读 0赞

#### 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设置
     *  没有设置的依然是基线对齐