当前位置：首页 > article >正文

17.[前端开发]Day17-形变-动画-vertical-align

article 2026/5/8 20:28:02

1 transform

CSS属性 - transform

transform的用法

+表示一个或者多个

不用记住全部的函数，只用掌握这四个常用的函数即可

位移 - translate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: inline-block;border: 5px solid #f00;}.container .box {width: 200px;height: 200px;background-color: orange;transform: translate(100px, 100px);}</style>
</head>
<body><div class="container"><div class="box"></div></div></body>
</html>

translate百分比

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: inline-block;border: 5px solid #f00;}.container .box {width: 200px;height: 100px;background-color: orange;/* 百分比: 你的百分比是相对于谁? *//* 不同地方的百分比相对参照物是不一样 *//* traslate的百分比是相对于自身的 *//* 如果设置的x位移: 那么参考的是自身的宽度 *//* 如果设置的y位移: 那么参考的是自身的高度 */transform: translate(100%, 100%);/* transform: translate(x, y); *//* transform: translateX();transform: translateY(); */}</style>
</head>
<body><div class="container"><div class="box"></div></div></body>
</html>

translate的补充

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {/* position: relative; *//* display: flex;align-items: center; */height: 300px;background-color: orange;}.box1 {position: absolute;width: 100px;/* height: 100px; */top: 0;bottom: 0;margin: auto 0;background-color: #f00;}.box2 {background-color: #f00;}.box3 {display: inline-block;height: 100px;background-color: #f00;/* 两件事情:1.让元素向下位移父元素的50%2.让元素向上位移自身的50% *//* margin-top的百分比是相对于包含块(父元素)的宽度 *//* margin-top: 50%; */position: relative;top: 50%;transform: translate(0, -50%);}</style>
</head>
<body><!-- 水平居中:1.行内级元素: * 设置父元素的text-align: center2.块级元素:* 设置当前块级元素(宽度) margin: 0 auto;3.绝对定位* 元素有宽度情况下, left0/right0/margin: 0 auto;4.flex* justify-content: center--><!--垂直居中:1.绝对定位* 元素有高度情况下, top0/bottom0/margin: auto 0;--><!-- 1.垂直居中: 绝对定位弊端:1> 必须使用定位(脱离标准流)2> 必须给元素设置高度--><!-- <div class="container"><div class="box1">coderwhy</div></div> --><!-- 2.垂直居中: flex布局(直接使用flex)弊端:1> 当前flex局部中所有的元素都会被垂直居中2> 相对来说, 兼容性差一点点(基本可以忽略)--><!-- <div class="container"><div class="box2">flex布局的居中</div>aaaa</div> --><!-- 3.垂直居中: top/translate(个人推荐, 不好理解)--><div class="container"><div class="box3">coderwhy</div>aaaaa</div></body>
</html>

补充：水平居中和垂直居中

水平居中:

1.行内级元素:

* 设置父元素的text-align: center

2.块级元素:

* 设置当前块级元素(宽度) margin: 0 auto;

3.绝对定位

* 元素有宽度情况下, left0/right0/margin: 0 auto;

4.flex

* justify-content: center

垂直居中：

1.绝对定位

元素有高度情况下, top0/bottom0/margin: auto 0;

    .container {position: relative; height: 300px;background-color: orange;}.box1 {position: absolute;width: 100px;height: 100px; top: 0;bottom: 0;margin: auto 0;background-color: red;}

1.垂直居中: 绝对定位

弊端:

1> 必须使用定位(脱离标准流)

2> 必须给元素设置高度

2.垂直居中: flex布局(直接使用flex)

弊端:

1> 当前flex局部中所有的元素都会被垂直居中

2> 相对来说, 兼容性差一点点(基本可以忽略)

.container {display: flex;align-items: center; height: 300px;background-color: orange;}
.box2 {background-color: #f00;}

3.垂直居中: top/translate(个人推荐, 不好理解)

    .container {height: 300px;background-color: orange;}.box3 {display: inline-block;height: 100px;background-color: #f00;/* 两件事情:1.让元素向下位移父元素的50%2.让元素向上位移自身的50% *//* margin-top的百分比是相对于包含块(父元素)的宽度 *//* margin-top: 50%; */position: relative;top: 50%;transform: translate(0, -50%);}

缩放 - scale

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {text-align: center;padding-top: 200px;}.container {display: inline-block;border: 20px solid #f00;}.box {border: 20px solid #0f0;width: 200px;height: 200px;background-color: orange;/* 形变 */transform: scale(60%, 60%);}.box1 {border: 20px solid #0f0;width: 200px;height: 200px;background-color: purple;/* 形变 *//* 0~1 对元素进行缩小 *//* 大于1 对元素进行放大 *//* transform: scale(1.2, 1.2); */}.box1:hover {transform: scale(1.1, 1.1);}</style>
</head>
<body><div class="container"><div class="box"></div></div><div class="container"><div class="box1"></div></div></body>
</html>

旋转 - rotate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {text-align: center;padding-top: 200px;}.container {display: inline-block;border: 10px solid #f00;}.box {width: 200px;height: 100px;background-color: orange;}.box:hover {transform: rotate(-45deg);}</style>
</head>
<body><div class="container"><div class="box"></div></div></body>
</html>

rotate补充

transform-origin

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {text-align: center;padding-top: 200px;}.container {display: inline-block;border: 10px solid #f00;}.box {width: 200px;height: 100px;background-color: orange;/* 修改当前元素的形变的原点位置 *//* transform-origin: center top; *//* transform-origin: 20px 20px; */transform-origin: 10% 10%;}.box:hover {transform: rotate(45deg) scale(0.5);}</style>
</head>
<body><div class="container"><div class="box"></div></div></body>
</html>

倾斜 - skew（理解）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {font-style: italic;width: 200px;height: 100px;background-color: orange;}.box:hover {transform: skew(10deg, 10deg);}</style>
</head>
<body><div class="box">我是div元素</div></body>
</html>

transform设置多个值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 100px;background-color: orange;}.box:hover {/* transform: translateX(50px);transform: scale(1.2);transform: rotate(45deg); *//* <transform-function>++: 一个或者多个, 并且多个之间以空格分隔transform: scale() translate();<box-shadow>##: 一个或者多个, 多个之间以, 分隔box-shadow: 1px 1px 1px 1px #f00, */transform: translate(50px) scale(1.2) rotate(45deg);}</style>
</head>
<body><div class="box"></div></body>
</html>

2 垂直居中总结

(见上补充知识）

3 transition动画

认识transition动画

哪些CSS属性可以做动画呢？

过渡动画 - transition

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {background-color: #f00;}.box {position: relative;left: 0;width: 200px;height: 100px;background-color: orange;/* 告知浏览器 box 在进行一些CSS属性变化的时候有一个过渡效果 *//* transition-property: transform, left; *//* transition-property: all;transition-duration: 1s;transition-timing-function: ease-in;transition-delay: 1s; *//* 简写属性 */transition: all 1s ease-in 1s;}.container:hover .box {left: 100px;transform: translate(100px);width: 500px;}</style>
</head>
<body><div class="container"><div class="box"></div></div></body>
</html>

几个英语词汇的区分（理解）

举例 transform:translate(10px,10px)

transition适用于给各种属性做动画的，可以给width/color/transform等属性做动画

补充：宽度的变化方向

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: fixed;right: 0;width: 400px;height: 100px;background-color: orange;}</style>
</head>
<body><div class="box"></div></body>
</html>

4 animation动画

认识CSS Animation

@keyframes规则

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 100px;background-color: orange;/* box要执行moveAnim的动画 */animation-name: moveAnim;animation-duration: 3s;animation-timing-function: ease-in-out;/* 其他属性: *//* 动画执行的次数 *//* animation-delay: 2s; *//* animation-iteration-count: 2; *//* animation-direction: reverse; *//* 元素停留在动画的哪一个位置 *//* animation-fill-mode: forwards; *//* js动态修改 *//* animation-play-state: paused; */animation: moveAnim 3s linear 1s 2 normal forwards, ;}@keyframes moveAnim {0% {transform: translate(0, 0) scale(0.5, 0.5);}33% {transform: translate(0, 200px) scale(1.2, 1.2);}66% {transform: translate(400px, 200px) scale(1, 1);}100% {transform: translate(400px, 0) scale(0.5, 0.5);}}</style>
</head>
<body><div class="box"></div></body>
</html>

animation属性

5 vertical-align

CSS属性 - vertical-align

行盒（inline-box），我们可以把每一行的文本，看成在一个行盒里。

其作用为：将当前行里面所有的内容包裹在一起。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 当前box有没有高度: 会有高度 *//* 为什么有高度: 由内容的撑起来 *//* 本质: 内容的行高撑起来 */.box {background-color: orange;}.small {display: inline-block;width: 100px;height: 100px;background-color: #f00;}</style>
</head>
<body><div class="box">我是div元素 <span class="small"></span>虽然说，现在想吃什么用什么海外产品，都能代购，但是自己去购买，感觉还是不同。一个人在路上，心情也会不同，路上的行程，可以听书看书，到达后，疯狂的游玩。书的种类很多，旅行的书本真的不少，常常看到人们去各地游玩，自己心中也跟着想去。有时间，可以试着一个人去旅行，那是一种享受一种幸福。女人不必限制于单身生活，才会各地旅行，婚后的女性，有时间，也可以一个人去旅行，那是一种不同的感受，有些人也可以带小孩老公一起去旅行。独自游玩是一种幸福，家庭一起去旅行，也是一种幸福。单身的女性，可以一个人独游。婚后的女性，也可以一个人独游。当然，婚后若是自己一个人不方便，那就全家人旅行。</div></body>
</html>

【我们可以理解为，div里面有行盒，是为了包裹里面每行的文本内容】

2.行盒中的多种行内元素：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background-color: orange;}.box img {width: 200px;}.box .small {display: inline-block;width: 100px;height: 200px;background-color: #f00;}</style>
</head>
<body><div class="box">我是普通的文本, 323fdafdafxxxx322<img src="../images/kobe01.jpg" alt=""><span class="small"></span></div></body>
</html>

3。行盒内包裹多个内容如何对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background-color: orange;}.box img {width: 200px;}.box .small {display: inline-block;width: 100px;height: 200px;background-color: #f00;}</style>
</head>
<body><div class="box">我是普通的文本, 323fdafdafxqgxxx322<img src="../images/kobe01.jpg" alt=""><span class="small"></span></div></body>
</html>

行盒里的东西如何对齐？里面有文字，图片。。。如何对齐？

深入理解vertical-align – line boxes

深入理解vertical-align – 不同情况分析

vertical-align的baseline

vertical-align的其他值

练习

一. 完成所有的代码练习

见vscode

二. 说出常见的CSS Transform形变有哪些

transform属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。transform对于行内级非替换元素（如a，span）是无效的。

translate(x, y) :平移，用于移动元素在平面上的位置
scale(x, y) :缩放，可改变元素的大小。
rotate(deg) :旋转，表示旋转的角度。
skew(deg, deg) :倾斜，定义了一个元素在二维平面上的倾斜转换

三. 说出CSS Transition和Animation动画的区别

transition:
- 只能定义两个状态：开始状态和结束状态，不能定义中间状态
- 不能重复执行动画，除非一再触发动画
- 需要在特定状态触发后才能执行，比如某属性修改了
animation:
- 可以用@keyframes定义动画序列（每一帧如何执行）
- 通过设置animation-iteration-count来规定动画执行的次数
- 不需要触发特定状态即可执行
animation动画比transition多了animation-iteration-count， animation-direction， animation-fill-mode 和 animation-play-state属性

四. 理解vertical-align的作用以及应用场景

vertical-align影响行内级元素在一个行盒中垂直方向的位置，默认值为baseline对齐/

baseline(默认值)：基线对齐
top：把行内级盒子的顶部跟line boxes顶部对齐
middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
bottom：把行内级盒子的底部跟line box底部对齐

不同应用情景分析：

只有文字时：行盒包裹内容,文字的bottom-line和行盒底部对齐
有图片和文字时:图片的底部和文字的baseline对齐
有图片，有文字，有inline-block（比图片要大 : 图片的底部,行内块底部和文字的baseline对齐
有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom: 图片的底部,行内块margin-bottom底部和文字的baseline对齐
有图片、文字、 inline-block（比图片要大）而且设置了margin-bottom并且有文字 :文字的baseline和图片的底部,行内块内最后一行文字的baseline对齐

五. 完成小米布局中的动画效果

见vscode

六. 自己找一个包含动画的网页案例(比如考拉页面)

见vscode

总结

一. transform

1.1. transform作用以及语法

1.2. translate(x, y)

1.3. translate的百分比(总结垂直居中的方案)

利用百分比做垂直居中

1.4. scale(x, y)

1.5. rotate

deg
- 正值: 顺时针
- 负值: 逆时针
rad

1.6. transform-origin

修改形变的坐标原点

1.7. skew倾斜

1.8. transform设置多个值

二. transition

2.1. 理解过渡动画

哪些是可执行动画的属性

2.2. 过渡常见属性

transition-property
transition-duration
transition-timing-function
transition-delay

2.3. 总结几个单词的作用

transform

translate

transition

三. animation

3.1. transition弊端和animation介绍

3.2. animation的使用过程

@keyframes定义每一帧的属性
animation属性
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction 方向
- animation-fill-mode
- animation-play-state: js用

四. vertical-align

4.1. 行盒的概念

4.2. vertical-align默认对齐baseline

4.3. 解释了多个对齐的现象

17.[前端开发]Day17-形变-动画-vertical-align

1 transform CSS属性 - transform transform的用法表示一个或者多个不用记住全部的函数，只用掌握这四个常用的函数即可位移 - translate <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta ht…...

编程日记 2026/5/3 11:28:22

【单层神经网络】基于MXNet库简化实现线性回归

写在前面同最开始的两篇文章完整程序及注释导入使用的库# 基本 from mxnet import autograd, nd, gluon # 模型、网络 from mxnet.gluon import nn from mxnet import init # 学习 from mxnet.gluon import loss as gloss # 数据集 from mxnet.gluon…...

编程日记 2026/2/27 1:23:54

第1节课：算法初印象—开启算法世界的大门

目录一、算法是什么（一）官方定义（二）算法的五大特性（三）算法与程序的关系二、算法在生活中的奇妙体现（一）日常出行中的算法（二）购物消费中的算法&#xff0…...

编程日记 2026/2/23 0:47:18

[C语言日寄] ＜stdio.h＞头文件功能介绍

在C语言的世界里，<stdio.h> 是一个极其重要的头文件，它提供了标准输入输出功能，是C语言程序与用户交互的核心工具。今天，我们就来深入探讨 <stdio.h> 的功能、使用注意事项以及它的拓展应用。功能介绍 <stdio.h…...

编程日记 2026/4/14 6:42:23

Python的那些事第五篇：数据结构的艺术与应用

新月人物传记：人物传记之新月篇-CSDN博客目录一、列表（List）：动态的容器二、元组（Tuple）：不可变的序列三、字典（Dict）：键值对的集合四、集合&#xf…...

编程日记 2026/5/2 14:57:53

Linux：线程池和单例模式

一、普通线程池 1.1 线程池概念线程池：一种线程使用模式。线程过多会带来调度开销，进而影响缓存局部性和整体性能。而线程池维护着多个线程，等待着监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价&…...

编程日记 2026/5/1 5:42:10

【算法-位运算】位运算遍历 LogTick 算法

文章目录 1. 引入2. LogTick 优化遍历过程3. 题目3.1 LeetCode3097 或值至少为 K 的最短子数组 II3.2 LeetCode2411 按位或最大的最小子数组长度3.3 LeetCode3209 子数组按位与值为 K 的数目3.4 LeetCode3171 找到按位或最接近 K 的子数组3.5 LeetCode1521 找到最接近目标值的函…...

编程日记 2026/5/5 19:22:41

【memgpt】letta 课程4：基于latta框架构建MemGpt代理并与之交互

Lab 3: Building Agents with memory 基于latta框架构建MemGpt代理并与之交互理解代理状态，例如作为系统提示符、工具和agent的内存查看和编辑代理存档内存MemGPT 代理是有状态的 agents的设计思路每个步骤都要定义代理行为 Letta agents persist information over time and…...

编程日记 2026/5/6 11:38:14

Python的那些事第九篇：从单继承到多继承的奇妙之旅

Python 继承：从单继承到多继承的奇妙之旅目录 Python 继承：从单继承到多继承的奇妙之旅一、引言二、继承的概念与语法三、单继承四、多继承五、综合代码示例六、总结一、引言在编程的世界里，继承就像是一场神奇的魔法&#…...

编程日记 2026/5/4 4:38:27

Excel to form ？一键导入微软表单

一句话痛点 “你的Excel越强大，手动复制到Forms就越痛苦。” 合并单元格崩溃成乱码、下拉菜单变纯文本、条件逻辑消失无踪——这些不是技术问题，而是低效工作模式的死刑判决书。直击解决方案：3分钟，3步，300%效率 1…...

编程日记 2026/3/20 1:55:26

一、Series基础使用 import pandasd {x:100,y:200,z:300} s1 pandas.Series(d) #将dict转化为Series print(s1)print("") l1 [1, 2, 3] l2 [a, b, c] s2 pandas.Series(l1, indexl2) #list转为Series print(s2)print("") s3 pandas.Series([11…...

编程日记 2026/5/4 2:17:12

Windows电脑本地部署运行DeepSeek R1大模型（基于Ollama和Chatbox）

文章目录一、环境准备二、安装Ollama2.1 访问Ollama官方网站2.2 下载适用于Windows的安装包2.3 安装Ollama安装包2.4 指定Ollama安装目录2.5 指定Ollama的大模型的存储目录三、选择DeepSeek R1模型四、下载并运行DeepSeek R1模型五、使用Chatbox进行交互5.1 下载Chatbox安装包…...

编程日记 2026/5/8 17:25:20

从零开始学 HTML：构建网页的基本框架与技巧

系列文章目录 01-从零开始学 HTML：构建网页的基本框架与技巧文章目录系列文章目录前言一、HTML 文档的基本框架1.1 <!DOCTYPE html>、<html>、<head>、<body> 标签解析1.1.1 <!DOCTYPE html> 标签1.1.2 <html> 标签1.1.3 &l…...

编程日记 2026/4/2 11:14:23

如何用微信小程序写春联

生活没有模板，只需心灯一盏。如果笑能让你释然，那就开怀一笑；如果哭能让你减压，那就让泪水流下来。如果沉默是金，那就不用解释；如果放下能更好地前行，就别再扛着。一、引入 Vant UI 1、通过 npm 安装 npm i @vant/weapp -S --production 2、修改 app.json …...

编程日记 2026/5/7 13:47:43

2025最新在线模型转换工具onnx转换ncnn，mnn，tengine等

文章目录引言最新网址地点一、模型转换1. 框架转换全景图2. 安全的模型转换3. 网站全景图二、转换说明三、模型转换流程图四、感谢引言在yolov5，yolov8，yolov11等等模型转换的领域中，时间成本常常是开发者头疼的问题。最近发现一个超棒的…...

编程日记 2026/5/5 14:18:00

算法每日双题精讲 —— 前缀和（【模板】一维前缀和，【模板】二维前缀和）

在算法竞赛与日常编程中，前缀和是一种极为实用的预处理技巧，能显著提升处理区间和问题的效率。今天，我们就来深入剖析一维前缀和与二维前缀和这两个经典模板。一、【模板】一维前缀和题目描述给定一个长度为 n n n 的整数数组 a a a&…...

编程日记 2026/5/1 1:49:45

C++泛型编程指南03-CTAD

文章目录 C17 自定义类型推断指引（CTAD）深度解析一、基础概念1. 核心作用2. 工作原理二、标准库中的 CTAD 应用1. 容器类型推导2. 智能指针推导3. 元组类型推导三、自定义推导指引语法1. 基本语法结构2. 典型应用场景四、推导指引设计模式1. 迭代器范…...

编程日记 2026/4/29 4:47:34

记8（高级API实现手写数字识别

目录 1、Keras：2、Sequential模型：2.1、建立Sequential模型：modeltf.keras.Sequential()2.2、添加层：model.add(tf.keras.layers.层)2.3、查看摘要：model.summary()2.4、配置训练方法：model.compile(loss,o…...

编程日记 2026/5/7 19:56:31

88.[4]攻防世界 web php_rce

之前做过，回顾（看了眼之前的wp,跟没做过一样） 属于远程命令执行漏洞在 PHP 里，system()、exec()、shell_exec()、反引号（）等都可用于执行系统命令。直接访问index.php没效果 index.php?sindex/think\a…...

编程日记 2026/5/4 23:33:26

23.Word：小王-制作公司战略规划文档❗【5】

目录 NO1.2.3.4 NO5.6 NO7.8.9 NO10.11 NO12 NO13.14 NO1.2.3.4 布局→页面设置对话框→纸张：纸张大小：宽度/高度→页边距：上下左右→版式：页眉页脚→文档网格：勾选只指定行网格✔→ 每页：…...

编程日记 2026/5/7 20:01:34

在Arm芯片苹果Mac系统上通过homebrew安装多版本mysql并解决各种报错，感谢deepseek帮助解决部分问题

背景： 1.苹果设备上安装mysql，随着苹果芯片的推出，很多地方都变得不一样了。 2.很多时候为了老项目能运行，我们需要能安装mysql5.7或者mysql8.0或者mysql8.2.虽然本文编写时最新的默认mysql已经是9.2版本。安装步骤 1.执行hom…...

编程日记 2026/3/1 6:38:50

C++【iostream】数据库的部分函数功能介绍

在 C 编程世界中，iostream 库扮演着举足轻重的角色，它是 C 标准库的核心组成部分，为程序提供了强大的输入输出功能。无论是简单的控制台交互，还是复杂的文件操作，iostream 库都能提供便捷高效的解决方案。本文将深入剖…...

编程日记 2026/3/7 7:07:24

数据结构树1

目录前言一，树的引论二，二叉树三，二叉树的详细理解四，二叉搜索树五，二分法与二叉搜索树的效率六，二叉搜索树的实现七，查找最大值和最小值指针传递 vs 传引用为什么指针按值传递不会修…...

编程日记 2026/5/7 15:23:27

【实战篇章】深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据

文章目录深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据一、服务器如何响应前端请求HTTP 请求生命周期全解析1.前端发起 HTTP 请求（关键细节强化版）2. 服务器接收请求（深度优化版） 二、后端如何查看前…...

编程日记 2026/3/5 4:50:36

玩转ChatGPT：DeepSeek测评（科研思路梳理）

一、写在前面 DeepSeek-R1出圈了，把OpenAI的o3-mini模型都提前逼上线了（还免费使用）。都号称擅长深度推理，那么对于科研牛马的帮助有多大呢？ 我连夜试一试。二、科研思路梳理有时候我们牛马们做了一堆结果以后&…...

编程日记 2026/4/30 0:33:42

python学opencv|读取图像（五十三）原理探索：使用cv.matchTemplate()函数实现最佳图像匹配

【1】引言前序学习进程中，已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧，并且成功对两个目标进行了匹配。相关文章链接为：python学opencv|读取图像（五十二）使用cv.matchTemplate()函数实现最佳图像…...

编程日记 2026/5/7 4:54:29

AJAX RSS Reader：技术解析与应用场景

AJAX RSS Reader：技术解析与应用场景引言随着互联网的快速发展，信息量呈爆炸式增长。为了方便用户快速获取感兴趣的信息，RSS（Really Simple Syndication）技术应运而生。AJAX RSS Reader作为一种基于AJAX技术的信息读取工具，在用户体验和信息获取方面具有显著优势。本…...

编程日记 2026/4/29 10:26:18

Linux环境下的Java项目部署技巧：安装 Mysql

查看 myslq 是否安装： rpm -qa|grep mysql 如果已经安装，可执行命令来删除软件包： rpm -e --nodeps 包名下载 repo 源： http://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm 执行命令安装 rpm 源(根据下载的…...

编程日记 2026/5/5 14:15:13

gitea - fatal: Authentication failed

文章目录 gitea - fatal: Authentication failed概述run_gitea_on_my_pkm.bat 笔记删除windows凭证管理器中对应的url认证凭证启动gitea服务端的命令行正常用 TortoiseGit 提交代码备注END gitea - fatal: Authentication failed 概述本地的git归档服务端使用gitea. 原来的用…...

编程日记 2026/4/29 17:50:48

计算机网络安全与运维的关键 —— 常用端口全解析

目录前言常见端口分类及用途 20 端口（FTP 数据传输） 21 端口（FTP 消息控制） 22 端口（SSH） 23 端口（Telnet） 25 端口（SMTP） 53 端口（DNS&…...

编程日记 2026/4/29 17:50:49

1 transform

CSS属性 - transform

transform的用法

位移 - translate

translate的补充

补充：水平居中和垂直居中

缩放 - scale

旋转 - rotate

rotate补充

transform-origin

倾斜 - skew（理解）

transform设置多个值

2 垂直居中总结

3 transition动画

认识transition动画

哪些CSS属性可以做动画呢？

过渡动画 - transition

几个英语词汇的区分（理解）

补充：宽度的变化方向

4 animation动画

认识CSS Animation

@keyframes规则

animation属性

5 vertical-align

CSS属性 - vertical-align

深入理解vertical-align – line boxes

深入理解vertical-align – 不同情况分析

vertical-align的baseline

vertical-align的其他值

练习

一. 完成所有的代码练习

二. 说出常见的CSS Transform形变有哪些

三. 说出CSS Transition和Animation动画的区别

四. 理解vertical-align的作用以及应用场景

五. 完成小米布局中的动画效果

六. 自己找一个包含动画的网页案例(比如考拉页面)

总结

一. transform

1.1. transform作用以及语法

1.2. translate(x, y)

1.3. translate的百分比(总结垂直居中的方案)

1.4. scale(x, y)

1.5. rotate

1.6. transform-origin

1.7. skew倾斜

1.8. transform设置多个值

二. transition

2.1. 理解过渡动画

2.2. 过渡常见属性

2.3. 总结几个单词的作用

三. animation

3.1. transition弊端和animation介绍

3.2. animation的使用过程

四. vertical-align

4.1. 行盒的概念

4.2. vertical-align默认对齐baseline

4.3. 解释了多个对齐的现象

相关文章：