【从0-1的CSS】第3篇：盒子模型与弹性布局

文章目录

  • 盒子模型
    • 内容区content
    • 内边距padding
    • 边框border
    • 外边距margin
    • 元素的宽度高度
    • box-sizing属性
      • content-box：设置的width和height就是内容区的width和height
      • border-box:设置的width和height是context + padding + border的width和height
  • 弹性布局
    • Flex容器的属性
      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • align-items
      • align-content
    • 项目属性
      • order
      • align-self
      • flex
  • 总结

盒子模型

盒子模型是网页设计中一种很重要的思维模型，即把网页中的每个元素都看做是一个盒子。这个盒子模型主要是由四个部分组成：内容区content、内边距padding、边框border、外边距margin。

image-20250706173237875

内容区content

内容区是整个盒子模型的中心，主要是存放内容，内容可以是文本、图片等资源。主要属性是：width、height，分别用来指定盒子内容区域的宽度和高度。

内边距padding

内边距是内容区和边框之间的空间，可以通过设置这四种属性：padding-top、padding-right、padding-bottom、padding-left，分别来设置内容区在上、右、下、左四个方向上与边框之间的距离

边框border

边框是环绕内容区和内边距的边界，可以通过设置这几种属性：border-style、border-width、border-color，分别来设置边框的样式、宽度、和颜色。

外边距margin

外边距位于盒子模型的最外围，通过外边距可以是盒子之间，也就是元素之间不会紧凑的连接在一块，是布局中很重要的一个手段。可以通过设置margin-top、margin-right、margin-bottom、margin-left以及他们的简写属性来设置外边距的宽度（也就是与其他元素之间的距离）

元素的宽度高度

通常设置元素的宽度和高度时，实际上设置的只是元素内容区域的宽度和高度，如刚刚所讲，盒子模型是讲元素当成一整个盒子，所以元素的实际宽度和高度应该包括以上四个部分之后，即

总宽度：content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

总高度：content height + padding-top + padding-bottom + border-top + border-bottom + margin-top+ margin-bottom

box-sizing属性

根据上面元素的宽度和高度，box-sizing属性用于指定元素的盒子模型的宽高度的计算方式，重新定义的元素的尺寸。该属性指主要有两种：content-box和border-box

offsetWidth和offsetHeight是获取元素中的宽度和高度

content-box：设置的width和height就是内容区的width和height

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style>.d1 {width: 200px;height: 200px;background-color: aqua; /* 背景色 *//* padding:10px 5px 15px 20px; 设置内边距: 上\右\下\左 */padding: 50px;border:20px solid red;   /* 设置边框 */margin: 10px;   /* 设置外边距:盒子与外边框的间距 一个值代表上下左右值一样 */box-sizing: content-box; /* 固定盒子的context的宽高度大小 *//*box-sizing: border-box; !* 固定盒子的context + padding + border的宽高度大小 *!*/}</style>
</head>
<body><div class="d1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>

浏览器显示如下

image-20250706175758932

可以看出offsetWidth和offsetHeight都是为html中设置的200px

border-box:设置的width和height是context + padding + border的width和height

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style>.d1 {width: 200px;height: 200px;background-color: aqua; /* 背景色 *//* padding:10px 5px 15px 20px; 设置内边距: 上\右\下\左 */padding: 50px;border:20px solid red;   /* 设置边框 */margin: 10px;   /* 设置外边距:盒子与外边框的间距 一个值代表上下左右值一样 *//*box-sizing: content-box; !* 固定盒子的context的宽高度大小 *!*/box-sizing: border-box; /* 固定盒子的context + padding + border的宽高度大小 */}</style>
</head>
<body><div class="d1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></body>
</html>

浏览器显示如下

image-20250706180227610

可以看出offsetWidth和offsetHeight都是为html中设置的340px (200px + 50 + 20 + 50 + 20)

弹性布局

弹性布局是CSS3中一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，也就是为了满足不同屏幕大小和设备类型（手机、电脑、平板…）适配问题。

display属性可以指定html的元素为弹性布局

弹性布局Flex：Flexible box，采用Flex布局的元素，称为Flex容器，简称容器。所有的子元素都是容器成员，称为Flex项目：Flex item简称项目。容器默认存在两根轴，即水平主轴和垂直的交叉轴。

