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

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

news 2025/7/20 12:17:30

目录

三十四、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小手可点击元素
textI型光标文本输入区
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 8750×1334375×6672:1
    iPhone 12 Pro1170×2532390×8443: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弹性容器分配空间简单高效只解决宽度适配

http://www.lryc.cn/news/593522.html

相关文章：

  • Django3 - Web前端开发基础 HTML、CSS和JavaScript
  • 【C语言进阶】题目练习(3)
  • 【RK3576】【Android14】摄像头MIPI开发调试
  • Android Auto 即将推出新功能
  • 7月19日日记
  • NJU 凸优化导论(9) 对偶（II）KKT条件+变形重构
  • react+antd+表格拖拽排序以及上移、下移、移到顶部、移到底部
  • Git仓库使用
  • 网络原理——TCP
  • string【下】- 内功修炼（搓底层）
  • 零基础 “入坑” Java--- 十二、抽象类和接口
  • LibreTv在线观影项目部署开箱即用
  • QT窗口（5）-对话框
  • MySQL基础教程
  • 变频器实习Day10
  • 06-人机共生：Prompt之外的思考
  • VRRP-虚拟路由冗余协议
  • Spring AI 项目实战（十九）：Spring Boot + AI + Vue3 + OSS + DashScope 构建多模态视觉理解平台（附完整源码）
  • 【HarmonyOS】Ability Kit - Stage模型
  • java: DDD using sql server 2019 or Oracle21c
  • 【嵌入式电机控制#16】电流环（三）：过采样提高采集精度看门狗监测总线电压
  • C++类和对象（一）基础内容讲解
  • 【项目分享】动手做一个TypeC转TTL模块(附带原理图)
  • Spring MVC @RequestParam注解全解析
  • 数据库第四次作业
  • 【C++】初识C++（2）
  • 完美解决 Ubuntu 中自定义启动器图标重复的问题（以 MATLAB 为例）
  • nginx.conf模版
  • 基于GEE与哨兵2号的土地覆盖分类方法及实现
  • python网络爬虫之selenium库（二）