【從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
英文地址，請注明出處：http://en.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