【CSS3系列】第八章 · 伸缩盒模型

news2024/11/17 6:44:47

写在前面


        Hello大家好, 我是【麟-小白】,一位软件工程专业的学生,喜好计算机知识。希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误不足之处,请多多指正!谢谢大家!!!

        如果小哥哥小姐姐们对我的文章感兴趣,请不要吝啬你们的小手,多多点赞加关注呀!❤❤❤ 爱你们!!!


目录

写在前面

1. 伸缩盒模型

1.1 伸缩盒模型简介

1.2 伸缩容器、伸缩项目

1.3 主轴与侧轴

1.4 主轴方向

1.5 主轴换行方式

1.6 flex-flow

1.7 主轴对齐方式

1.8 侧轴对齐方式

1.9 flex 实现水平垂直居中

1.10 伸缩性

1.11 flex复合属性

1.12 项目排序

1.13 单独对齐

结语


【往期回顾】

【CSS3系列】第七章 · 过渡和动画

【CSS3系列】第六章 · 2D和3D变换

【CSS3系列】第五章 · web 字体

【CSS3系列】第四章 · CSS3新增渐变

【CSS3系列】第三章 · CSS3新增边框和文本属性

【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

【CSS3系列】第一章 · CSS3新增的三种基本属性


【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】


1. 伸缩盒模型


1.1 伸缩盒模型简介

  • 2009 年, W3C 提出了一种新的盒子模型 —— Flexible Box (伸缩盒模型,又称:弹性盒子)。
  • 它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺序 .......
  • 截止目前,除了在部分 IE 浏览器不支持,其他浏览器均已全部支持。
  • 伸缩盒模型的出现,逐渐演变出了一套新的布局方案 —— flex 布局。

小贴士:

  • 传统布局是指:基于传统盒状模型,主要靠: display 属性 + position 属性 + float属性。
  • flex 布局目前在移动端应用比较广泛,因为传统布局不能很好的呈现在移动设备上。

1.2 伸缩容器、伸缩项目

伸缩容器 : 开启了 flex 的元素,就是:伸缩容器。
  • 给元素设置:
    • display:flex display:inline-flex ,该元素就变为了伸缩容器。
    • display:inline-flex 很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩容器。
    • 一个元素可以同时是:伸缩容器、伸缩项目。
伸缩项目 :伸缩容器所有 子元素 自动成为了:伸缩项目。
  • 仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。
  • 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会块状化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_伸缩容器_伸缩项目</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;
            /* font-size: 20px; */
            /* line-height: 2em; */
        }
    </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>

1.3 主轴与侧轴

  • 主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边是终点)。
  • 侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边是终点)。

1.4 主轴方向

  • 属性名: flex-direction
  • 常用值如下:
    • row :主轴方向水平从左到右 —— 默认值
    • row-reverse :主轴方向水平从右到左。
    • column :主轴方向垂直从上到下。
    • column-reverse :主轴方向垂直从下到上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_主轴方向</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            /* flex-direction: 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>

1.5 主轴换行方式

  • 属性名: flex-wrap
  • 常用值如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_主轴换行方式</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了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>

1.6 flex-flow

  • flex-flow 是一个复合属性,复合了 flex-direction flex-wrap 两个属性。 值没有顺序要求。
flex-flow: row wrap;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_flex-flow</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了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>

1.7 主轴对齐方式

  • 属性名: justify-content
  • 常用值如下:
    • flex-start :主轴起点对齐。—— 默认值
    • flex-end :主轴终点对齐。
    • center :居中对齐
    • space-between :均匀分布,两端对齐(最常用)。
    • space-around :均匀分布,两端距离是中间距离的一半。
    • space-evenly :均匀分布,两端距离与中间距离一致。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05_主轴对齐方式</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了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>

1.8 侧轴对齐方式

一行的情况
  • 所需属性: align-items
  • 常用值如下:
    • flex-start :侧轴的起点对齐。
    • flex-end :侧轴的终点对齐。
    • center :侧轴的中点对齐。
    • baseline : 伸缩项目的第一行文字的基线对齐。
    • stretch :如果伸缩项目未设置高度,将占满整个容器的高度。—— (默认值)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06_侧轴对齐方式_一行</title>
    <style>
        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了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 {
            height: 300px;
            font-size: 80px;
        }
        .inner3 {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">1x</div>
        <div class="inner inner2">2x</div>
        <div class="inner inner3">3x</div>
    </div>
</body>
</html>
多行的情况
  • 所需属性: align-content
  • 常用值如下:
    • flex-start :与侧轴的起点对齐。
    • flex-end :与侧轴的终点对齐。
    • center :与侧轴的中点对齐。
    • space-between :与侧轴两端对齐,中间平均分布。
    • space-around :伸缩项目间的距离相等,比距边缘大一倍。
    • space-evenly : 在侧轴上完全平分。
    • stretch :占满整个侧轴。—— 默认值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07_侧轴对齐方式_多行</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了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>

1.9 flex 实现水平垂直居中

  • 方法一:父容器开启 flex 布局,随后使用 justify-content align-items 实现水平垂直居中
.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}
  • 方法二:父容器开启 flex 布局,随后子元素 margin: auto
.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: auto;
}

1.10 伸缩性

1. flex-basis

  • 概念: flex-basis 设置的是主轴方向的基准长度,会让宽度或高度失效。
  • 备注:主轴横向:宽度失效;主轴纵向:高度失效
  • 作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值 auto ,即:伸缩项目的宽或高。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09_项目在主轴的基准长度</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
        }
        .inner2 {
            /* 设置伸缩项目在主轴上的基准长度,若主轴是横向的宽失效,若主轴是纵向的高失效 */
            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>

