任务分配 1. 固定分配在绘制流程时直接指定 Assignee测试package com.sw.camundademo; import org.camunda.bpm.engine.RepositoryService; import org.camunda.bpm.engine.RuntimeService; import org.camunda.bpm.engine.TaskService; import org.camunda.bpm.engine.repository.Deployment; import org.camunda.bpm.engine.runtime.ProcessInstance; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; /** * @Author Suaxi * @Date 2024/7/3 22:11 * @Description */ @SpringBootTest public class AssigneeTest { @Autowired private RepositoryService repositoryService; @Autowired private RuntimeService runtimeService; @Autowired private TaskService taskService; @Test public void deploy() { Deployment deploy = repositoryService.createDeployment() .name("请假流程-固定分配") .addClasspathResource("flow/01.任务分配-固定分配.bpmn") .deploy(); System.out.println(deploy.getId()); } @Test public void startProcess() { ProcessInstance processInstance = runtimeService.startProcessInstanceById("Process_0sa1c18:1:db75f76f-3946-11ef-9303-a8a1592cf182"); System.out.println("processInstance.getId() = " + processInstance.getId()); } @Test public void completeTask() { taskService.complete("44488821-3947-11ef-98ee-a8a1592cf182"); } } 2. 值表达式通过 ${value} 的形式来设置 Assignee测试package com.sw.camundademo; import org.camunda.bpm.engine.RepositoryService; import org.camunda.bpm.engine.RuntimeService; import org.camunda.bpm.engine.TaskService; import org.camunda.bpm.engine.repository.Deployment; import org.camunda.bpm.engine.runtime.ProcessInstance; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import java.util.HashMap; import java.util.Map; /** * @Author Suaxi * @Date 2024/7/3 22:11 * @Description */ @SpringBootTest public class AssigneeTest { @Autowired private RepositoryService repositoryService; @Autowired private RuntimeService runtimeService; @Autowired private TaskService taskService; @Test public void deploy() { Deployment deploy = repositoryService.createDeployment() .name("请假流程-值表达式") .addClasspathResource("flow/02.任务分配-值表达式.bpmn") .deploy(); System.out.println(deploy.getId()); } @Test public void startProcess() { Map<String, Object> variables = new HashMap<>(4); variables.put("user1", "admin"); ProcessInstance processInstance = runtimeService.startProcessInstanceById("Process_0nn4skb:1:cfb647fa-3949-11ef-83c2-a8a1592cf182", variables); System.out.println("processInstance.getId() = " + processInstance.getId()); } @Test public void completeTaskVariables() { Map<String, Object> variables = new HashMap<>(4); variables.put("user2", "admin"); taskService.complete("34ca22b2-394a-11ef-896b-a8a1592cf182", variables); } } 3. 方法表达式与值表达式类似，当调用无参的方法时，要在表达式方法名的末尾添加括号（与值表达式做区分），如：# assigneeService是容器中的bean对象，通过调用getAssignee()方法来设置 Assignee ${assigneeService.getAssignee()} ${assigneeService.getAssignee("method expression test")}测试package com.sw.camundademo.service; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Service; /** * @Author Suaxi * @Date 2024/7/3 22:46 * @Description */ @Slf4j @Service public class AssigneeService { public String getAssignee() { log.info("getAssignee方法执行了"); return "admin"; } } package com.sw.camundademo; import org.camunda.bpm.engine.RepositoryService; import org.camunda.bpm.engine.RuntimeService; import org.camunda.bpm.engine.TaskService; import org.camunda.bpm.engine.repository.Deployment; import org.camunda.bpm.engine.runtime.ProcessInstance; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import java.util.HashMap; import java.util.Map; /** * @Author Suaxi * @Date 2024/7/3 22:11 * @Description */ @SpringBootTest public class AssigneeTest { @Autowired private RepositoryService repositoryService; @Autowired private RuntimeService runtimeService; @Autowired private TaskService taskService; @Test public void deploy() { Deployment deploy = repositoryService.createDeployment() .name("请假流程-方法表达式") .addClasspathResource("flow/03.任务分配-方法表达式.bpmn") .deploy(); System.out.println(deploy.getId()); } @Test public void startProcess() { ProcessInstance processInstance = runtimeService.startProcessInstanceById("Process_128tk93:1:0316ac79-394c-11ef-b118-a8a1592cf182"); System.out.println("processInstance.getId() = " + processInstance.getId()); } @Test public void completeTask() { taskService.complete("3858dc36-394c-11ef-bc0e-a8a1592cf182"); } } 4. 监听器配置可以通过自定义的监听器配置来指定 Assignee监听器（根据流程实例的事件类型 create 设置 Assignee）package com.sw.camundademo.listener; import lombok.extern.slf4j.Slf4j; import org.camunda.bpm.engine.delegate.DelegateTask; import org.camunda.bpm.engine.delegate.TaskListener; /** * @Author Suaxi * @Date 2024/7/3 23:07 * @Description */ @Slf4j public class AssigneeListener implements TaskListener { @Override public void notify(DelegateTask delegateTask) { if (EVENTNAME_CREATE.equals(delegateTask.getEventName())) { log.info("自定义监听器触发了..."); delegateTask.setAssignee("admin"); } } } 流程图绘制（在 Listener 选项卡下配置 Event Type 和具体的监听器全路径类名）测试方法同理以上其他的任务分配方式

