垂直对齐方式 vertical-align

这个是来解决在一行图片和文字不能对齐的问题的。如下图

之所以不在一行是因为浏览器把行内块和行内标签都当做文字处理。当成文字之后，所有的文字都以基线对齐。下面的红色就是基线。

问题代码展示

<style>
    div {
      border: 1px solid #000;
    }
</style>
<img src="./images/1.webp" alt="">我是谁？我在哪？
<!-- 我们发现图片距离盒子底部有个小空白 这就是图片在基线上面 -->

<style>
    div {
      border: 1px solid #000;
    }
</style>
<img src="./images/1.webp" alt="">
<!-- 这个图片下面有空白和加不加文字没有什么关系 这也是尽量使用background-img()属性的原因 -->

下面使用vertical-align属性去除图片下方空白。

注意：这个属性只有父盒子**设置了行高(line-height)或者不设置高(height)**才会生效，加给元素本身。当父盒子使用了display:flex;时不起作用，Flex 容器的对齐属性优先级高于行内元素的 vertical-align，当使用了flex布局使用align-items: center;居中

属性名	属性值	效果
vertical-align	baseline	基线对齐(默认)
	top	顶部对齐
	middle	居中对齐
	bottom	底部对齐

1. vertical-align: middle;

   <style>
       div {
         border: 1px solid #000;
       }
       img {
         vertical-align: middle;
       }
   </style>
   <img src="./images/1.webp" alt="">我是谁？我在哪？
   <!-- 我们发现图片距离盒子底部没有小空白了 -->
   

   

2. vertical-align: top;

   <style>
       div {
         border: 1px solid #000;
       }
       img {
         /* 顶对齐：最高内容的顶部 */
         vertical-align: top;
       }
   </style>
   <img src="./images/1.webp" alt="">我是谁？我在哪？
   <!-- 我们发现图片距离盒子底部没有小空白了 -->
   

   

3. vertical-align: bottom;

   <style>
       div {
         border: 1px solid #000;
       }
       img {
         /* 底对齐：最高内容的底部 */
         vertical-align: bottom;
       }
   </style>
   <img src="./images/1.webp" alt="">我是谁？我在哪？
   <!-- 我们发现图片距离盒子底部没有小空白了 -->
   

   

4. 另一种解决办法除去图片地下的空白

   <style>
       div {
         border: 1px solid #000;
       }
       img {
         /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
         /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
         display: block;
       }
   </style>
   <img src="./images/1.webp" alt="">
   <!-- 我们发现图片距离盒子底部没有小空白了 -->
   

过渡transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果，常常和**:hover**搭配使用。表示从原状态到:hover的逐渐过渡。

属性名：transition（复合属性）

属性值：**过渡的属性 花费时间 (s) 控制动画速度曲线 设置动画开始前的延迟时间 **

属性	值	作用
transition-property	width,height,opacity,transform,background-color… |all	指定需要应用过渡的 CSS 属性。
transition-duration	transition-duration: 0.3s;	定义动画持续时间（单位：s 或 ms）
transition-timing-function	ease（默认）：慢-快-慢,linear：匀速,ease-in：加速,ease-out：减速,cubic-bezier(x1,y1,x2,y2)：自定义贝塞尔曲线（如 cubic-bezier(0.25,0.1,0.25,1) 等效于 ease）,steps(n)：分步动画（如 steps(5, jump-end)一帧一帧的变化）	控制动画速度曲线（如匀速、加速、减速）
transition-delay	transition-delay: 0.5s; /* 0.5秒后开始动画 */	设置动画开始前的延迟时间

简写格式

transition: property duration timing-function delay;

transition-property

<style>
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      transition: all 3s;
      /* 这里加了all说明 所有属性都会逐渐变化，宽度逐渐变成300px,颜色逐渐变为紫色 */
      /* 等价于transition: background-color,width 3s;  所以一般使用all*/
    }
    div:hover{
      width: 300px;
      height: 100px;
      background-color: purple;
    }