主轴开始的位置叫做main start,结束的位置叫做main end。

交叉轴开始的位置叫做cross start,结束的位置叫做cross end。

image-20250706181248017

Flex容器的属性

属性描述
flex-direction决定主轴上的方向（项目的排列方向)
flex-wrap默认情况下，项目都排列在一根轴线上，如果一根轴线排不下，则flex-wrap属性决定如何换行
flex-flow是flex-direction和flex-wrap两个属性的简写flex-flow: flex-direction flex-wrap;
justify-content用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content定义多个轴线的对齐方式，如果项目只有一根轴线，则不起作用

flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向）

值描述
row默认值，主轴沿水平方向从左到右
row-reverse主轴沿水平方向从右到左
column主轴沿垂直方向从上到下
column-reverse主轴沿垂直方向从下到上
initial将此属性设置为属性的默认值
inherit从父元素继承此属性的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-direction</title><style>#main {border: 1px solid #CCC;padding: 5px;position: relative;}.row, .row_reverse, .column, .column_reverse{display: flex;margin-bottom: 5px;}.row {flex-direction: row;}.row_reverse {flex-direction: row-reverse;}.column {flex-direction: column;}.column_reverse {flex-direction: column-reverse;position: absolute;top: 120px;left: 400px;}.row div, .row_reverse div, .column div, .column_reverse div {width: 100px;height: 100px;border: 1px solid black;}</style>
</head>
<body>
<div id="main"><div class="row"><div>row-A</div><div>row-B</div><div>row-C</div><div>row-D</div><div>row-E</div></div><div class="row_reverse"><div>row_reverse-A</div><div>row_reverse-B</div><div>row_reverse-C</div><div>row_reverse-D</div><div>row_reverse-E</div></div><div class="column"><div>column-A</div><div>column-B</div><div>column-C</div><div>column-D</div><div>column-E</div></div><div class="column_reverse"><div>column_reverse-A</div><div>column_reverse-B</div><div>column_reverse-C</div><div>column_reverse-D</div><div>column_reverse-E</div></div>
</div>
</body>
</html>

网页效果如下：

image-20250706185335912

flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

值描述
nowrap默认值，表示项目不会换行
wrap表示项目会在需要时换行
wrap-reverse表示项目会在需要时换行，但会以相反的顺序
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-wrap</title><style>#main {border: 1px solid #CCC;padding: 5px;}.nowrap, .wrap, .wrap_reverse {display: flex;flex-direction: row;margin-bottom: 15px;}.nowrap {flex-wrap: nowrap;}.wrap {flex-wrap: wrap;}.wrap_reverse {flex-wrap: wrap-reverse;}.nowrap div, .wrap div, .wrap_reverse div {width: 150px;height: 50px;border: 1px solid black;}</style>
</head>
<body>
<div id="main"><div class="nowrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div><div class="wrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div><div class="wrap_reverse"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div></div>
</div>
</body>
</html>

网页效果如下：

image-20250706190111760

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写,语法：flex-flow: flex-direction flex-wrap;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex-flow</title><style>.flex_flow {display: flex;flex-flow: row-reverse wrap;}.flex_flow div {width: 150px;height: 60px;margin-bottom: 5px;border: 1px solid black;}</style>
</head>
<body>
<div class="flex_flow"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
</div>
</body>
</html>

网页效果：

image-20250706190427440

justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式

