CSS篇——第二章 六十五项关键技能（下篇）

目录

三十四、Flex布局基础

三十五、Flex布局属性

三十六、定位

三十七、CSS精灵

三十八、字体图标

三十九、垂直对齐

四十、过渡效果

四十一、透明度

四十二、光标类型

四十三、平面转换(2D转换)

四十四、渐变效果

五十一、空间转换基础

五十二、空间平移

五十三、空间旋转

五十四、空间缩放

五十五、视距(perspective)

五十六、立体呈现

五十七、二倍图

五十八、动画(animation)

五十九、逐帧动画

六十、响应式基础

五十七、适配方案

五十八、rem单位

五十九、媒体查询

六十、rem布局方案

六十一、flexible.js

六十二、rem尺寸计算

六十三、Less预处理器

六十四、vw/vh单位

六十五、vh使用警告

---

本文系统梳理了CSS布局与动画的核心技术，包含以下重点内容：

1. Flex布局体系：详解容器属性(justify-content/align-items)和项目属性(flex)，对比传统浮动布局优势
2. 定位与转换：涵盖静态/相对/绝对/固定定位，以及2D/3D空间转换(位移/旋转/缩放)的实现方法
3. 动画体系：解析transition过渡与animation关键帧动画的区别，特别说明逐帧动画的steps()实现技巧
4. 移动端适配：对比rem/vw等响应式方案，提供flexible.js动态计算与媒体查询的具体应用场景
5. 视觉优化方案：包括CSS精灵图、字体图标、二倍图等性能优化手段，以及渐变效果的实现方式

全文通过属性对比表格、数学公式、实现步骤分解等方式，为前端开发者提供了一套完整的样式解决方案参考体系。

三十四、Flex布局基础

1. 核心概念

   display: flex; /* 创建弹性容器 */

   • 弹性容器：设置display: flex的元素

   • 弹性盒子：容器内的直接子元素

   • 主轴：默认水平方向

   • 侧轴：默认垂直方向

2. 优势
   ⚠️ 不会产生脱标现象，布局更简单灵活

---

三十五、Flex布局属性

1. 主轴对齐

   属性	justify-content
   属性值	效果
   flex-start	起点开始排列（默认）
   flex-end	终点开始排列
   center	主轴居中
   space-between	首尾贴边，间距平分
   space-around	两侧间距平分
   space-evenly	所有间距相等

2. 侧轴对齐

   属性	作用对象	属性值
   align-items	所有盒子	stretch(默认拉伸) center flex-start flex-end
   align-self	单个盒子	同上

3. 主轴方向

   属性	flex-direction
   属性值	效果
   row	水平→（默认）
   row-reverse	水平←
   column	垂直↓
   column-reverse	垂直↑

4. 弹性伸缩

   flex: 整数; /* 占用剩余空间份数 */

   示例：flex: 1 → 占满剩余空间

5. 换行控制

   属性	flex-wrap
   属性值	效果
   nowrap	不换行（默认）
   wrap	换行

6. 多行对齐

   属性	align-content
   属性值	效果
   flex-start	顶部对齐
   flex-end	底部对齐
   center	垂直居中
   space-between	首尾贴边
   space-around	两侧间距平分
   space-evenly	所有间距相等

---

布局方案对比

特性	浮动布局	Flex布局
排列方向	仅水平	自由控制方向
对齐方式	有限控制	精准对齐控制
脱标问题	存在需清除	不存在
响应能力	较弱	强大自适应
适用场景	图文混排	结构化布局

三十六、定位

1. 核心属性

   position: 模式; /* 定位模式 */
   left/right/top/bottom: 值; /* 边偏移 */

2. 定位模式对比

   模式	属性值	是否脱标	参照物	特点
   相对定位	relative	否	自身原位置	保持原有显示模式
   绝对定位	absolute	是	最近已定位祖先元素	具备行内块特性
   固定定位	fixed	是	浏览器窗口	不随页面滚动

3. 定位居中技巧

   .box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); /* 关键代码 */
   }

4. 层级控制

   z-index: 整数; /* 数值越大显示越靠前 */

---

三十七、CSS精灵

1. 原理
   将多个小图标合并到一张大图中，通过background-position定位显示