</style>
<div></div>

<style>
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
      transition: background-color 3s;
      /* 这里background-color说明只有background-color会逐渐变化，
      其他属性都不变。这个视觉效果是颜色逐渐变为紫色但是宽度瞬间变成300px */
    }
    div:hover{
      width: 300px;
      height: 100px;
      background-color: purple;
    }
</style>
<div></div>

transition-duration

上面已经展示不在过多赘述。

transition-timing-function

值	描述	等效贝塞尔曲线	适用场景
linear	匀速过渡，速度始终一致	cubic-bezier(0, 0, 1, 1)	进度条、机械式动画
ease	默认值，慢速开始 → 加速 → 慢速结束	cubic-bezier(0.25, 0.1, 0.25, 1)	通用过渡（如按钮悬停）
ease-in	慢速开始 → 逐渐加速	cubic-bezier(0.42, 0, 1, 1)	元素从隐藏到显示（淡入）
ease-out	快速开始 → 逐渐减速	cubic-bezier(0, 0, 0.58, 1)	元素从显示到隐藏（淡出）
ease-in-out	慢速开始 → 加速 → 慢速结束（比 ease 更对称的加速曲线）	cubic-bezier(0.42, 0, 0.58, 1)	需要平滑循环的动画（如加载图标）

自定义贝塞尔曲线

https://cubic-bezier.com 可在这个网站调试贝塞尔曲线

四个参数分别代表三次贝塞尔曲线的两个控制点坐标：cubic-bezier(x1, y1, x2, y2)

• x1, y1：第一个控制点（P1）的坐标，控制动画起始阶段的加速度。
• x2, y2：第二个控制点（P2）的坐标，控制动画结束阶段的减速度。
  动画的起点固定为 (0, 0)，终点固定为 (1, 1)，因此实际曲线由 P1 和 P2 的位置决定。参数需在 [0, 1] 范围内，否则失效。

分步动画

steps(n, [start | end]):将动画拆分为 n 个等距步骤，可选参数控制跳跃时机：

• steps(5, jump-start)：动画开始时先跳。
• steps(5, jump-end)：动画开始时等一会再跳，动画结束时跳跃最后一下（默认）常用于逐帧动画（如游戏角色动作）。
• jump-both：在 0% 和 100% 处均跳跃，
• jump-none：无跳跃，首尾帧各保持 1/n 时长

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity整个元素变透明

属性值：0 – 1

• 0：完全透明（元素不可见）
• 1：不透明
• 0-1之间小数：半透明

想让盒子里的文字不变透明使用background-color:rgba(0,0,0,0.4);

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

语法

selector {
  cursor: [预定义关键字] | url(图像路径), [备用关键字];
}

值	说明	适用场景
default	默认箭头，通常用于非交互元素。	普通元素
pointer	手形光标，表示可点击（如链接、按钮）。	超链接、按钮
text	竖线文本光标，表示可输入或选中文字。	输入框、文本区域
move	十字箭头光标，表示元素可拖动。	可拖拽组件（如窗口）
not-allowed	禁止符号，表示操作无效（如禁用按钮。	禁用状态元素
wait	沙漏/旋转图标，表示程序繁忙。	加载状态提示
crosshair	十字线光标，用于精确操作（如图像裁剪）。	绘图工具、测量场景
grab	悬停时显示抓取光标	动态响应状态
grabbing	拖动时显示抓紧光标	动态响应状态
zoom-in	放大图标

自定义光标

/* 图像格式支持 .cur 或 .png（推荐透明背景） */
/* 可指定偏移坐标（如 10 5 表示热点距离左上角 10px 右、5px 下） */
/* 必须提供备用关键字（如 pointer），防止图像加载失败 */
div {
  cursor: url("cursor.png") 10 5, pointer;
}

/* 多图像兼容 */
/* 浏览器按顺序加载图像，若均失败则使用备用值 */
cursor: url("cursor1.cur"), url("cursor2.png"), default;