值描述
flex-start默认值，左对齐
flex-end右对齐
center居中
space-between两端对齐，项目之间的间隔是相等的
space-around每个项目两侧的间隔相等
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>justify-content</title><style>.flex {display: flex;flex-flow: row wrap;margin-top: 10px;}.flex div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}.flex-start {background-color: crimson;justify-content: flex-start;}.flex-end {background-color: #ffa500;justify-content: flex-end;}.center {background-color: coral;justify-content: center;}.space-between {background-color: #73AD21;justify-content: space-between;}.space-around  {background-color: blue;justify-content: space-around;}</style>
</head>
<body>
<div class="flex flex-start"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex flex-end"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex center"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex space-between"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex space-around"><div>A</div><div>B</div><div>C</div><div>D</div>
</div>
</body>
</html>

网页效果：

image-20250706190854958

align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式

值描述
stretch默认值，项目将被拉伸以适合容器
center项目位于容器的中央
flex-start项目位于容器的顶部
flex-end项目位于容器的底部
baseline项目与容器的基线对齐
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值

align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式

值描述
stretch默认值，将项目拉伸以占据剩余空间
center项目在容器内居中排布
flex-start项目在容器的顶部排列
flex-end项目在容器的底部排列
space-between多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial将此属性设置为属性的默认值
inherit从父元素继承该属性的值

项目属性

可以通过以下三个属性来对弹性布局的子元素进行设置

值描述
order用来设置项目在容器中出现的顺序
align-self允许您为某个项目设置不同于其它项目的对齐方式
flexflex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写

order

order 属性用来设置项目在容器中出现的顺序，可以通过具体的数值来定义项目在容器中的位置，属性的语法格式：order: number;

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>order</title><style>.flex {display: flex;flex-flow: row wrap;margin-top: 10px;}.flex div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}.flex div:nth-child(1) {order: 5;}.flex div:nth-child(2) {order: 3;}.flex div:nth-child(3) {order: 1;}.flex div:nth-child(4) {order: 2;}.flex div:nth-child(5) {order: 4;}</style>
</head>
<body>
<div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>

网页效果：

image-20250706192232917

align-self

align-self 属性允许为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值