2. 实现步骤

   1. 创建与小图尺寸相同的盒子

   2. 设置精灵图为背景

   3. 测量小图左上角坐标

   4. 设置负值定位：

      background-position: -x -y;

3. 优点
   ⚠️ 减少服务器请求次数，提升加载速度

---

三十八、字体图标

1. 本质
   用字体文件展示图标

2. 优势

   • ⚠️ 灵活修改尺寸/颜色

   • ⚠️ 体积小加载快

   • 兼容性好

3. 使用流程

   1. 在[iconfont.cn]下载图标

   2. 引入字体文件：

      <link rel="stylesheet" href="iconfont.css">

   3. 使用类名：

      <span class="iconfont icon-xxx"></span>

---

三十九、垂直对齐

属性值	效果	典型应用
baseline	基线对齐（默认）	文本与图片混排
top	顶部对齐
middle	居中对齐	表单元素
bottom	底部对齐

---

四十、过渡效果

1. 作用
   元素状态变化时添加平滑动画

2. 核心属性

   transition: 属性 时间(s);

   示例：

   img {transition: all 1s; /* 所有属性变化动画1秒 */
   }
   img:hover {width: 500px; /* 悬停时触发动画 */
   }

3. 注意事项
   ⚠️ 必须设置在元素本身而非状态上

---

四十一、透明度

属性名	opacity
属性值	效果
0	完全透明（元素不可见）
0.5	半透明
1	不透明（默认）

---

四十二、光标类型

属性值	效果	使用场景
default	默认箭头	普通元素
pointer	小手	可点击元素
text	I型光标	文本输入区
move	十字箭头	可拖拽元素

---

关键技巧总结

功能	核心代码	注意事项
子绝父相	父{position:relative} 子{position:absolute}	绝对定位的参照基准
精灵图定位	background-position: -100px -50px;	需用PxCook测量坐标
字体图标	<span class="iconfont icon-home"></span>	必须引入字体文件
垂直居中	transform: translate(-50%,-50%);	配合绝对定位使用
平滑过渡	transition: width 0.5s;	属性变化时触发

四十三、平面转换(2D转换)

1. 基础概念
   通过transform属性改变元素在平面内的形态，常与过渡配合使用

   transform: 转换函数;

2. 四大转换类型

   类型	函数	取值示例	特点
   位移	translate(x,y)	translate(50px, -20%)	百分比参照自身尺寸
   旋转	rotate(deg)	rotate(45deg)	正值顺时针旋转
   缩放	scale(x,y)	scale(1.5)	>1放大，<1缩小
   倾斜	skew(xdeg,ydeg)	skew(30deg)	产生扭曲效果

3. 关键技巧

   • 单值位移：translate(50px) = X轴移动

   • 单值缩放：scale(1.2) = XY等比例缩放

   • 转换原点：

     transform-origin: left top; /* 左上角 */

   • 多重转换：

     transform: translateX(100px) rotate(90deg); /* 先位移后旋转 */

---

四十四、渐变效果

1. 线性渐变

   background-image: linear-gradient(方向, 颜色1 位置, 颜色2 位置
   );

   • 方向取值：

     • 方位名词：to right（向右）

     • 角度值：90deg（垂直向下）

   • 示例：

     background: linear-gradient(to bottom, blue 0%, pink 100%);

2. 径向渐变

   background-image: radial-gradient(半径 at 圆心位置,颜色1 位置,颜色2 位置
   );

   • 典型应用：按钮高光效果

   • 圆心位置：像素值/百分比/方位名词

   • 椭圆示例：

     radial-gradient(200px 100px at center, yellow, red);

---

转换函数详解表

函数	语法	效果图示	应用场景
translate()	translate(50px, 20%)	→ 元素位移	悬停滑动效果
rotate()	rotate(45deg)	↻ 元素旋转	箭头指示状态
scale()	scale(1.2)	⇲ 元素缩放	按钮点击反馈
skew()	skew(30deg)	⧅ 元素倾斜	特殊视觉设计

---

渐变效果对比

特性	线性渐变	径向渐变
方向控制	明确方向(水平/垂直/角度)	圆心+半径控制
形状	直线型色带	圆形/椭圆形扩散
典型应用	背景色过渡	按钮高光/光晕效果
参数复杂度	简单直观	需定义圆心和半径

五十一、空间转换基础