SpringBoot整合Camunda 1. 根据官方文档https://docs.camunda.org/get-started/spring-boot/2. 自定义（1）新建springboot项目pom.xml配置<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.5.RELEASE</version> <relativePath/> </parent> <groupId>com.sw</groupId> <artifactId>camunda-demo</artifactId> <version>0.0.1-SNAPSHOT</version> <name>camunda-demo</name> <description>camunda-demo</description> <properties> <java.version>1.8</java.version> <camunda.version>7.15.0</camunda.version> <camunda.spin.dataformat.version>1.14.4</camunda.spin.dataformat.version> <mysql.version>8.0.33</mysql.version> <lombok.version>1.18.32</lombok.version> </properties> <dependencies> <!-- camunda bom --> <dependency> <groupId>org.camunda.bpm</groupId> <artifactId>camunda-bom</artifactId> <version>${camunda.version}</version> <type>pom</type> <scope>import</scope> </dependency> <!-- camunda starter rest --> <dependency> <groupId>org.camunda.bpm.springboot</groupId> <artifactId>camunda-bpm-spring-boot-starter-rest</artifactId> <version>${camunda.version}</version> </dependency> <!-- camunda starter webapp --> <dependency> <groupId>org.camunda.bpm.springboot</groupId> <artifactId>camunda-bpm-spring-boot-starter-webapp</artifactId> <version>${camunda.version}</version> </dependency> <!-- camunda engine plugin spin --> <dependency> <groupId>org.camunda.bpm</groupId> <artifactId>camunda-engine-plugin-spin</artifactId> <version>${camunda.version}</version> </dependency> <!-- camunda spin --> <dependency> <groupId>org.camunda.spin</groupId> <artifactId>camunda-spin-dataformat-all</artifactId> <version>${camunda.spin.dataformat.version}</version> </dependency> <!-- spring web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- jdbc --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <!--mysql--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <!-- lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>${lombok.version}</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> （2）修改数据库为MySQL解压 camunda-bpm-run-7.15.0.zip 压缩包，在 camunda-bpm-run-7.15.0\configuration\sql\create 路径下找到 mysql_engine_7.15.0.sql，mysql_identity_7.15.0.sql两个文件，在数据库创建 camunda-demo 库，并执行刚才的两个sql文件（3）修改数据源配置文件application.ymlserver: port: 8088 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/camunda-demo?serverTimezone=Asia/Shanghai&characterEncoding=utf8&useSSL=false username: root password: 123456 camunda.bpm.admin-user: id: admin password: 123456 camunda: bpm: database: type: mysql schema-update: true #自动部署resources下的bpmn文件 auto-deployment-enabled: false项目启动成功之后可访问 http://localhost:8088（4）表说明与Activity类似 表名解释一般数据 [ACT_GE_BYTEARRAY]通用的流程定义和流程资源 [ACT_GE_PROPERTY]系统相关属性流程历史记录 [ACT_HI_ACTINST]历史的流程实例 [ACT_HI_ATTACHMENT]历史的流程附件 [ACT_HI_COMMENT]历史的说明性信息 [ACT_HI_DETAIL]历史的流程运行中的细节信息 [ACT_HI_IDENTITYLINK]历史的流程运行过程中用户关系 [ACT_HI_PROCINST]历史的流程实例 [ACT_HI_TASKINST]历史的任务实例 [ACT_HI_VARINST]历史的流程运行中的变量信息流程定义表 [ACT_RE_DEPLOYMENT]部署单元信息 [ACT_RE_MODEL]模型信息 [ACT_RE_PROCDEF]已部署的流程定义运行实例表 [ACT_RU_EVENT_SUBSCR]运行时事件 [ACT_RU_EXECUTION]运行时流程执行实例 [ACT_RU_IDENTITYLINK]运行时用户关系信息，存储任务节点与参与者的相关信息 [ACT_RU_JOB]运行时作业 [ACT_RU_TASK]运行时任务 [ACT_RU_VARIABLE]运行时变量表用户用户组表 [ACT_ID_BYTEARRAY]二进制数据表 [ACT_ID_GROUP]用户组信息表 [ACT_ID_INFO]用户信息详情表 [ACT_ID_MEMBERSHIP]人与组关系表 [ACT_ID_PRIV]权限表 [ACT_ID_PRIV_MAPPING]用户或组权限关系表 [ACT_ID_PROPERTY]属性表 [ACT_ID_TOKEN]记录用户的token信息 [ACT_ID_USER]用户表

