Spring Boot学习笔记 目录 一、Spring Boot简介 二、Spring Boot的主要特性 2.1、自动配置 2.2、起步依赖（Starters） 2.3、简化配置 2.4、内置服务器 2.5、无代码生成与 XML 配置 三、Spring Boot的配置 3.1、配置文件类型 3.1.1、application.properties 3.1.2、application.yaml（或.yml） 3.2、配置优先级 3.2.1、配置文件位置的优先级 3.2.2、配置文件格式的优先级 3.3、读取配置文件的方式 3.3.1、使用@Value注解 3.3.2、使用Environment对象 3.3.3、将部分配置封装成实体类 3.4、多环境开发时配置文件的切换 3.5、yml配置文件示例 四、整合MyBatis 4.1、添加起步依赖 4.2、添加配置 4.3、扫描Mapper接口 五、使用Maven打包Spring Boot项目 一、Spring Boot简介 Spring Boot 是 Spring 框架的一个扩展，旨在简化 Spring 应用的初始搭建和开发过程。它通过自动配置和约定优于配置的原则，提供一个开箱即用的应用程序架构，能够快速构建独立运行的 Spring 应用，开发者基于 Spring Boot 的预置结构继续开发，省时省力。 Spring Boot 官方文档：https://docs.spring.io/spring-boot/index.html Spring 中文网翻译的 Spring Boot 中文文档：https://springdoc.cn/spring-boot 通过 IDEA 创建 Spring Boot 项目： 添加核心依赖 Spring Web： 除了用 IDEA 创建 Spring Boot 项目，也可以直接访问 Spring Boot 项目生成网站，设定项目的元数据（如项目类型、语言、Spring Boot 版本等）之后，创建好的项目就会以压缩包的格式下载到本地，解压导入到开发工具即可。 Spring Boot 项目生成网站： https://start.spring.io/：Spring Boot 官方的项目生成工具，Java 版本和 Spring Boot 版本都比较新，国内有可能访问不了或访问速度比较慢 https://start.springboot.io/：官方项目生成工具的国内镜像，Java 版本和 Spring Boot 版本与官网一致，国内都能访问 https://start.aliyun.com/：从域名能看出来是阿里云镜像，国内都能访问，而且能用旧的 Java 版本和 Spring Boot 版本生成项目 一个典型的 Spring Boot 项目结构如下： SpringBoot-project/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── example/ │ │ │ └── MyApplication.java │ │ └── resources/ │ │ ├── application.properties │ │ └── static/ │ │ └── templates/ │ └── test/ │ └── java/ │ └── com/ │ └── example/ │ └── MyApplicationTests.java ├── pom.xml └── README.md MyApplication.java：Spring Boot 应用的主类，使用 @SpringBootApplication 注解标记。 application.properties：Spring Boot 应用的配置文件，可以配置各种属性。 static/：存放静态资源文件，例如 HTML、CSS、JavaScript 文件等。 templates/：存放模板文件，例如 Thymeleaf、Freemarker 等。 二、Spring Boot的主要特性 2.1、自动配置 开发者无需手动配置大量 XML 或注解，Spring Boot 能够根据项目中添加的依赖，自动为应用程序生成合理的默认配置，减少手动配置。例如，在项目中添加了 spring-boot-starter-web 依赖，Spring Boot 会自动配置嵌入式的 Tomcat 服务器，并为 Spring MVC 设置好必要的组件，如 DispatcherServlet 等，无需开发者手动编写大量的配置代码。 2.2、起步依赖（Starters） 起步依赖是指对常用库和框架的依赖声明的集合，使用起步依赖可以一次性地添加相关的依赖和配置到项目中，大大简化了项目的依赖管理，减少因依赖冲突而导致的问题。 比如，spring-boot-starter-data-jpa 包含了使用 Spring Data JPA 进行数据库操作所需的所有依赖，包括 Hibernate、Spring Data JPA 和数据库连接池等。 2.3、简化配置 Spring Boot 使用 application.properties 或 application.yml 作为统一的配置文件，将应用程序的各种配置集中管理，并且提供默认配置，尽量减少开发者的手动配置。这些配置文件放置在项目的类路径下，Spring Boot 会自动加载并应用其中的配置。 并且 Spring Boot 支持多环境配置，允许开发者根据不同的运行环境（如开发、测试、生产）使用不同的配置文件。通过在配置文件名中使用 {profile} 占位符，如 application-dev.yml、application-prod.yml，并在 application.yml 中指定 spring.profiles.active 属性来激活相应的环境配置。 2.4、内置服务器 Spring Boot 支持嵌入式的服务器，如 Tomcat、Jetty 和 Undertow 等，开发者可以将应用程序打包成一个可执行的 JAR 文件，使用 java -jar 命令可启动服务，无需单独部署到外部的应用服务器上。 例如，在开发 Web 应用时，只需在 pom.xml 文件中添加 spring-boot-starter-web 依赖，Spring Boot 会自动配置并启动一个嵌入式的 Tomcat 服务器，让开发者可以快速进行开发和测试。 2.5、无代码生成与 XML 配置 Spring Boot 无需代码生成和 XML 配置，完全基于注解和 Java 配置。 三、Spring Boot的配置 3.1、配置文件类型 Spring Boot 支持两种主要的配置文件类型：application.properties 和 application.yaml（.yml）。 3.1.1、application.properties 这是传统的 Java 配置文件格式，每行定义一个属性，采用 key=value 的形式。例如： server.port=8080 spring.datasource.url=jdbc:mysql://localhost:3306/spring_db spring.datasource.username=root spring.datasource.password=password 3.1.2、application.yaml（或.yml） YAML（YAML Ain't Markup Language）是一种人类可读的数据序列化格式，它的特点包括： 使用缩进（空格数不限）表示层级关系（必须用空格缩进，不能使用 Tab） 使用 key: value 的形式表示键值对 支持列表、嵌套结构等复杂数据类型 例如： server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/mydb username: root password: password 关于 .yaml 和 .yml 的区别： 在 Spring Boot 项目中，YAML 文件通常以 .yaml 或 .yml 作为文件扩展名。 这两种扩展名本质上是相同的，它们都表示 YAML 格式的文件。.yaml 是 YAML 文件的官方推荐扩展名，而 .yml 是 .yaml 的简写形式。在功能上两者完全等价，Spring Boot 对它们的解析方式没有任何区别，无论使用 .yaml 还是 .yml，Spring Boot 都能正确加载和解析配置文件。 如果同时存在 application.yaml 和 application.yml，Spring Boot 会优先加载 application.yml。 3.2、配置优先级 3.2.1、配置文件位置的优先级 优先级最高的配置是命令行参数，通过命令行传递的这个参数将会覆盖原配置： java -jar app.jar --server.port=9999 不同位置配置文件的优先级分别为： 项目根目录下的 /config 子目录中的配置文件 项目根目录中的配置文件 类路径下的 /config 包中的配置文件 类路径根目录中的配置文件 3.2.2、配置文件格式的优先级 如果在同一个目录下同时存在 application.properties、application.yml、application.yaml 这几个文件，那么 Spring Boot 对配置文件的加载优先级为： application.properties > application.yml > application.yaml 3.3、读取配置文件的方式 假设在 YAML 配置文件中存在如下配置： server: port: 8081 spring: datasource: url: jdbc:mysql://localhost:3306/spring_db?useSSL=false&serverTimezone=UTC username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver userInfo: name: 张三 age: 30 likes: - 游戏 - 健身 - 读书 3.3.1、使用@Value注解 @Value 注解可以直接将配置文件中的单个属性值注入到类的字段中。 @Component public class ConfiurationBean { // 简单属性 @Value("${spring.datasource.url}") private String url; // 数组 @Value("${userInfo.likes}") private String[] likes; // 数组里的其中一个属性 @Value("${userInfo.likes[1]}") private String like; // ... } 3.3.2、使用Environment对象 在 Spring Boot 中，Environment（org.springframework.core.env.Environment）是一个用于管理应用程序运行时环境配置信息的接口，它可以使开发者方便地获取和使用项目的配置参数，无论是来自 application.properties、application.yml 文件，还是系统环境变量、命令行参数等。 在需要使用 Environment 对象的类中，可以使用 @Autowired 注解将 Environment 对象自动注入进来，然后在类的方法中使用 getProperty() 方法获取配置信息。 @Component public class ConfiurationBean { @Autowired private Environment env; public void printProperty() { // 获取并使用属性 String port = env.getProperty("server.port"); System.out.println(port); } } 3.3.3、将部分配置封装成实体类 创建一个 Java 实体类，属性与配置项一一对应，使用 @ConfigurationProperties 注解将配置文件中的属性绑定到该 Java 对象上： @Component @ConfigurationProperties(prefix = "userInfo") public class UserInfo() { private String name; private int age; private String[] likes; // get方法、set方法、构造方法 } 3.4、多环境开发时配置文件的切换 在项目的开发中，常常需要在多个环境（开发环境 dev、生产环境 prod 等）部署项目，并且每个环境的配置可能都不太一样（如日志等级、数据库属性等），因此每个环境都有单独的一个配置文件。 Spring Boot 支持根据不同的环境加载不同的配置文件，常用的做法是建一个公共配置文件 application.properties 或 application.yml 来存放每个环境中相同的配置，再给每一个环境建一个单独的配置文件存放个性化配置，该配置文件的命名规则为 application-{profile}.properties 或 application-{profile}.yml。 例如开发环境的配置文件为 application-dev.yml，生产环境的配置文件为 application-prod.yml，则在公共配置文件 application.yml 中激活指定配置文件的方式为： spring: profiles: active: dev 也可以在启动项目 JAR 文件时通过命令行参数 spring.profiles.active 指定： java -jar app.jar --spring.profiles.active=dev 如果既在公共配置文件 application.yml/application.properties 中指定了激活哪个配置文件，又通过命令行参数指定，则最后生效的是命令行参数，因为命令行参数的优先级最高。 在 IDEA 中也可以直接指定命令行参数： 新版本 IDEA： 3.5、yml配置文件示例 server: port: 8081 spring: datasource: url: jdbc:mysql://127.0.0.1:3306/spring_db?useSSL=false&setUnicode=true&characterEncoding=utf8&serverTimezone=UTC username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver # 数据源用druid type: com.alibaba.druid.pool.DruidDataSource # MyBatis配置 mybatis: # 指定Mapper XML文件的位置 mapper-locations: classpath:mapper/*.xml # 实体类的包路径 type-aliases-package: com.example.demos.web configuration: # 开启驼峰命名映射 map-underscore-to-camel-case: true # 项目日志等级 logging: level: # 全局日志等级 root: info # 设置MyBatis的日志级别为DEBUG com.example.mapper: debug org.mybatis: debug org.apache.ibatis: debug # 自定义配置 四、整合MyBatis 4.1、添加起步依赖 新版 IDEA 中可以直接在 pom.xml 文件的 <dependencies> 标签旁边点击 “Add Starters” 添加 MyBatis 与 MySql 的起步依赖： 或者手动在 pom.xml 文件中添加 MyBatis 的起步依赖与 MySQL、Druid 的依赖坐标： <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.2.22</version> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.4</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> 4.2、添加配置 然后在配置文件中添加数据源与 MyBatis 配置： spring: datasource: url: jdbc:mysql://127.0.0.1:3306/spring_db?useSSL=false&setUnicode=true&characterEncoding=utf8&serverTimezone=UTC username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver # 使用druid数据源 type: com.alibaba.druid.pool.DruidDataSource # MyBatis配置 mybatis: # 指定Mapper XML文件的位置 mapper-locations: classpath:mapper/*.xml # 实体类的包路径 type-aliases-package: com.example.demos.web # 指定MyBatis的全局配置文件位置，可以进行更细颗粒度的MyBatis配置，不需要就不写 # config-location: classpath:mybatis-config.xml configuration: # 开启驼峰命名映射 map-underscore-to-camel-case: true # 项目日志等级 logging: level: # 全局日志等级 root: info # 设置MyBatis的日志级别为DEBUG com.example.mapper: debug org.mybatis: debug org.apache.ibatis: debug 4.3、扫描Mapper接口 最后在写接口的时候在上面用 @Mapper 注解标记一下这是 MyBatis 的 Mapper 接口： @Mapper public interface UserMapper { User select(); // ... } 或者直接在 Spring Boot 启动类上面用注解 @MapperScan() 进行全局配置扫描，指定 Mapper 接口类的包路径，Spring 会自动扫描该包下的所有接口，并将其注册为 MyBatis 的 Mapper 接口，无需在每个接口上都添加 @Mapper 注解。 @SpringBootApplication @MapperScan("com.example.mapper") public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } } 至此，Spring Boot 框架整合 MyBatis 框架完成。 五、使用Maven打包Spring Boot项目 在 pom.xml 文件中，确保配置了 Spring Boot Maven 插件： <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.6.3</version> <configuration> <!-- 指定启动程序主类 --> <mainClass>com.example.demo.DemoApplication</mainClass> <skip>false</skip> </configuration> </plugin> </plugins> </build> 在项目根目录下运行打包的命令： # 其实是两条命令，mvn clean是清除项目target目录下的文件，mvn package打包命令，两个命令一起执行。 # -Dmaven.test.skip=true表示排除测试代码之后打包 mvn clean package -Dmaven.test.skip=true 或者在 IDEA 中依次操作 clean 与 package： 打包时，一般都要先进行 clean 操作清理项目之前构建过程中生成的临时文件和输出文件，使项目恢复到初始状态，目的是确保项目不会受到之前构建结果的影响，避免旧的文件干扰新的构建过程。 打包完成后，会生成两个 JAR 文件，其中一个后缀为 .original，只包含工程中的 Class，不包含依赖；另一个后缀为 .jar 的文件是 SpringBoot 打包插件创建的，包含了应用依赖和 Spring Boot 相关的 Class，可以直接运行。生成的 JAR 文件保存在 target 目录下，文件名为 {项目名称}-{版本号}.jar。例如：demo-0.0.1-SNAPSHOT.jar 使用以下命令运行打包好的 JAR 文件： java -jar demo-0.0.1-SNAPSHOT.jar 并且可以通过命令来指定部分参数： java -jar demo-0.0.1-SNAPSHOT.jar --server.port=9999 --spring.profiles.active=prod