2. flex-grow(伸)

  • 概念: flex-grow 定义伸缩项目的放大比例,默认为 0 ,即:纵使主轴存在剩余空间,也不拉伸(放大)。
  • 规则:
    • 若所有伸缩项目的 flex-grow 值都为 1 ,则:它们将等分剩余空间(如果有空间的话)。
    • 若三个伸缩项目的 flex-grow 值分别为: 1 2 3 ,则:分别瓜分到: 1/6 2/6 3/6 的空间。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10_伸缩项目_伸</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式,主轴的起始位置 */
            justify-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
            flex-grow: 0;
        }
        .inner1 {
            flex-grow: 1;
        }
        .inner2 {
            flex-grow: 2;
            width: 300px;
        }
        .inner3 {
            flex-grow: 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>

3. flex-shrink(缩)

  • 概念: flex-shrink 定义了项目的压缩比例,默认为 1 ,即:如果空间不足,该项目将会缩小。
  • 收缩项目的计算,略微复杂一点,我们拿一个场景举例:
  • 例如:
  • 三个收缩项目,宽度分别为: 200px 、 300px 、 200px ,它们的 flex-shrink 值分别 为: 1 、 2 、 3 ,若想刚好容纳下三个项目,需要总宽度为 700px ,但目前容器只有 400px ,还差 300px ,所以每个人都要收缩一下才可以放下,具体收缩的值,这样计算:

1. 计算分母: (200×1) + (300×2) + (200×3) = 1400

2. 计算比例:

  • 项目一: (200×1) / 1400 = 比例值1
  • 项目二: (300×2) / 1400 = 比例值2
  • 项目三: (200×3) / 1400 = 比例值3

3. 计算最终收缩大小:

  • 项目一需要收缩: 比例值1 × 300
  • 项目二需要收缩: 比例值2 × 300
  • 项目三需要收缩: 比例值3 × 300
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>11_伸缩项目_缩</title>
    <style>
        .outer {
            width: 400px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            /* 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;
        }
        .inner1 {
            flex-shrink: 1;
        }
        .inner2 {
            flex-shrink: 2;
            width: 300px;
        }
        .inner3 {
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">
            <div style="width: 50px;height:50px;background-color: green;">1</div>
        </div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

1.11 flex复合属性

  • flex 是复合属性,复合了:flex-grow flex-shrink flex-basis 三个属性,默认值为 0 1 auto
  • 如果写 flex:1 1 auto ,则可简写为:flex:auto
  • 如果写 flex:1 1 0 ,则可简写为:flex:1
  • 如果写 flex:0 0 auto ,则可简写为: flex:none
  • 如果写 flex:0 1 auto ,则可简写为:flex:0 auto —— flex 初始值。

1.12 项目排序

  • order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0

1.13 单独对齐

  • 通过 align-self 属性,可以单独调整某个伸缩项目的对齐方式
  • 默认值为 auto ,表示继承父元素的 align-items 属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>13_项目排序与单独对齐</title>
    <style>
        .outer {
            width: 600px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸缩盒模型相关属性-start */

            /* 将该元素变为了伸缩容器(开启了flex布局) */
            display: flex;

            /* 调整主轴方向,水平从左到右,默认 */
            flex-direction: row;

            /* 主轴换行方式,换行 */
            /* 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: 3;
        }
        .inner2 {
            order: 2;
        }
        .inner3 {
            order: 1;
        }
        
        .inner2 {
            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>

结语


本人会持续更新文章的哦!希望大家一键三连,你们的鼓励就是作者不断更新的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/689650.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于matlab使用深度学习的语义分割算法实现(附源码)

一、前言 此示例演示如何使用语义分割网络对图像进行分割。 语义分割网络对图像中的每个像素进行分类&#xff0c;从而生成按类分割的图像。语义分割的应用包括自动驾驶的道路分割和医疗诊断的癌细胞分割。 此示例首先向您展示如何使用预训练的 Deeplab v3 [1] 网络分割图像&am…

git权限异常:fatal: Authentication failed for

本地电脑用户密码修改了&#xff0c;git 提交&#xff0c;拉取出现异常, 就会报这个错误fatal: Authentication failed for http://xxx/xxx/xxx 解决方法&#xff1a; git config --system --unset credential.helper 免输入用户密码方法&#xff1a; git config --global…

【超简单】Ubuntu 安装 bcompare 对比工具

下载 bcompare 安装包&#xff1a;《bcompare-4.4.6.27483_amd64.deb》 https://www.scootersoftware.com/download.php?zzdl4 安装 becompare 安装&#xff1a; sudo dpkg -i bcompare-4.4.6.27483_amd64.deb破解 cd /usr/lib/beyondcompare/ sudo sed -i "s/kee…

革新写作方式:ChatGPT最新版带来高质量聚合文章的批量生成

随着人工智能技术的不断发展&#xff0c;自然语言处理模型也在不断进步。ChatGPT最新版作为一种强大的语言模型&#xff0c;可以生成高质量的聚合文章&#xff0c;为写作方式带来了革新。本文将详细阐述ChatGPT最新版带来的革新之处&#xff0c;包括其应用领域、生成文章的流程…

剑指 Offer 12: 矩阵中的路径

这道题看着简直是完全没思路&#xff0c;看了下发现是使用回溯的方法。 下面这里要注意&#xff0c;newi是旧的i加上新的偏移值&#xff01;newj同理&#xff0c;并不是加自己&#xff0c;别昏头&#xff01; s是String类型的变量&#xff0c;要写成size() 下面是正确的代码&a…

计算机组成原理笔记——指令系统、中央处理器、总线、I/O系统(王道考研)(持续更新)

文章目录 前言指令系统指令系统概述指令格式扩展操作码 指令寻址方式指令寻址数据寻址基本的寻址思路偏移寻址隐含寻址 程序的机器级代码表示汇编基础AT&T格式和Intel格式C语言控制结构的汇编表示函数调用栈帧切换栈帧构造 CISC与RISC 中央处理器CPU的功能和基本结构运算器…

企业级微服务架构实战项目--xx优选-详情页面的异步调用completablefuture

一 常见的调用方式 1.1 并发 并发&#xff1a;同一时刻多个线程在访问同一个资源&#xff0c;多个线程对一个点 ​ 例子&#xff1a;春运抢票、微信抢红包、电商秒杀... 1.2 同步串行 代表多任务按先后顺序执行&#xff0c;并且都是同一个线程来执行。 1.3 异步串行 代表…

【Java面试题】Java基础语法

文章目录 JDK、JRE和JVM的关系栈和堆分别存的什么数据异步和同步线程和进程区别java的数据类型有哪些equals和HashCode重写的问题?深拷贝和浅拷贝的区别和equals的区别常见的运行时异常有哪些&#xff1f; JDK、JRE和JVM的关系 JDK、JRE和JVM的关系&#xff1a; JDK(Java De…

数据库监控与调优【一】—— 数据库调优的维度

数据库调优的维度 左边是千金良方的&#xff0c;右边是个人优化的 业务需求 不合理的需求&#xff0c;可能会造成很多问题勇敢地对不合理的需求说不拨乱反正&#xff0c;把不合理的需求变成合理的需求 例子 财务SaaS系统&#xff0c;财务领域有种叫做代账的概念&#xff0c…

uniapp+vue3+vite+ts+uviewPlus搭建项目

创建项目架构 首先使用官方提供的脚手架创建一个项目&#xff0c;这里我创建的 vue3 vite ts 的项目&#xff1a; npx degit dcloudio/uni-preset-vue#vite-ts project-name&#xff08;如命令行创建失败&#xff0c;请直接访问 giteehttps://gitee.com/dcloud/uni-preset-vu…

2023-06-20 x-ui-服务器配置记录

基础软件: yum update -y yum install -y curl yum install -y socat 工作软件: bash <(curl -Ls https://raw.githubusercontent.com/sprov065/x-ui/master/install.sh) 设置: 参考: 使用云服务器搭建代理-腾讯云开发者社区-腾讯云

9 HAL库驱动框架简述

目录 HAL库驱动框架简述 HAL库外设设计思想 HAL库和Cube MX相结合 一、对外设的封装——句柄结构体 二、外设初始化 初始化结构体 初始化的逻辑 三、外设使用逻辑 通用接口函数 初始化函数 I/O操作函数 控制函数 状态参数 扩展接口函数 总结 补充&#xff1a;H…

算法拾遗三十四线段树

算法拾遗三十四线段树 线段树说明物理结构使用线段树落方块的问题 线段树说明 给定固定长度的数组&#xff0c;然后要在数组给定的范围内完成加法【如数组1&#xff0c;200下标元素加6】&#xff0c;更新【7&#xff0c;375范围数组元素更新为4】&#xff0c;查询操作【查询3到…

【云原生丶Docker】Docker镜像加速器:给冰山提提速!

Docker镜像加速器是一种用于加速Docker镜像下载和构建的工具。它可以提高Docker镜像的下载速度&#xff0c;从而加快应用程序的开发和部署速度。 Docker镜像加速器通常使用CDN(内容分发网络)技术来实现加速。CDN是一种分布式网络架构&#xff0c;可以将内容缓存在全球各地的服务…

命令行--git--多次commit如何合并成一个commit

参考:https://blog.csdn.net/qq_50652600/article/details/120800309 在我们平时开发中&#xff0c;我们提交代码免不了要和git打交道&#xff0c;那么我们肯定是先从预发分支上&#xff08;公司一般都用pre命名&#xff0c;这里为了方便演示用master&#xff09;上拉去最新的代…

测试工程师首用chatGPT,编写python读取xmind测试用例chatgtp+python+xmind

背景 有用xmind写测试用例的吧&#xff0c;统计一个xmind的条&#xff0c;需要花大量的时间&#xff0c;还有要统计有多少条冒烟的&#xff0c;多少条不通过的&#xff0c;还有通过的条数。 需求 快速使用python&#xff0c;写一个简单的脚本&#xff0c;统计所有xmind节点&…

FPGA_学习_09_PWM呼吸灯

PWM在三相电机控制中&#xff0c;有着非常重要的地位。 如果你需要用FPGA去实现三相电机的控制&#xff0c; PWM这一关是绕不过的。好在PWM的基本原理是比较简单的。所以原理部分本文就略过&#xff0c;本文基于PWM实现呼吸灯。 1 时序 {signal: [{name: clk, wave: p....…

4 STM32启动过程(以Cortex-M3为例)(保姆级介绍)

设计知识点补充在前&#xff1a; 1.关于存储器映射、存储器重映射、内存映射、地址映射、地址转换等计算机专业名词详解 参考见 关于存储器映射、存储器重映射、内存映射、地址映射、地址转换等计算机专业名词详解_Vincent_Song的博客-CSDN博客 2.哈佛结构和冯诺依曼结构的区别…

vue2中左侧菜单和头部tab标签联动

效果图 我这里是使用的vue2 element-ui来实现的&#xff0c;代码可以直接拿来使用 一、首先先安装element-ui element-ui官网 npm i element-ui -S 然后在main.js里面配置&#xff0c;安装官网的步骤来就可以了&#xff0c;这里就不一一介绍了 import Vue from vue; impor…

用wget等命令行工具下载Jenkins上的文件

背景 现在一般公司的内部CI系统都用Jenkins实现&#xff0c;本地部署的时候我会将待测试文件下载到本地&#xff0c;再上传到Linux开发板&#xff0c;但能否从Linux开发板直接下载呢&#xff1f;只要Linux与Jenkins server之间的网络是联通的&#xff0c;那就可以 解决方法 …