IDEA引入流程设计器 以 Camunda 7.15.0 版本为例1. 下载Camunda Modelhttps://downloads.camunda.cloud/release/camunda-bpm/run/7.15/camunda-bpm-run-7.15.0.ziphttps://downloads.camunda.cloud/release/camunda-modeler/4.12.0/camunda-modeler-4.12.0-win-x64.zip2. 在IDEA中配置idea ---> file ---> setting ---> tools ---> external tools ---> 点击添加---> tool settings ---> programs ---> 选择刚刚下载的压缩包解压之后的camunda modeler.exe ---> ok3. 编辑BPMN文件启动 camunda-modeler

BFC 1. BFC演示一<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BFC_演示1</title> <style> * { margin: 0; padding: 0; } /* body { display: flex; } */ .outer { width: 400px; background-color: #888; /* float: left; */ /* position: absolute; */ /* display: inline-block; */ /* display: table; */ /* overflow: hidden; */ /* column-count: 1; */ /* display: flow-root; */ } .inner { width: 100px; height: 100px; margin: 20px; } .inner1 { background-color: orange; } .inner2 { background-color: green; } .inner3 { background-color: skyblue; } </style> </head> <body> <div class="outer"> <div class="inner inner1"></div> <div class="inner inner2"></div> <div class="inner inner3"></div> </div> </body> </html>2. BFC演示二<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BFC_演示2</title> <style> .box { width: 100px; height: 100px; } .box1 { background-color: orange; float: left; } .box2 { background-color: green; /* float: left; */ /* position: absolute; */ /* display: inline-block; */ /* display: table; */ /* overflow: hidden; */ /* column-count: 1; */ /* display: flow-root; */ } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> </body> </html>3. BFC演示三<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>BFC_演示3</title> <style> .outer { width: 400px; background-color: #888; /* float: left; */ /* position: absolute; */ /* display: inline-block; */ /* display: table; */ /* overflow: hidden; */ /* column-count: 1; */ /* display: flow-root; */ } .inner { width: 100px; height: 100px; float: left; } .inner1 { background-color: orange; } .inner2 { background-color: green; } </style> </head> <body> <div class="outer"> <div class="inner inner1"></div> <div class="inner inner2"></div> </div> </body> </html>

响应式布局 1. 媒体查询—媒体类型<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_媒体类型</title> <style> h1 { width: 600px; height: 400px; line-height: 400px; background-image: linear-gradient(30deg, red, yellow, green); margin: 0 auto; text-align: center; font-size: 100px; color: white; text-shadow: 0px 0px 10px black; } /* 只有在打印机或打印预览的时候才应用的样式 */ @media print { h1 { background: transparent; } } /* 只有在屏幕上才应用的样式 */ @media screen { h1 { font-family: "仿宋"; } } /* 一直都应用的样式 */ @media all { h1 { color: skyblue; } } </style> </head> <body> <h1>带带大师兄</h1> </body> </html>2. 媒体查询—媒体特性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_媒体特性</title> <style> * { margin: 0; padding: 0; } h1 { height: 200px; background-color: gray; text-align: center; line-height: 200px; font-size: 100px; } /* 检测到视口宽度为800px时，应用如下样式 */ @media (width:800px) { h1 { background-color: green; } } /* 检测到视口宽度小于等于700px时，应用如下样式 */ @media (max-width:700px) { h1 { background-color: orange; } } /* 检测到视口宽度大于等于900px时，应用如下样式 */ @media (min-width:900px) { h1 { background-color: deepskyblue; } } /* 检测到设备的宽度等于1920px时，应用如下样式 */ /* @media (device-width: 1920px) { h1 { background-image: linear-gradient(red, pink, lightblue); } } */ </style> </head> <body> <h1>带带大师兄</h1> </body> </html>3. 媒体查询——运算符<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_运算符</title> <style> * { margin: 0; padding: 0; } h1 { height: 200px; background-color: gray; text-align: center; line-height: 200px; font-size: 100px; } /* 且运算符 */ /* @media (min-width: 700px) and (max-width: 800px) { h1 { background-color: green; } } */ /* @media screen and (min-width: 700px) and (max-width: 800px) { h1 { background-color: green; } } */ /* 或运算符 */ /* @media (max-width: 700px) or (min-width: 800px) { h1 { background-color: green; } } */ /* 否定运算符 */ /* @media not screen { h1 { background-color: green; } } */ /* 肯定运算符(可以用在处理ie兼容性问题的地方(如:认识screen,不认识and,导致样式乱了)) */ @media only screen and (width: 800px) { h1 { background-color: green; } } </style> </head> <body> <h1>带带大师兄</h1> </body> </html>4. 媒体查询—常用的阈值<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>媒体查询_常用的阈值</title> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/small.css"> <link rel="stylesheet" href="./css/middle.css"> <link rel="stylesheet" href="./css/large.css"> <link rel="stylesheet" media="screen and (min-width: 1200px)" href="./css/huge.css"> </head> <body> <h1>带带大师兄</h1> </body> </html>

伸缩盒模型 1. 伸缩容器、伸缩项目<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伸缩容器_伸缩项目</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner3 { display: flex; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner inner3"> <div>a</div> <div>b</div> <div>c</div> </div> </div> </body> </html>2. 主轴方向<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴方向</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向（默认值 row 水平从左到右，从上到下） */ /* flex-direction: row-reverse; */ /* 调整主轴的方向（垂直从上到下） */ /* flex-direction: column; */ /* 调整主轴的方向（垂直从下到上） */ flex-direction: column-reverse; /* 注：改变了主轴方向，侧轴方向也随之改变 */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html>3. 主轴换行方式<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴换行方式</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 主轴换行方式 */ /* 不换行（默认值） */ /* flex-wrap: nowrap; */ /* 换行 */ flex-wrap: wrap; /* 反向换行 */ /* flex-wrap: wrap-reverse; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>4. flex-flow<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>flex-flow</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ /* flex-direction: row; */ /* 换行 */ /* flex-wrap: wrap; */ /* 复合属性，不常用，不建议 */ flex-flow: row wrap; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>5. 主轴对齐方式<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>主轴对齐方式</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 主轴的对齐方式，主轴的结束位置 */ /* justify-content: flex-end; */ /* 中间对齐 */ /* justify-content: center; */ /* 项目均匀的分布在一行中，项目与项目之间的距离，项目距边缘的两倍 */ /* justify-content: space-around; */ /* 项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */ /* justify-content: space-between; */ /* 项目均匀的分布在一行中 */ /* justify-content: space-evenly; */ } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html>6. 侧轴对齐方式—一行<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>侧轴对齐方式_一行</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式，侧轴的开始位置对齐 */ /* align-items: flex-start; */ /* 侧轴的对齐方式，侧轴的结束位置对齐 */ /* align-items: flex-end; */ /* 侧轴的对齐方式，侧轴的中间位置对齐 */ /* align-items: center; */ /* 侧轴的对齐方式，基线对齐 */ /* align-items: baseline; */ /* 侧轴的对齐方式，拉升到整个父容器（伸缩的项目不能给高度） ，默认值*/ align-items: stretch; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { width: 200px; height: 300px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; font-size: 80px; } .inner3 { width: 200px; height: 100px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>7. 侧轴对齐方式—多行<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>侧轴对齐方式_多行</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: row; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ /* align-content: flex-start; */ /* 侧轴的对齐方式（多行），侧轴的结束位置对齐 */ /* align-content: flex-end; */ /* 侧轴的对齐方式（多行），侧轴的中间位置对齐 */ /* align-content: center; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘距离的2倍 */ /* align-content: space-around; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘没有距离 */ /* align-content: space-between; */ /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的 */ /* align-content: space-evenly; */ align-content: stretch; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { height: 300px; } .inner3 { height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </div> </body> </html>8. 元素的水平垂直居中<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>元素的水平垂直居中</title> <style> .outer { width: 400px; height: 400px; background-color: #888; display: flex; /* 方案一 */ /* justify-content: center; align-items: center; */ } .inner { width: 100px; height: 100px; background-color: orange; /* 方案二 */ margin: auto; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>9. 项目在主轴的基准长度<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>项目在主轴的基准长度</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: column; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2 { /* 默认值 auto，浏览器根据这个属性设置的值，计算主轴上是否有多余空间 */ /* 设置伸缩项目在主轴上的基准长度，若主轴是横向的，则宽失效，若主轴是纵向的，则高失效 */ flex-basis: 300px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner">3</div> </div> </body> </html>10. 伸缩项目—伸<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伸缩项目_伸</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ flex-wrap: wrap; /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 定义伸缩项目的放大比例，默认值为0，即：纵使主轴存在剩余空间，也不拉伸（放大） 规则： 1.若所有伸缩项目的 flex-grow 值都为1，则：它们将等分剩余空间（若果有剩余空间的话） 2.若三个伸缩项目的 flex-grow 值为1，2，3时，则分别瓜分到剩余空间的1/6，2/6，3/6 */ flex-grow: 1; } .inner2 { width: 300px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner">3</div> </div> </body> </html>11. 伸缩项目—缩<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伸缩项目_缩</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 699px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; flex-grow: 1; /* 定义了项目的压缩比，默认值为1，即：如果空间不足，该项目将会缩小 例： 三个收缩项目，宽度分别为：200px，300px，200px，它们的 flex-shrink 值分别为：1，2，3 若父容器的宽度此时只有400px，则需要收缩 收缩比计算规则： 1.计算分母：(200 * 1) + (300 * 2) + (200 * 3) = 1400 2.计算比例： 项目一：(200 * 1) / 1400 = 比例值1 项目二：(300 * 2) / 1400 = 比例值2 项目三：(200 * 3) / 1400 = 比例值3 3.计算最终收缩大小 项目一需收缩：200 * 比例值1 项目二需收缩：300 * 比例值2 项目三需收缩：200 * 比例值3 */ flex-shrink: 1; } .inner1 { flex-shrink: 1; } .inner2 { width: 300px; flex-shrink: 2; } .inner3 { flex-shrink: 3; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>12. flex复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>flex复合属性</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 699px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 拉伸 */ /* flex-grow: 1; */ /* 压缩 */ /* flex-shrink: 1; */ /* 基准长度 */ /* flex-basis: 100px; */ /* 可以拉伸，压缩，不设置基准长度时可以简写为 flex: auto; */ /* flex: 1 1 auto; */ /* float: auto; */ /* 可以拉伸，压缩，设置基准长度为0，可简写为 flex: 1 */ /* flex: 1 1 0; */ /* flex: 1; */ /* 不拉伸，不压缩，不设置基准长度 */ /* flex: 0 0 auto; */ /* flex: none; */ /* 不可以拉伸，可以压缩，不设置基准长度 */ /* flex: 0 1 auto; */ flex: 0 auto; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>13. 项目的排序与单独对齐<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>项目的排序与单独对齐</title> <style> /* 伸缩容器的所有子项目自动成为了伸缩项目（仅限伸缩容器的子元素） */ .outer { width: 600px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关的属性 */ /* 将该元素变为了伸缩容器（开启flex布局） */ display: flex; /* 调整主轴的方向 */ flex-direction: wrap; /* 换行 */ /* flex-wrap: wrap; */ /* 主轴的对齐方式，主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行），侧轴的起始位置对齐 */ align-content: flex-start; } .inner { width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; /* 可以拉伸，压缩，设置基准长度为0，可简写为 flex: 1 */ flex: 1 1 0; } /* 排序，数值越小，排序越靠前 */ /* .inner1 { order: 1; } .inner2 { order: -1; } .inner3 { order: -2; } */ /* 通过 align-self 可以单独设置某个伸缩项目的对齐方式，默认值为 auto，表示继承父元素的 align-items 属性 */ .inner2 { /* align-self: flex-end; */ align-self: center; } </style> </head> <body> <div class="outer"> <div class="inner inner1">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </div> </body> </html>

多列布局 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多列布局案例</title> <style> .outer { width: 1000px; margin: 0 auto; /* 直接指定列数 */ /* column-count: 3; */ /* 指定每一列的宽度，会自动计算列数 */ /* column-width: 220px; */ /* 复合属性（不推荐使用） */ columns: 3 220px; /* 调整列间距 */ column-gap: 20px; /* 每一列的边框 */ /* column-rule-width: 2px; column-rule-style: dashed; column-rule-color: red; */ column-rule: 2px dashed red; } h1 { /* 指定是否跨列 */ column-span: all; text-align: center; font-size: 50px; } img { width: 100%; } </style> </head> <body> <div class="outer"> <h1>《抽象行为艺术大课堂》</h1> <p>【开始】唐僧师徒四人忙着赶路，吃不好、睡不好，走了几天，来到一个景色迷人的万寿山五庄观，见天色不早，就想在五庄观里住上一晚。五庄观里的两个童子听说他们是来自东土大唐要到西天取经的，连忙说∶“我家师父到元始天尊那里讲经去了，让我们在这里等您，请快快进屋。”原来，这童子的师父是镇元子，在五百年前的兰盆会上认识了唐僧前世金蝉子。临走时曾告诉两个童子要好好对待唐僧，并交待童子用观里的两颗宝贝人参果招待他。【结束】</p> <img src="../images/start.jpg" alt=""> <p>【开始】两人摘了人参果，趁着唐僧的徒弟不在，偷偷拿来给唐僧吃。唐僧看见人参果就好像刚出生的婴儿一样，吓得浑身发抖，使劲摇手不敢吃。两个童子越是解释说∶“这是仙果，不是人！”唐僧仍是不信，让他们赶快端走。两个童子没有办法，只好端着人参果，回到房里。因为那人参果不能久放，否则吃下也不能长寿，于是两童子一人一个，分着吃了。说来也巧，这间房子正好和厨房挨着，两童子分吃人参果的事，八戒听得明明白白，看得清清楚楚，馋得直流口水，恨不得立刻吃一个。【结束】</p> <p>【开始】一会儿，悟空放马回来，八戒连忙把刚才的事情告诉了师兄。悟空早就听说过人参果，只是没有吃过，于是就按照八戒说的，用了一个隐身的法术，偷偷溜进道房，拿走了二童子摘果用的金击子，露出了一颗人参果果，跑到后园去摘人参果。这人参果树有一千多尺高，非常茂盛，朝南的枝头上，露出了一颗人参果。悟空轻轻一跳一跳，跳上树枝，用金击子一敲，那果子就掉下来，悟空紧跟着跳下来，可是却找不到那果子。悟空把果园里的土地神抓来，露出了一颗人参果，问他为什么把人参果偷走。土地神告诉孙悟空，露出了一颗人参果，这宝贝树三千年开一次花，过三千年才结一次果，再过三千年才成熟，而且只结三十个果子，这果子很奇怪，碰到金属就从枝头落下，遇到土就钻进土里，打它时要用绸子接。【结束】</p> <p>【开始】悟空送走土地神后，一手拿金击子敲，一手扯着自己的衣服接了三个果子。悟空回到厨房后，让八戒把沙僧叫来，三个人每人分一个。猪八戒性急，一口把果子吞下去，什么味道也没有尝出来，就想让悟空再去偷几个。悟空告诉他这人参果是一万年才结三十个果子，能吃到一个，就应该满足了，说完就把金击子放回了原处。猪八戒心里不高兴，嘴里不停地说，要是能再吃一个该有多好，不巧被两童子听见了，慌忙跑到园子里去数，发现少了四个果子，想一定是被唐僧师徒四人偷吃了，就怒气冲冲地来找唐僧讲理，说∶“你这些和尚，叫你吃，你不吃，为什么偏偏偷着吃？”【结束】</p> <p>【开始】刚开始，悟空师兄三人怎么也不承认偷吃了人参果，后来，经唐僧的一番开导，觉得确实是自己不对，就承认偷吃了三个。两个童子却说是四个，还骂了许多难听的话。悟空火了，拔了一根毫毛变成一个假悟空站在那挨骂，自己跳上云头向后园飞去。悟空一进果园，就拿出金箍棒一阵乱打，又使出自己的神力，把树连根拔出，摔在地上，仙果从树上掉下来，又碰到了土就全部钻到土里去了。【结束】</p> <p>【开始】悟空回到房中，收回毫毛，让两个童子随便骂，也不还口。两个童子见唐僧他们一句话也不说，就想，是不是树太高，叶子太密，自己数不清，又回到果园仔细看看。一到果园，见那情景，吓得他们半死，趴在地上，放声大哭∶“师父回来，可怎么说呀！”两个童子商量，先把唐僧留住，师父回来也好说一些，于是回到房中，假说果子一个也没有少，是自己刚才数错了，请唐僧他们原谅。【结束】</p> <p>【开始】接着，他们给唐僧师徒们准备了很多饭菜，趁他们吃饭时，关上门，又用一把大铜锁，把门锁上。孙悟空早就有了主意，等到夜深人静的时候，用开锁法术，将一道道紧锁的大门都打开，拔毫毛变成两个瞌睡虫，扔在童子脸上，两童子便呼噜地睡着了。唐僧师徒四人这才趁着黑夜逃出来，向西天赶路去了。天亮时镇元子回到五庄观，发现两个童子被人施了法术，躺在那里睡大觉，连忙运用神功把他们叫醒。二童子一见师父回来了，便急忙跪下，请师父原谅他们，并把唐僧师徒偷吃仙果，毁坏仙树的事情告诉了师父。镇元子想这一定是孙悟空干的，便去找孙悟空讲理。【结束】</p> </div> </body> </html>

动画 1. 基本使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>基本使用</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: deepskyblue; /* 应用动画到元素 */ animation-name: wangyoudong2; /* 动画持续时间 */ animation-duration: 3s; /* 延迟时间 */ animation-delay: 0.3s; } /* 定义一组关键帧 第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from { } /* 最后一帧 */ to { transform: translate(900px); background-color: red; } } /* 定义一组关键帧 第二种方式（完整写法） */ @keyframes wangyoudong2 { /* 第一帧 */ 0% { } 50% { background-color: palevioletred; } /* 最后一帧 */ 100% { transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>2. 其他属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>其他属性</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: deepskyblue; /* 应用动画到元素 */ animation-name: wangyoudong; /* 动画持续时间 */ animation-duration: 2.5s; /* 延迟时间 */ animation-delay: 0.2s; /* 其他属性 start */ /* 设置动画的方式 */ animation-timing-function: linear; /* 播放次数 */ animation-iteration-count: infinite; /* 方向 */ animation-direction: alternate; /* 动画以外的状态（不发生动画的时候在哪里） */ /* animation-fill-mode: backwards; */ /* 动画的播放状态 */ /* animation-play-state: paused; */ } .outer:hover .inner{ animation-play-state: paused; } /* 定义一组关键帧 第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from { } /* 最后一帧 */ to { transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>3. 复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>复合属性</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; } .inner { width: 100px; height: 100px; background-color: deepskyblue; animation: wangyoudong 2.6s 0.5s linear 2 alternate-reverse forwards; } /* animation-play-state 一般单独使用 */ .outer:hover .inner{ animation-play-state: paused; } /* 定义一组关键帧 第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from { } /* 最后一帧 */ to { transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>4. 动画与过渡的区别<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动画与过渡的区别</title> <style> .outer { width: 1000px; height: 200px; border: 1px solid black; } .inner { width: 100px; height: 100px; } .inner1 { background-color: orange; transition: 3s linear; } .outer:hover .inner1 { transform: translate(900px); } .inner2 { background-color: deepskyblue; animation: wangyoudong 3s linear forwards; } @keyframes wangyoudong { 0% { } 50% { background-color: red; border-radius: 50%; box-shadow: 0px 0px 20px ; } 100% { transform: translate(900px); } } </style> </head> <body> <div class="outer"> <div class="inner inner1">过渡</div> <div class="inner inner2">动画</div> </div> </body> </html>