1. 概念
   在三维空间中进行转换（X/Y/Z轴），Z轴与视线方向相同

2. 属性

   transform: 3D转换函数;

---

五十二、空间平移

1. 函数

   transform: translate3d(x, y, z);
   transform: translateX(值);
   transform: translateY(值);
   transform: translateZ(值);

2. 取值

   • 像素值（正负均可）

   • 百分比（参照自身尺寸）

---

五十三、空间旋转

1. 绕轴旋转

   transform: rotateX(角度);  /* 绕X轴旋转 */
   transform: rotateY(角度);  /* 绕Y轴旋转 */
   transform: rotateZ(角度);  /* 绕Z轴旋转 */

2. 左手法则
   ⚠️ 判断旋转方向：

   • 左手握住旋转轴，拇指指向坐标轴正方向

   • 四指弯曲方向为旋转正方向

3. 自定义旋转轴

   transform: rotate3d(x, y, z, 角度);

   • x,y,z：0-1之间的矢量值

---

五十四、空间缩放

1. 函数

   transform: scale3d(x, y, z);
   transform: scaleX(倍数);
   transform: scaleY(倍数);
   transform: scaleZ(倍数);

---

五十五、视距(perspective)

1. 作用
   设置观察者与Z=0平面的距离，产生透视效果（近大远小）

2. 属性

   perspective: 800px; /* 推荐800-1200px */

   ⚠️ 必须设置在父元素上

---

五十六、立体呈现

1. 属性

   transform-style: preserve-3d; /* 开启3D空间 */

2. 实现步骤

   1. 父元素设置transform-style: preserve-3d

   2. 子元素绝对定位

   3. 调整子元素位置（位移/旋转）

3. 模式对比

   属性值	效果
   flat	子元素处于2D平面（默认）
   preserve-3d	子元素位于3D空间

---

3D转换核心要点

概念	关键属性	注意事项
坐标系	XYZ三轴	Z轴指向用户
透视效果	perspective	需设置在父元素
立体空间	transform-style	必须设为preserve-3d
方向判断	左手法则	拇指指向正方向
复合转换	transform多函数	空格分隔多个转换

五十七、二倍图

1. 概念
   在高清屏(如Retina屏)中，1个CSS像素对应多个物理像素，需使用2倍尺寸图片防止模糊

2. 比例关系

   设备	物理分辨率	逻辑分辨率	比例
   iPhone 8	750×1334	375×667	2:1
   iPhone 12 Pro	1170×2532	390×844	3:1

3. 设计规范
   ⚠️ 以iPhone8为基准：

   • 设计稿尺寸：750px

   • CSS编写尺寸：375px

   img {width: 100px; /* 实际显示尺寸 */
   }

   ⚠️ 图片需提供200×200像素才能在2倍屏清晰显示100×100区域

---

五十八、动画(animation)

1. 与过渡区别

   特性	过渡(transition)	动画(animation)
   状态数量	两个状态间变化	多个状态间变化
   控制能力	简单	强大（重复/方向/暂停）

2. 实现步骤

   /* 1. 定义动画 */
   @keyframes move {from { transform: translateX(0); }to { transform: translateX(100px); }
   }/* 2. 使用动画 */
   .box {animation: move 2s;
   }

3. 复合属性

   animation: 名称 时长 速度曲线 延迟 次数 方向 结束状态;

   ⚠️ 名称和时长必须设置
   示例：

   animation: slide 3s ease-in 1s infinite alternate forwards;

4. 关键属性

   属性	作用	常用值
   animation-name	动画名称
   animation-duration	持续时间	2s
   animation-delay	延迟时间	1s
   animation-fill-mode	结束状态	forwards(保留最后一帧)
   animation-timing-function	速度曲线	steps(6)(逐帧动画)
   animation-iteration-count	重复次数	infinite
   animation-direction	播放方向	alternate(往返)
   animation-play-state	播放状态	paused(暂停)

---

五十九、逐帧动画

1. 核心原理

   animation-timing-function: steps(N);

   ⚠️ N = 精灵图中小图数量

2. 实现步骤

   1. 准备与单帧同尺寸的容器

   2. 设置精灵图为背景

   3. 定义移动背景图的动画

      @keyframes run {0% { background-position: 0 0; }100% { background-position: -960px 0; } /* 精灵图总宽 */
      }

   4. 应用逐帧动画

      animation: run 1s steps(6) infinite; /* 6张小图 */