总结一下CSS3中的Flex布局语法 前排提示： 本篇博客篇幅较长，建议结合目录查看！ 目录： 0x01. Flex 布局简介 如何应用 Flex 布局 0x02. 基本概念 0x03. 用于父元素的属性 3.1、flex-direction 属性取值 图示说明 CSS代码 3.2、flex-wrap 属性取值 图示说明 CSS代码 3.3、flex-flow 3.4、justify-content 属性取值 图示说明 CSS代码 3.5、align-items 属性取值 图示说明 CSS代码 3.6、align-content 属性取值 图示说明 CSS代码 0x04. 用于子元素的属性 4.1、flex-grow 属性取值 图示说明 CSS代码 4.2、flex-shrink 属性取值 图示说明 CSS代码 4.3、flex-basis 属性取值 CSS代码 4.4、flex 4.5、align-self 属性取值 图示说明 CSS代码 4.6、order 属性取值 0x05. 简单应用 Flex 布局有时候会用到，但是始终分不清楚其中的部分属性及其含义，所以用这篇博客专门总结一下 Flex 布局。 特别说明：博主初入门 Flex 布局看的是Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)这篇教程，教程整体上条理清晰，讲得通俗易懂，但是不太方便快速查阅相关属性。因此本篇博客将以这篇教程为基础（所以不可避免地在文章结构与部分内容上可能会与教程有很大部分相似），以我自己的理解重新总结一遍 Flex 布局，以方便我自己查阅。如果您认为本篇博客讲的不够清楚，建议您参考教程原文。 另外，关于 Flex 布局中的属性效果演示，推荐看这个视频： {bilibili bvid="BV1oK4y1j7pa" page=""/} 0x01. Flex 布局简介 网页布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直水平居中就不容易实现。 2009年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 简单来说，Flex 布局可以极大地改善对于父元素和多个子元素进行布局的难度。 如何应用 Flex 布局 刚开始接触到 Flex 布局的时候，那么多的属性及其含义倒不是首要问题，最大的问题是不知道如何去应用 Flex 布局。 其实给一个元素添加 Flex 布局很简单，只需要在 CSS 代码中设置其 display 属性为 flex 或者 inline-flex 即可。其中，对于Webkit 内核的浏览器，还必须加上-webkit前缀。 对于div、p、form、ul、ol等这些块状元素，使用 Flex 布局的方式为（以 div 为例）： div{ display:flex; display:-webkit-flex } 对于诸如 span 等行内元素来说需要将属性值更换为 inline-flex： span{ display:inline-flex; display:-webkit-inline-flex; } 注意：设置 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 0x02. 基本概念 将采用了 Flex 布局的元素称为 Flex 容器（flex container）。它的所有子元素将自动成为容器成员，成为 Flex 项目（flex item）。 在 Flex 容器中，默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）（不知道为什么会起这么奇怪的名字）。 其中，主轴的开始位置叫做 main start，结束位置叫做 main end；而交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。 子元素默认沿主轴排列，单个子元素所占的主轴空间叫做 main size，占据的交叉轴空间为 cross size。 以上就是在 Flex 布局中涉及到的一些基本概念。 除了基本概念之外，还有许多 Flex 布局会用到的属性，根据这些属性的使用位置可以简单将其分为两类，分别是应用在父元素（容器）上的属性和应用在子元素（项目）上的属性。下面分别对其进行简单的介绍与解释。 0x03. 用于父元素的属性 3.1、flex-direction flex-direction属性决定主轴的方向，表现就是 Flex 容器中子元素的排列方向（比如说横向或纵向）。 属性取值 默认值为 row。 属性名 含义 row（默认值） 主轴为水平方向，起点在左端 row-severse 主轴为水平方向，起点在右端 column 主轴为垂直方向，起点在上边 column-reverse 主轴为垂直方向，起点在下边 图示说明 CSS代码 .box { flex-direction: row | row-reverse | column | column-reverse; } 3.2、flex-wrap 默认情况下，子元素都排在一条轴线上。 当子元素多到一条轴线排列不下的时候，用 flex-wrap 就可以定义这些子元素换行的形式，比如顺序、倒序之类的。 属性取值 默认取值为 nowrap，即不换行。 属性名 作用 nowrap（默认） 不换行 wrap 换行，第一行在上方 wrap-reverse 换行，第一行在下方 图示说明 CSS代码 .box { flex-wrap: nowrap | wrap | wrap-reverse; } 3.3、flex-flow flex-flow 属性是 flex-direction 和 flex-wrap 的缩写形式。 默认值为 row nowrap。 3.4、justify-content justify-content 属性定义了子元素在主轴上的对齐方式（比如靠左/右/上/下、居中等等）。 注意：这个属性与 flex-direction 有区别，不能混淆。 属性取值 默认值为 flex-start。 属性名 作用 flex-start（默认） 左对齐 flex-end 右对齐 center 居中 space-between 两端对齐，子元素之间的间隔相等 space-around 每个子元素两侧的间距相等 space-evenly 子元素之间的间隔和子元素与边框的间隔相等（兼容性较差） 图示说明 CSS代码 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 3.5、align-items align-items 属性定义子元素在交叉轴上的对齐方式（与 justify-content 属性类似）。 属性取值 默认值为 stretch。 属性名 作用 stretch（默认） 表示如果子元素未设置高度或设为auto，将占满整个容器的高度 flex-start 从交叉轴的起点对齐 flex-end 从交叉轴的终点对齐 center 从交叉轴的中点对齐 baseline 按照子元素的第一行文字的基线对齐 图示说明 CSS代码 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 3.6、align-content align-content 属性定义了多根轴线的对齐方式。如果子元素只有一根轴线，则属性不起作用。 属性取值 默认值为 stretch。 属性名 作用 flex-start 沿交叉轴的起点对齐 flex-end 沿交叉轴的终点对齐 center 沿交叉轴的中点对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch（默认值） 轴线占满整个交叉轴 图示说明 CSS代码 .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 0x04. 用于子元素的属性 4.1、flex-grow 元素布局时经常会出现这样的情况，当所有子元素水平排列时的宽度之和（或者纵向排列时的高度之和）小于父元素的宽度（高度）时，则当前父元素在这个方向上就会出现剩余空间。那么此时就可以用 flex-grow 属性来分配这些剩余空间，以使子元素完全填充父元素。 属性取值 flex-grow 属性的值是一个数字，没有单位。 默认值为0，表示如果存在剩余空间，也不会放大子元素的宽度（或高度）。 当给子元素的 flex-grow 属性值设置为一样时，表示平均分配这个方向上的宽度（高度），可以利用这点来给元素做等宽布局。 如果一个子元素的 flex-grow 属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。 注意：当子元素的宽度/高度（width/height）属性与 flex-grow 同时存在时，元素最终的宽度/高度将由 flex-grow 属性来决定。 图示说明 CSS代码 .item { flex-grow: <number>; /* default 0 */ } 4.2、flex-shrink 这个属性的含义与 flex-grow 相反，当剩余空间较小不足以容纳所有子元素时，就可用这个属性指定某个子元素的缩小比例。 属性取值 类似 flex-grow，flex-shrink 属性的值也是一个数字。该属性默认值为1，即如果空间不足，该子元素将缩小。 如果所有子元素的 flex-shrink 属性都为1，当空间不足时，这些子元素都将等比例缩小。 如果一个子元素的 flex-shrink 属性为0，其他子元素属性为1，则空间不足时，前者不缩小。 负值对该属性无效。 图示说明 CSS代码 .item { flex-shrink: <number>; /* default 1 */ } 4.3、flex-basis flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。 属性取值 默认值为 auto，即子元素本来的大小。 flex-basis 属性值可以设置成与 width 或者 height 属性一样的值，则子元素将占据固定空间。 CSS代码 .item { flex-basis: <length> | auto; /* default auto */ } 4.4、flex 类似于前面的 flex-flow 属性，flex 属性是 flex-grow、flex-shrink 和 flex-basis 这几个属性的缩写形式。后两个属性（flex-shrink 和 flex-basis）可选。 默认值为“0 1 auto”。 4.5、align-self align-self 属性允许某个子元素有与其他子元素有不一样的对齐方式，设置了这个属性之后，将会覆盖父元素的 align-items 属性。 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 strech。 属性取值 该属性的取值除了 auto ，其余的与 align-self 属性的取值相同。 属性名 作用 auto（默认） 继承父元素的 align-items 属性 flex-start 沿交叉轴的起点对齐 flex-end 沿交叉轴的终点对齐 center 沿交叉轴的中点对齐 baseline 按照子元素的第一行文字的基线对齐 stretch 如果子元素未设置高度或设为auto，将占满整个容器的高度 图示说明 CSS代码 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 4.6、order order 属性可以很方便地定义子元素的排列顺序，而不用去调整 HTML 代码中元素的代码顺序。 属性取值 默认值为0。 属性取值为数字，数字数值越小，则子元素排列越靠前。 0x05. 简单应用 其中最直观的应用就是将一个元素进行垂直水平方向的居中，且不管页面变化，依然能够生效。以 div 为例进行说明： <html> <head> <style> body{ background-color:#ccc; display:flex; justify-content:center; align-items:center; } div{ border:3px solid #000; background-image: linear-gradient(to right, #a18cd1, #fbc2eb); border-radius: 10px; width: 20%; height: 40%; } </style> </head> <body> <div></div> </body> </html> 预览效果： 在使用 Flex 布局方式进行垂直水平方向的居中布局时，只需要给父元素添加 Flex 布局方式，然后将 justifu-content 与 align-items属性值都设为 center 即可，不仅设置起来简单，还能保持良好的兼容性。 参考资料： Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com) Flex 布局教程：实例篇 - 阮一峰的网络日志 (ruanyifeng.com) Bilibili视频链接：20分钟掌握CSS Flex布局 - bilibili 文中图片出自：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

简单总结CSS中元素形状的平滑变化 目录： 前言 一、transition属性 ——设置过渡效果 1.作用： 2.属性： 3. 默认值： 4.JavaScript语法： 5.使用及说明： 二、transform属性 ——变化效果 1.作用： 2语法： 3.属性值： 三、效果演示代码 1.html代码 2.CSS代码 前言 将鼠标放到图片上面以查看实现效果： 例子涉及到的相关知识点如下： 一、transition属性 ——设置过渡效果 1.作用： 设置元素变化时的过渡效果 2.属性： transition属性包括四个子属性，即transition-property、transition-duration、ransition-timing-function、transition-delay，各个属性的含义见下方表格： 值 描述 transition-property 指定哪个元素属性会发生变化 transition-duration 指定过渡效果需要多少秒或毫秒才能完成 ransition-timing-function 指定过渡效果的变化速度曲线 transition-delay 定义过渡效果延迟多长时间开始 注：使用时应该必须指定 transition-duration 属性，否则效果持续时间为0，不会有任何效果 3. 默认值： all 0 ease 0 4.JavaScript语法： object.style.transition="width 2s"; 5.使用及说明： 举个例子： 存在一个矩形，设置过渡效果为：延迟1s，矩形的宽度变化，过渡时间为0.5s，过渡效果的变化曲线为linear ，代码如下： .div { transition-property: width; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 1s; } 上面写法看起来就很繁琐，更别说写起来了。所以为了方便，可以将这几个属性合并成transition 属性，上面的就可以这么写： .div { transition: width 0.5s linear 1s; // 部分用不到的属性可以省略，一般都得设置产生过渡变化的属性和过渡时间 } 除了设置单个属性的变化效果，也可以设置多个属性的变化效果，中间用逗号隔开： transition: width 2s, height 1s, transform 2s; 二、transform属性 ——变化效果 1.作用： 设置元素的变化效果，与transition属性一起使用可实现元素的平滑变化 2语法： transform: none|transform-functions; 3.属性值： 值 描述 none 不进行转换。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 scale(x[,y]?) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。 更多transform变化属性参考： CSS3 transform 属性 | 菜鸟教程 (runoob.com) 三、效果演示代码 1.html代码 <div class="box"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/agree.png" alt="网络未连接或图片链接已失效" class="agree"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/windmill.png" alt="网络未连接或图片链接已失效" class="windmill"> </div> 2.CSS代码 <style> .box { display: inline-flex; border:1px solid #aaabad; margin:10px; } .agree { width: 60px; height: 60px; margin: 45px; transition: all 0.5s; } /* 设置鼠标悬浮到图片上时图片的变化效果 */ .agree:hover { transform: scale(1.5); } .windmill { margin: 30px; width: 100px; height: 100px; transition: all 3s; } .windmill:hover { transform: rotate(720deg); } </style>

简单总结Layui中的表单验证 目录： 一、校验规则 1.使用内置校验规则 2.自定义校验规则 二、示例文件的实现代码 1.HTML代码 2.CSS代码 3.JS代码 简单来说，实现Layui框架中的表单验证很简单，只需要给表单元素添加上”lay-verify“属性 示例如下： 一、校验规则 1.使用内置校验规则 Layui对于常见的字符串（如手机号，邮箱，网址等）都设置了相应的校验规则，不用再自己写规则，使用时只需要将校验规则赋值给“lay-verify”属性即可。 Layui中内置的校验规则如下： 规则 说明 required 必填项 phone 手机号 email 邮箱 url 网址 number 数字 date 日期 identity 身份证 例如：设置一个输入框对手机号码进行校验： <!-- 也可以支持多条校验规则同时使用，用“|”隔开 --> 手机号：<input type="text" placeholder="请输入手机号" lay-verify="required|phone"> <button lay-submit>提交</button> 2.自定义校验规则 当然，在大部分时候，Layui中内置的校验规则还是有点不够用，所以我们还是需要来自定义规则来校验表单数据。 用一个实例来简单说明： <!-- username为自定义的规则 --> 用户名：<input type="text" placeholder="请输入用户名" lay-verify="username"> <script> // 用户名长度不能大于16位 layui.form.verify({ // value：表单的值、item：表单的DOM对象 username:function(value,item){ if (value.length > 16){ return "用户名大于16位"; } } }) </script> 这个例子较为简单，只涉及到表单数据的长度判断，若要设置更复杂的规则还需要用到正则表达式，鉴于篇幅长度本篇博客不再赘述。相关的教程可以参考：JavaScript 正则表达式、JavaScript RegExp 对象 二、示例文件的实现代码 提前导入Layui和jQuery的CDN文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.4/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> 1.HTML代码 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend id="title">简单总结Layui中的表单验证</legend><br> </fieldset> <div class="container"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>内置的校验规则</legend> </fieldset> <div class=" layui-collapse" lay-accordion> <!-- 必填项 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">必填项校验</p> <!-- layui-show来决定是否默认展开 --> <div class="layui-form-item layui-colla-content layui-show"> <label class="layui-form-label">必填项：</label> <div class="layui-input-inline"> <!-- lay-verify 属性定义校验规则 --> <input type="text" class="layui-input" placeholder="请输入必填项" lay-verify="required"> </div> <div class="layui-form-mid layui-word-aux">此项为必填项</div> <button id="btn-required" class="layui-btn layui-btn-sm" lay-submit>校验</button> </div> </div> <!-- 手机号校验 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">手机号校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">手机号：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入正确格式的手机号码" lay-verify="phone"> </div> <div class="layui-form-mid layui-word-aux">1开头的11位数字</div> <button id="btn-phone" class="layui-btn layui-btn-sm" lay-submit>校验手机号</button> </div> </div> <!-- 邮箱 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">邮箱校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">邮箱：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入正确格式的邮箱" lay-verify="email"> </div> <div class="layui-form-mid layui-word-aux">正确的邮箱格式</div> <button id="btn-email" class="layui-btn layui-btn-sm" lay-submit>校验邮箱</button> </div> </div> <!-- 网址 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">网址校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">网址：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入网址" lay-verify="url"> </div> <div class="layui-form-mid layui-word-aux">http(s)://开头</div> <button id="btn-url" class="layui-btn layui-btn-sm" lay-submit>校验网址</button> </div> </div> <!-- 数字 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">数字校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">数字：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入数字" lay-verify="number"> </div> <div class="layui-form-mid layui-word-aux">数字</div> <button id="btn-number" class="layui-btn layui-btn-sm" lay-submit>校验数字</button> </div> </div> <!-- 日期 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">日期校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">日期：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入日期" lay-verify="date"> </div> <div class="layui-form-mid layui-word-aux">格式：年（YYYY）-月（MM）-日（DD）</div> <button id="btn-date" class="layui-btn layui-btn-sm" lay-submit>校验日期</button> </div> </div> <!-- 身份证 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">身份证号校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">身份证号：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入身份证号" lay-verify="identity"> </div> <div class="layui-form-mid layui-word-aux">正确的身份证号码</div> <button id="btn-identity" class="layui-btn layui-btn-sm" lay-submit>校验身份证号</button> </div> </div> </div> </div> <br><br> <div class="container"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>自定义校验规则</legend> </fieldset> <!-- 自定义规则--> <div class="layui-form layui-collapse" lay-accordion> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">自定义规则</p> <div class="layui-form-item layui-colla-content layui-show"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" class="layui-input" placeholder="请输入密码" lay-verify="password"> </div> <div class="layui-form-mid layui-word-aux">至少八位数字与字母的组合</div> <button id="btn-custom" class="layui-btn layui-btn-sm" lay-submit>校验</button> </div> </div> </div> </div> 2.CSS代码 <style> #title { text-align: center; margin: 20px; } .container { width: 800px; margin: 20px auto; } button { margin: 5px; float: right; } </style> 3.JS代码 <script> // 注意：自 layui 2.6.0 开始，无需再单独加载指定模块，因为 layui.js 已经包含了所有的内置模块，无需再指定模块 $("#btn-required").click(function () { layer.msg("必填项已填写", { icon: 6 , time: 1000 }) }); $("#btn-phone").click(function () { layer.msg("手机号码格式正确", { icon: 6 , time: 1000 }); }); $("#btn-email").click(function () { layer.msg("邮箱格式正确", { icon: 6 , time: 1000 }); }) $("#btn-url").click(function () { layer.msg("网址格式正确", { icon: 6 , time: 1000 }); }); $("#btn-number").click(function () { layer.msg("填写的值为数字", { icon: 6 , time: 1000 }); }); $("#btn-date").click(function () { layer.msg("日期格式正确", { icon: 6 , time: 1000 }); }); $("#btn-identity").click(function () { layer.msg("身份证格式正确", { icon: 6 , time: 1000 }); }); $("#btn-custom").click(function () { layer.msg("密码格式正确", { icon: 6 , time: 1000 }); }); // 引入layui的form模块，自定义校验规则 layui.form.verify({ //value：表单的值、item：表单的DOM对象 password: function (value,item) { if (/[\u4e00-\u9fa5]+$/.test(value)) { return "密码不能出现汉字噢"; } if (value.length < 8) { return "密码小于8位"; } } }) </script>

Bootstrap框架实现简易的模态框 目录： 一、模态框的简单介绍 二、代码实现 1.HTML代码 2.CSS代码 一、模态框的简单介绍 点击按钮以查看实现效果： 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。 简单来说，模态框是一个div，包含“modal-header”（模态框头部）、“modal-body”（模态框主体）、“modal-footer”（模态框底部）三个子元素。 简单结构大概是这样： 二、代码实现 导入jQuery和Bootstrap： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"> </script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 1.HTML代码 <h2>Bootstrap框架实现简易的模态框</h2> <!-- 触发模态框的按钮 data-target的值是要加载的模态框 --> <button class="click btn btn-primary" data-toggle="modal" data-target="#showModal">点击显示模态框</button> <!-- modal属性用于把div识别为模态框窗口，fade是可以设置模态框淡入淡出 aria-labelledby的值是模态框的标题 aria-hidden="true"用于保持模态窗口不可见，直到触发器（比如按钮）被触发为止--> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="titleModal" aria-hidden="true"> <!-- modal-dialog 设置弹出层 弹出效果--> <div class="modal-dialog"> <!-- 模态框的底层 --> <div class="modal-content"> <!-- 模态框头部--> <div class="modal-header"> <!-- 关闭按钮 data-dismiss="modal"用来关闭窗口 --> <button class="close" data-dismiss="modal" aria-hidden="true"> <!-- &times 转义成“x”关闭符号 --> &times; </button> <!-- 模态框标题 --> <h4 class="modal-title" id="titleModal">Roookie博客 | 记录 · 收纳 · 分享</h4> </div> <!-- 模态框主体 --> <div class="modal-body"> <br><a href="https://www.langp.wang"> <img src="https://gitee.com/wang-langping/langp/raw/master/icon/1.png" alt="网络连接失败，请检查网络连接"> </a> </div> <!-- 模态框底部 --> <div class="modal-footer"> <!-- 模态框底部的操作按钮 --> <button class="btn btn-info" data-dismiss="modal">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> 2.CSS代码 h2,h4,.modal-body{ text-align:center; } .click{ display:block; padding:10px; margin:30px auto; } 更多内容： Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)

用jQuery实现元素被点击选中的效果 目录： 一、说明 二、代码实现 1.HTML代码 2.CSS代码 3.JS代码 一、说明 页面中存在四个div元素，实现以下效果： 当鼠标放置在div元素上面的时候，元素呈现平滑放大效果； 鼠标点击任意一个元素，元素变大，周围出现阴影，表现出被选中的效果 演示效果如下，鼠标点击即可选中或者用按钮进行多选： 二、代码实现 提前导入jQuery文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 1.HTML代码 <h2>用jQuery实现元素被点击选中的效果</h2> <div class="box"> <div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div> <button id="all-selected">全选/取消全选</button> </div> 2.CSS代码 <style> h2 { text-align: center; } .box{ display:flex; border:1px solid #aaabad; width:700px; margin:auto; } /*给盒子设置样式*/ .box>div { border: 3px solid dodgerblue; margin: 30px auto; padding: 15px; border-radius: 10px; /* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */ transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } /*为盒子添加伪类，实现鼠标放到元素上的效果*/ .box>div:hover { /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } /* 元素被选中时的效果 */ .selected { box-shadow: 0 0 15px deepskyblue; /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } #all-selected { width:100px; height:35px; border-radius:5px; display:inline-block; margin: 40px 25px 25px; transition:all 0.5s; } #all-selected:hover{ background-color:#c9c9c9; } </style> 3.JS代码 <script> // 设置一个变量symbol，来判断当前的状态是否为选中 let symbol = true; $(document).ready(function () { // 为box盒子添加点击事件 $(".box>div").click(function () { if (symbol === true) { // 当symbol的值为true时，为点击的元素添加"selected"属性 $(this).addClass("selected"); // 同时symbol的值取反 symbol = false; } else { // 当symbol的值为false时，移除"selected"属性 $(this).removeClass("selected"); // symbol的值取反 symbol = true; } }); // 为“全选”按钮添加全选事件 $("#all-selected").click(function () { if (symbol === true) { $(".box>div").addClass("selected"); symbol = false; } else { $(".box>div").removeClass("selected"); symbol = true; } }); }); </script>