值描述
auto默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
stretch项目将被拉伸以适合容器
center项目位于容器的中央
flex-start项目位于容器的顶部
flex-end项目位于容器的底部
baseline项目与容器的基线对齐
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>align-self</title><style>.flex {display: flex;flex-flow: row wrap;align-items: flex-end;border: 1px solid #CCC;height: 150px;}.flex div {width: 60px;height: 60px;border: 1px solid black;}.flex div:nth-child(4) {align-self: flex-start;/*项目位于容器的顶部*/}</style>
</head>
<body>
<div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>

网页效果：

image-20250706192524733

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式:flex: flex-grow flex-shrink flex-basis;

值描述
flex-grow（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0
flex-shrink（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1
flex-basis（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 “%”、“px”、“em” 等单位的形式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>flex</title><style>.flex {display: flex;flex-flow: row wrap;align-items: flex-end;border: 1px solid #CCC;}.flex div {width: 60px;height: 60px;border: 1px solid black;}.flex div:nth-child(2) {flex:0;}.flex div:nth-child(4) {flex:1 1 auto;}</style>
</head>
<body>
<div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>

网页效果：

image-20250706193343252

总结

盒子模型是把网页中的每个元素都看做是一个盒子，是布局中一个很重要的概念，同时弹性布局是为了满足不同屏幕大小和设备类型（手机、电脑、平板…）适配问题。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/87719.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/87719.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

设置LInux环境变量的方法和区别_Ubuntu/Centos

设置LInux环境变量的方法和区别_Ubuntu/Centos

Linux环境变量可以通过export实现&#xff0c;也可以通过修改几个文件来实现 1 通过文件设置LInux环境变量 首先是设置全局环境变量&#xff0c;对所有用户都会生效 /etc/profile&#xff1a;该文件为系统的每个用户设置环境信息&#xff0c;当用户登录时&#xff0c;该文件…
阅读更多...
python缓存装饰器实现方案

python缓存装饰器实现方案

写python的时候突然想着能不能用注解于是就写了个这个 文章目录 原始版改进点 原始版 import os import pickle import hashlib import inspect import functoolsdef _generate_cache_filename(func, *args, **kwargs):"""生成缓存文件名的内部函数""…
阅读更多...
使用 java -jar xxxx.jar 运行 jar 包报错： no main manifest attribute

使用 java -jar xxxx.jar 运行 jar 包报错： no main manifest attribute

1、问题描述 在Linux服务器上本想运行一下自己写的一个JAR&#xff0c;但是报错了&#xff01; no main manifest attribute, in first-real-server-1.0-SNAPSHOT.jar 2、解决办法 在自己的Spring项目的启动类&#xff08;xxx.xxx.xxx.XXXXApplication&#xff09;所在的Mo…
阅读更多...
信号与槽的总结

信号与槽的总结

信号与槽的总结 QT中的信号与Linux的信号对比 1&#xff09;信号源 2&#xff09;信号的类型 3&#xff09;信号的处理方式 QT信号与Linux信号的深度对比分析 一、信号源对比 QT信号 用户定义信号 &#xff1a;由开发者通过 signals:关键字在QObject派生类中显式声明 cl…
阅读更多...
Python Mitmproxy详解：从入门到实战

Python Mitmproxy详解：从入门到实战

一、Mitmproxy简介 Mitmproxy是一款开源的交互式HTTPS代理工具&#xff0c;支持拦截、修改和重放HTTP/HTTPS流量。其核心优势在于&#xff1a; 多平台支持&#xff1a;兼容Windows、macOS、Linux三端工具&#xff1a;提供命令行(mitmproxy)、Web界面(mitmweb)、数据流处理(mi…
阅读更多...
刷题笔记--串联所有单词的子串

刷题笔记--串联所有单词的子串

题目&#xff1a;1、我的写法&#xff08;超时&#xff09;从题面自然想到先用回溯算法把words的全排列先算出来&#xff0c;然后遍历字符串s一次将符合条件的位置加入结果全排列计算所有可能字符串算法写法&#xff1a;这是一个模板用于所有全排列算法的情况&#xff0c;本质思…
阅读更多...
操作系统【1】【硬件结构】【操作系统结构】

操作系统【1】【硬件结构】【操作系统结构】

一、CPU如何执行程序&#xff1f; 提纲 图灵机工作方式冯诺依曼模型线路位宽CPU位宽程序执行基本过程执行具体过程 1. 图灵机工作方式 图灵机可以视作“一台带规则的自动草稿机” 图灵机基本组成&#xff1a; 纸带&#xff08;内存&#xff09;&#xff1a;连续格子组成&…
阅读更多...
SQLite与MySQL：嵌入式与客户端-服务器数据库的权衡

SQLite与MySQL：嵌入式与客户端-服务器数据库的权衡

SQLite与MySQL&#xff1a;嵌入式与客户端-服务器数据库的权衡 在开发应用程序时&#xff0c;数据库选择是一个至关重要的决策&#xff0c;它会影响应用的性能、可扩展性、部署难度和维护成本。SQLite和MySQL是两种广泛使用的关系型数据库管理系统&#xff0c;它们各自针对不同…
阅读更多...
CppCon 2018 学习:Smart References

CppCon 2018 学习:Smart References

“强类型别名”&#xff08;strong typedefs&#xff09; 的动机和实现&#xff0c;配合一个简单例子说明&#xff1a; 动机&#xff08;Motivation&#xff09; 用 using filename_t string; 和 using url_t string; 来区分不同的字符串类型&#xff08;比如文件名和网址&…
阅读更多...
高性能高准确度的CPU电压与温度监测软件HWInfo

高性能高准确度的CPU电压与温度监测软件HWInfo

&#x1f5a5;️ 一、软件概述 Windows版&#xff1a;图形化界面&#xff0c;支持实时监控&#xff08;温度、电压、风扇转速等&#xff09;、基准测试及报告生成&#xff0c;兼容Windows XP至Windows 11系统。Linux版&#xff1a;命令行工具&#xff0c;由openSUSE社区维护&a…
阅读更多...
H3C WA6322 AP版本升级

H3C WA6322 AP版本升级

1、查看当前版本&#xff1a;R2444P01 2、官网下载升级文件&#xff1a; WA6300系列版本说明H3C WA6300系列(适用于WA6330、 WA6322、WA6320H、WA6320、 WTU630H、WTU630、WA6330-LI、WA6320-C、WA6320-D、WA6320H-LI、WA6338、WA6322H、WTU632H-IOT、WAP922E、WAP923、WA6320…
阅读更多...
用 YOLOv8 + DeepSORT 实现目标检测、追踪与速度估算

用 YOLOv8 + DeepSORT 实现目标检测、追踪与速度估算

【导读】 目标检测与追踪技术是计算机视觉领域最热门的应用之一&#xff0c;广泛应用于自动驾驶、交通监控、安全防护等场景。今天我们将带你一步步实现一个完整的项目&#xff0c;使用YOLOv8 DeepSORT实现目标检测、追踪与速度估算。>>更多资讯可加入CV技术群获取了解…
阅读更多...
Python实例题：基于 Python 的简单聊天机器人

Python实例题：基于 Python 的简单聊天机器人

Python实例题 题目 基于 Python 的简单聊天机器人 要求&#xff1a; 使用 Python 构建一个聊天机器人&#xff0c;支持以下功能&#xff1a; 基于规则的简单问答系统关键词匹配和意图识别上下文记忆功能支持多轮对话可扩展的知识库 使用tkinter构建图形用户界面。实现至少 …
阅读更多...
相机：Camera原理讲解（使用OpenGL+QT开发三维CAD）

相机：Camera原理讲解（使用OpenGL+QT开发三维CAD）

相机为三维场景提供了灵活便捷的视角变换和交互能力&#xff0c;通过相机操作可以实现全方位、各角度的场景浏览。 怎样在三维场景中引入相机&#xff0c;怎样处理和实现视角的放缩、移动、旋转&#xff1f;在视角旋转时以指定目标为中心又该怎样处理&#xff1f; 原文&#…
阅读更多...
开源的虚拟电厂预测数据：资源、应用与挑战

开源的虚拟电厂预测数据：资源、应用与挑战

引言 虚拟电厂（Virtual Power Plant, VPP）是一种通过聚合分布式能源资源（如太阳能、风能、储能系统、电动汽车和可控负荷）来优化电力系统运行的数字化能源管理平台。准确的预测数据是虚拟电厂高效运行的关键，而开源数据为研究者和企业提供了低成本、高透明度的解决方案。…
阅读更多...
IDE全家桶专用快捷键----------个人独家分享！！

IDE全家桶专用快捷键----------个人独家分享！！

给大家分享一下我个人整理的快捷键&#xff0c;其中包含对电脑的操作&#xff0c;以及在编写代码时的操作&#x1f680;Window系列1 WindowsR 开启运行对话框--->输入cmd启动黑窗口​2 WindowsE 快速打开我的电脑 ​3 WindowsL 电脑锁屏 ​4 WindowsD 显示/恢复桌面 ​5 Win…
阅读更多...
人工智能概念：RNN中的基础Encoder-Decoder框架

人工智能概念：RNN中的基础Encoder-Decoder框架

文章目录一、序列&#xff08;Seq2Seq&#xff09;转换的核心架构二、Encoder-Decoder框架基础原理2.1 整体工作流程2.2 编码器&#xff08;Encoder&#xff09;详解2.3 解码器&#xff08;Decoder&#xff09;工作机制与缺陷三、基础框架的核心缺陷分析&#xff08;以"欢…
阅读更多...
R 列表：深入解析与高效应用

R 列表：深入解析与高效应用

R 列表&#xff1a;深入解析与高效应用 引言 在R语言中&#xff0c;列表&#xff08;List&#xff09;是一种非常重要的数据结构&#xff0c;它允许我们将不同类型的数据组合在一起。列表在数据分析和统计建模中扮演着至关重要的角色。本文将深入探讨R列表的概念、创建方法、…
阅读更多...
uniapp 国密sm2加密

uniapp 国密sm2加密

1. uniapp 国密sm2加密 在uniapp中使用国密SM2算法进行加密解密&#xff0c;你可以通过安装第三方库miniprogram-sm-crypto来实现。这个库提供了SM2、SM3和SM4算法的实现&#xff0c;可以在小程序和uniapp项目中使用。 1.1. 安装miniprogram-sm-crypto 首先&#xff0c;你需要…
阅读更多...
07_持续集成与部署：DevOps的核心引擎

07_持续集成与部署：DevOps的核心引擎

07_持续集成与部署：DevOps的核心引擎 引言 在快速迭代的软件开发时代，持续集成（CI）与持续部署（CD）已成为企业提升竞争力的关键。通过自动化构建、测试和部署流程，CI/CD能够显著缩短交付周期，提高软件质量，降低发布风险。本文将深入探讨CI/CD的核心理念、实施路径与最…
阅读更多...
最新文章

Copyright @ 2022~2023