---

六十、响应式基础

1. 屏幕分辨率

   • 物理分辨率：硬件像素数（如1920×1080）

   • 逻辑分辨率：软件/缩放后的有效像素（缩放150% → 1280×720）

2. 视口(Viewport)

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   ⚠️ 关键参数：

   • width=device-width：视口宽度=设备宽度

   • initial-scale=1.0：禁止缩放

3. 移动端适配

   • 网页宽度默认=逻辑分辨率宽度

   • 使用百分比布局或flex弹性布局

---

关键概念对比

概念	说明	应用场景
物理像素	屏幕实际发光点	硬件固定
CSS像素	代码中使用的像素单位	响应式设计基础
设备像素比	物理像素/CSS像素	2倍图/3倍图依据
视口约束	<meta>标签控制	移动端适配核心
逐帧动画	steps()函数	游戏角色动画/加载动画

五十七、适配方案

1. 宽度适配

   • 百分比布局：元素宽度按父容器百分比设置

   • Flex布局：弹性容器内元素自适应空间

2. 等比适配

   • rem：基于根元素字号的相对单位

   • vw：基于视口宽度的相对单位（1vw = 1%视口宽度）

---

五十八、rem单位

1. 定义
   1rem = 1倍HTML根元素字号大小

   html { font-size: 16px; } 
   .box { width: 2rem; } /* 32px */

2. 核心问题
   ⚠️ 不同设备需动态设置HTML字号：

   • 大屏幕 → 大字号 → 大元素

   • 小屏幕 → 小字号 → 小元素

---

五十九、媒体查询

1. 作用
   检测视口宽度并应用差异化样式

2. 基础语法

   @media (条件) {选择器 { CSS属性 }
   }

   示例：

   /* 当视口宽度为320px时 */
   @media (width: 320px) {html { font-size: 32px; }
   }

---

六十、rem布局方案

1. 等分原则
   将视口宽度10等分，每份作为HTML基础字号

   数学

   HTML字号 = 视口宽度 / 10

2. 常用设备设置

   @media (width: 320px) { html { font-size: 32px; } }
   @media (width: 375px) { html { font-size: 37.5px; } }
   @media (width: 414px) { html { font-size: 41.4px; } }

---

六十一、flexible.js

1. 作用
   自动根据视口宽度设置HTML字号（替代媒体查询）

2. 使用方式

   <body><!-- 页面内容 --><script src="flexible.js"></script>
   </body>

   ⚠️ 需在页面底部引入

---

六十二、rem尺寸计算

1. 公式

   数学

   rem尺寸 = 设计稿px值 / 基准字号

   示例（设计稿375px宽）：

   /* 设计稿中68px元素 */
   .element {width: (68 / 37.5)rem; /* 1.813rem */
   }

2. 基准字号
   基准字号 = 设计稿宽度 / 10

---

六十三、Less预处理器

1. 核心功能

   • 变量：@color: red;

   • 运算：width: 100px + 50;

   • 嵌套：.father { .son { ... } }

   • 导入：@import "base.less";

2. 注释类型

   • 单行：// 注释

   • 多行：/* 注释 */

3. 导出控制

   less// out: ./css/style.css  /* 导出到指定路径 */
   // out: false           /* 禁止导出 */

---

六十四、vw/vh单位

1. 定义

   • 1vw = 1%视口宽度

   • 1vh = 1%视口高度

2. vw布局公式

   数学

   vw尺寸 = (设计稿px值 / 设计稿视口宽度) * 100vw

   示例（设计稿375px宽的元素）：

   .box {width: (68 / 375) * 100vw; /* 18.13vw */
   }

---

六十五、vh使用警告

⚠️ 禁止混用vw和vh单位
原因：全面屏设备高度远大于宽度，混用会导致元素变形

/* 错误示例 */
.box {width: 50vw;height: 50vh; /* 在全面屏上会变得细长 */
}

---

适配方案对比

方案	原理	优点	缺点
rem	动态改变根字号	兼容性好	需媒体查询/flexible.js
vw	直接使用视口单位	纯CSS实现	低版本浏览器不兼容
Flex	弹性容器分配空间	简单高效	只解决宽度适配