玄子Share-CSS3 弹性布局知识手册
玄子Share-CSS3 弹性布局知识手册
Flexbox Layout(弹性盒布局)是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布
主轴和交叉轴
使用弹性布局,最重要的一个概念就是主轴与交叉轴(副轴,侧轴),主轴由flex-direction
定义,另一根轴垂直于它
- 主轴(Main Axis):弹性容器的主要方向,可以是水平方向或垂直方向
- 交叉轴(Cross Axis):与主轴垂直的轴线,如果主轴是水平方向,那么交叉轴就是垂直方向,反之亦然
这里一定不要主观认为,主轴就是横向(水平),交叉轴就是纵向的(垂直),主轴是水平还是垂直排列,以及
justify-content
与align-items
等样式的排列方向,都是由主轴方向flex-direction
来定义的
弹性容器属性
弹性容器属性,设置在需要开启弹性布局的容器中,也就是父级容器
display:定义弹性容器表现形式
- flex:块级弹性容器
- inline-flex:行内弹性容器
flex-direction:定义主轴的排列方向
- row:主轴排列方向为行排列
横向
(默认值) - row-reverse:主轴排列方向为行排列
横向并翻转左右顺序
- column:主轴排列方向为列排列
纵向
- column-reverse:主轴排列方向为列排列
纵向并翻转上下顺序
- row:主轴排列方向为行排列
flex-wrap:定义子容器宽度在超出父容器宽度时,子容器是否自动换行
- nowrap:子容器在超出父容器宽度时
不允许
自动换行(默认值) - wrap:子容器在超出父容器宽度时
允许
自动换行 - wrap-reverse:子容器在超出父容器宽度时
允许
自动换行并翻转两行顺序
- nowrap:子容器在超出父容器宽度时
flex-flow:flex-direction 和 flex-wrap 的简写形式
- row:只写单个 flex-direction 值,表示排列方式与关键词一致,不换行
- wrap:只写单个 flex-wrap值,表示排列方式为
横向
排列,换行行为与关键词一致 - flex-flow: row nowrap:主轴为行排列,子容器不换行
- flex-flow: column wrap:主轴为列排列,子容器允许换行
- flex-flow: row-reverse wrap-reverse:主轴为行排列并反向排列,子容器允许换行且反向排列
为保证代码的易读性,在编写代码时,推荐使用拆分形式书写
justify-content:定义子容器在主轴上的对齐方式
- flex-start:子容器向主轴开始位置对齐
- flex-end:子容器向主轴结束位置对齐
- center:子容器在主轴上居中对齐
- space-between:子容器在主轴上平均分布,首尾没有空隙
- space-around:子容器在主轴上平均分布,每个子容器两侧有空隙
- space-evenly:子容器在主轴上平均分布,每个子容器两侧和首尾都有空隙
align-items: 定义子容器在交叉轴上的对齐方式
- flex-start:子容器向交叉轴开始位置对齐
- flex-end:子容器向交叉轴结束位置对齐
- center:子容器在交叉轴上居中对齐
- baseline:子容器的基线对齐
- stretch:子容器在交叉轴上拉伸以适应容器高度
align-content: 定义子容器在多轴(多行)上的对齐方式,此样式只在开启 flex-wrap 自动换行时生效
- flex-start:子容器在多轴上向交叉轴开始位置对齐
- lex-end:子容器在多轴上向交叉轴结束位置对齐
- center:子容器在多轴上居中对齐
- space-between:子容器在多轴上平均分布,首尾没有空隙
- space-around:子容器在多轴上平均分布,每个子容器两侧有空隙
- space-evenly:子容器在多轴上平均分布,每个子容器两侧和首尾都有空隙
- stretch:子容器在多轴上拉伸以适应容器高度
弹性项目属性
弹性项目属性,设置在已经开启弹性布局的弹性项目中,也就是子级容器
order:定义项目的排列顺序
- 正整数: 定义项目的排列顺序,数值越小,排列越靠前
- 负整数: 同上,数值越小,排列越靠前
flex-grow:定义项目在分配多余空间时的放大比例
- 0:项目在空间充足时
不会
放大(默认值) - 数值:定义项目在分配多余空间时的相对增长比例,数值越大,分配到的空间越多
- 0:项目在空间充足时
flex-shrink:定义项目在空间不足时的缩小比例
- 1:项目在空间不足时
会
按照相等的比例缩小(默认值) - 数值:定义项目在空间不足时的相对缩小比例,数值越大,缩小得越多
- 1:项目在空间不足时
flex-basis:定义项目在分配多余空间之前的基准值
- auot:项目在分配多余空间之前自动调整基准大小(默认值)
- 长度值或百分比:指定项目在分配多余空间之前的基准大小
flex:flex-grow、flex-shrink 和 flex-basis 的简写形式
- 0 1 auto:等于
flex-grow:0,flex-shrink:1,flex-basis:auto
,项目在分配多余空间时不会
相对增长,项目在空间不足时会
相对收缩(默认值) - 1: 等于
flex-grow:1,flex-shrink:1,flex-basis:0%
,项目会在分配多余空间时会
相对增长,空间不足时会
相对收缩 - 200px: 等于
flex-grow:1,flex-shrink:1,flex-basis:200px
,项目在分配多余空间时会
相对增长,空间不足时会
相对收缩,默认大小200px
- none:等于
flex-grow:0,flex-shrink:0,flex-basis:auto
,项目在分配多余空间时不会
相对增长,项目在空间不足时不会
相对收缩 - auto: 等于
flex-grow:1,flex-shrink:1,flex-basis:auto
,项目会在分配多余空间时会
相对增长,空间不足时会
相对收缩 在实际开发中,建议优先使用 Flex 属性,这样写有利于浏览器渲染
- 0 1 auto:等于
align-self:设置单个子元素在交叉轴上的对齐方式,覆盖父容器的 align-items 属性
- flex-start:单个项目向交叉轴开始位置对齐
- flex-end:单个项目向交叉轴结束位置对齐
- center:单个项目在交叉轴上居中对齐
- baseline:单个项目的基线对齐
- stretch:单个项目在交叉轴上拉伸以适应容器高度
演示示例模板
下面我将使用这个示例模板来进行,弹性布局的效果演示(后续示例仅展示关键代码)
#app
:定义了一个页面底板并使用弹性布局设置在页面中央位置(仅用于布局无意义).container
:定义了一个弹性容器,它的子元素.item
会沿着主轴横向排列,使用容器右下角的按钮可快捷调整容器大小.item
:定义了.container
子容器的样式,用于演示示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>玄子Share-弹性布局演示案例</title><style>#app {width: 90vw;height: 90vh;margin: 0 auto;padding: 20px;background-color: #EAEAEA;display: flex;flex-direction: column;align-items: center;/*以上为演示案例的底板样式,仅用于布局无意义*/}.container {width: 600px;height: 300px;background-color: darkgray;overflow: auto;resize: both;/*通过 resize 样式自由调整演示容器大小*//*=======Flex=======*/display: flex;}.item {width: 100px;height: 100px;margin: 5px;text-align: center;line-height: 100px;border: 1px solid blue;background-color: turquoise;/*=======Flex=======*/}</style>
</head>
<body>
<div id="app"><h1>玄子Share-弹性布局演示案例</h1><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div>
</div>
</body>
</html>
通过调整
.container
的尺寸可以观察到,当父级容器空间不足时,子元素的宽度会被挤压,以容下子元素
弹性容器演示
flex-direction
.container {/*=======Flex=======*/display: flex;flex-direction: row;
}
flex-direction: row
可以看到这个属性的效果,和默认只写一个display: flex
的效果是一致的,子元素从左到右依次排列(默认效果)
.container {/*=======Flex=======*/display: flex;flex-direction: row-reverse;
}
flex-direction: row-reverse
这个属性的效果,和flex-direction: row
的效果是相反的,子元素从右到左依次排列,并翻转子元素的顺序
.container {height: 600px;/*=======Flex=======*/display: flex;flex-direction: column;
}
flex-direction: column
这个属性的效果为,子元素从上到下依次排列
.container {height: 600px;/*=======Flex=======*/display: flex;flex-direction: row-reverse;
}
flex-direction: column-reverse
这个属性的效果,和flex-direction: column
的效果是相反的,子元素从下到上依次排列,并翻转子元素的顺序
flex-wrap
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: nowrap;
}
flex-wrap: nowrap
这个属性的效果与,只写一个display: flex
效果一致,如果父容器宽度不足,则会挤压子元素宽度(默认效果)
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;
}
flex-wrap: wrap
这个属性的效果为,当父容器宽度不足时,子元素会自动换行,如果父容器宽度实在不足,则会挤压子元素宽度
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap-reverse;
}
flex-wrap: wrap-reverse
这个属性的效果为,当父容器宽度不足时,子元素会自动换行,但换行效果是反向的即从下到上换行
flex-flow
.container {/*=======Flex=======*/display: flex;flex-flow: row wrap;
}
flex-flow: column wrap
这个属性是flex-direction
与flex-wrap
的简写形式,当前样式表示,主轴横向排列,自动换行
.container {/*=======Flex=======*/display: flex;flex-flow: row wrap;
}
flex-flow: column wrap
当前样式表示,主轴纵向排列,自动换行
.container {/*=======Flex=======*/display: flex;flex-flow: row;
}
flex-flow: row
若只写一个flex-direction
的关键字,则遵守flex-direction
关键字的规则
.container {/*=======Flex=======*/display: flex;flex-flow: wrap;
}
flex-flow: wrap
若只写一个flex-wrap
的关键字,则flex-direction
排列方向为默认横向排列,换行行为遵守flex-wrap
关键字的规则
justify-content
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;
}
justify-content: flex-start
这个属性的效果,与flex-direction:row
的默认效果一致,子元素沿主轴方向,依次排列(默认效果)
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;
}
justify-content: flex-end
这个属性的效果,与justify-content: flex-start
的效果相反,子元素沿主轴反方向,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;
}
justify-content: center
这个属性的效果为,子元素沿主轴方向居中对齐并,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;
}
justify-content: space-between
这个属性的效果为,子元素沿主轴方向,两端子元素对齐边距,中间子元素等量分配剩余空间,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;
}
justify-content: space-around
这个属性的效果为,子元素沿主轴方向,每个子元素等量分配剩余空间到左右两侧,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;
}
justify-content: space-evenly
这个属性的效果为,子元素沿主轴方向,每个子元素等量分配剩余空间,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;
}
设置
justify-content
与flex-wrap: wrap
属性后,父容器宽度不足时,子容器自动换行,换行后子容器排列,并遵守justify-content
的规则
.container {/*=======Flex=======*/display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-evenly;
}
flex-direction: column
当主轴为纵轴时,子元素排列方向依照主轴纵向排列,并遵守justify-content
的规则,(主轴)纵向等距对齐
align-items
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-start;
}
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
align-items: flex-start
这个属性的样式与默认效果一致,子元素沿侧轴顶部对齐
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-end;
}
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
align-items: flex-end
这个属性的样式与默认效果相反,子元素沿侧轴底部对齐
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;
}
align-items: center
这个属性的样式为,子元素沿侧轴中心位置对齐
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: baseline;
}.item:first-child {width: 200px;height: 200px;line-height: 200px;
}
align-items: baseline
这个属性的样式为,子元素沿侧轴中,高度最高的子元素的中心位置为基线对齐
.container {/*=======Flex=======*/display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-evenly;align-items: center;
}
flex-direction: column
当主轴为纵轴时,子元素排列方向依照主轴纵向排列,并遵守align-items: center
的规则,(侧轴)横向居中对齐
align-content
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: flex-start;
}
align-content: flex-start
表示在多轴情况下,侧轴的对齐方式为顶部对齐(只有在开启flex-wrap
换行后才有多轴,否则此样式无效)
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: center;
}
align-content: center
表示在多轴情况下,侧轴的对齐方式为居中对齐(只有在开启flex-wrap
换行后才有多轴,否则此样式无效)
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: flex-end;
}
align-content: flex-end
表示在多轴情况下,侧轴的对齐方式为底部对齐(只有在开启flex-wrap
换行后才有多轴,否则此样式无效)
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-around;
}
align-content: space-around
表示在多轴情况下,子元素沿主侧方向,每行子元素等量分配剩余空间到侧轴两侧,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-between;
}
align-content: space-between
表示在多轴情况下,子元素沿侧轴方向,两端子元素对齐边距,中间子元素等量分配剩余空间,依次排列
.container {/*=======Flex=======*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-evenly;
}
align-content: space-evenly
表示在多轴情况下,子元素沿主侧方向,每行子元素等量分配剩余空间,依次排列
弹性项目演示
order
.container {width: 600px;height: 300px;background-color: darkgray;overflow: auto;resize: both;/*通过 resize 样式自由调整演示容器大小*//*=======Flex=======*/display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;
}.item {width: 100px;height: 100px;margin: 5px;text-align: center;line-height: 100px;border: 1px solid blue;background-color: turquoise;/*=======Flex=======*/
}.item:nth-of-type(1) {order: 5;
}.item:nth-of-type(5) {order: -1;
}
order: 数值
单独设置子元素的排列循序,按主轴方法计算大小,可为负数
flex-grow
.item:nth-of-type(1) {flex-grow: 1;
}
flex-grow: 1
表示在父容器剩余空间充裕时,子元素将自动放大自身以填充剩余空间,默认为0
及不放大自身
flex-shrink
.item:nth-of-type(1) {flex-shrink: 0;
}
flex-shrink: 0
表示在父容器剩余空间不足时,子元素将不会缩小自身大小以适应空间,默认为0
及自动缩小自身
flex-basis
.item:nth-of-type(1) {flex-basis: 200px;
}
flex-basis: 200px
表示项目默认初始大小为200px
,默认为auto
自动调整
flex
.item:nth-of-type(1) {flex: 0 1 auto;
}
flex: 0 1 auto
表示项目在分配多余空间时不会
相对增长,项目在空间不足时会
相对收缩(默认值)
.item:nth-of-type(1) {flex: auto;
}
flex: auto
表示项目会在分配多余空间时会
相对增长,空间不足时会
相对收缩
.item:nth-of-type(1) {flex: none;
}
flex: none
表示项目在分配多余空间时不会
相对增长,项目在空间不足时不会
相对收缩
.item:nth-of-type(1) {flex: 1;
}
flex: 1
表示项目会在分配多余空间时会
相对增长,空间不足时会
相对收缩
.item:nth-of-type(1) {flex: 200px;
}
flex: 200px
表示项目在分配多余空间时会
相对增长,空间不足时会
相对收缩,默认大小200px
align-self
.item:nth-of-type(1) {align-self: flex-start;
}
align-self: flex-start
设置单个子元素在侧轴上的对齐方式为顶对齐,会覆盖掉父容器的align-items
属性
.item:nth-of-type(1) {align-self: flex-start;
}
align-self: center
设置单个子元素在侧轴上的对齐方式为居中对齐,会覆盖掉父容器的align-items
属性
.item:nth-of-type(1) {align-self: flex-start;
}
align-self: flex-end
设置单个子元素在侧轴上的对齐方式为底对齐,会覆盖掉父容器的align-items
属性
弹性布局案例
后台页面布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#app {margin: 0 auto;width: 100vw;height: 100vh;display: flex;flex-direction: column;}header {width: 100%;height: 10%;background-color: yellow;display: flex;flex-direction: row;/*gap: 5px;*/}header .logo {width: 100px;height: 100px;background-color: blue;}header nav {width: 100px;height: 100px;background-color: blue;}header .user {width: 100px;height: 100px;background-color: blue;margin-left: auto;}section {width: 100%;height: 86%;display: flex;flex-direction: row;overflow: hidden;}section aside {width: 210px;height: 100%;background-color: red;}section main {width: 100%;height: 100%;overflow: auto;}section main .container {background-color: pink;padding: 20px;overflow: auto;}footer {width: 100%;height: 4%;background-color: turquoise;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body>
<div id="app"><header><div class="logo"></div><nav></nav><div class="user"></div></header><section><aside></aside><main><div class="container"><div style="width: 100px; height:1200px;background-color: rgba(153,153,153,0.8)"></div></div></main></section><footer><a href="https://www.xuanzishare.com/">Copyright © xuanzishare.com. All Rights Reserved.</a></footer>
</div>
</body>
</html>
圣杯页面布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#app {margin: 0 auto;width: 100vw;height: 100vh;display: flex;flex-direction: column;}header, footer {width: 100%;height: 8%;background-color: red;}section {width: 100%;height: 84%;background-color: orange;display: flex;flex-direction: row;}section aside:first-child {width: 10%;height: 100%;background-color: pink;}section main {width: 80%;height: 100%;background-color: green;}section aside:last-child {width: 10%;height: 100%;background-color: pink;}</style>
<body>
<div id="app"><header></header><section><aside></aside><main></main><aside></aside></section><footer></footer>
</div>
</body>
版心页面布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#app {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;}header {position: fixed;width: 100%;height: 50px;background-color: red;}section {width: 80%;height: 1800px;background-color: orange;}footer {width: 100%;height: 50px;background-color: red;}</style>
<body>
<div id="app"><header></header><section></section><footer></footer>
</div>
</body>
玄子Share-CSS3 弹性布局知识手册 23.11.30
相关文章:
玄子Share-CSS3 弹性布局知识手册
玄子Share-CSS3 弹性布局知识手册 Flexbox Layout(弹性盒布局)是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布 主轴和交叉轴 使用弹性布局,最重要的一个概念就是主轴与…...
Nat easy IP ACL
0表示匹配,1表示任意(主机位0.0.0.255(255主机位)) rule deny source 192.168.2.1 0 设置拒绝192.168.2.1的主机通过 记住将其应用到接口上 [AR2]acl 2000 //创建基本ACL [AR2-acl-basic-2000]rule deny source 192…...
Numpy数组的数据类型汇总 (第4讲)
Numpy数组的数据类型 (第4讲) 🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…...
通讯app:
为了开发一个即时通讯的app,包含发送文字、语音、视频以及视频通话的功能,我们需要考虑以下的技术栈和实现步骤: 技术栈建议: 前端:React Native 或 Flutter 用于跨平台移动应用开发。后端:ThinkPHP Wor…...
【Backbone】TransNeXt:最新ViT模型(原理+常用神经网络汇总)
文章目录 一、近几年神经网络 Backbone 回顾1.Densenet 与 Resnet2.CBP3.SENet4.GCNet5.DANet6.PANet 与 FPN7.ASPP8.SPP-net9.PSP-net10.ECA-Net 二、TransNeXt(2023)1.提出问题2.Aggregated Pixel-focused Attention2.1 Pixel-focused Attention&#…...
使用Java将图片添加到Excel的几种方式
1、超链接 使用POI,依赖如下 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency>Java代码如下,运行该程序它会在桌面创建ImageLinks.xlsx文件。 …...
用什么台灯对眼睛最好?考公护眼台灯推荐
之前我一直觉得,孩子近视,是因为玩手机太多,看电子产品的时间过长,但后来控制孩子看电子产品时间的触底反弹与越来越深的度数告诉我,孩子近视的真正原因,我根本没有找到,后来看到一篇报告&#…...
【嵌入式开发 Linux 常用命令系列 4.2 -- .repo 各个目录介绍】
文章目录 概述.repo 目录结构manifests/default.xmlManifest 文件的作用default.xml 文件内容示例linkfile 介绍 .repo/projects 子目录配置和管理configHEADhooksinfo/excludeobjectsrr-cache 工作区中的对应目录 概述 repo 是一个由 Google 开发的版本控制工具,它…...
【C++学习手札】基于红黑树封装模拟实现map和set
🎬慕斯主页:修仙—别有洞天 💜本文前置知识: 红黑树 ♈️今日夜电波:漂流—菅原纱由理 2:55━━━━━━️💟──────── 4:29 …...
linux查看当前路径的所有文件大小;linux查看当前文件夹属于什么文件系统
1:指令查看当前路径所有文件内存空间大小;这样可以方便查询每个文件大小情况,根据需要进行删除 df -h // 根目录 du -ah --max-depth1 // 一级目录 虚拟机 du -ah -d 1 // 一级目录 设备使用 du -ah --max-depth2 // 二…...
PPT插件-好用的插件-超级文本-大珩助手
常用字体 内置了大量的常用字体,方便快捷的一键更换字体,避免系统字体过多卡顿 文字整理 包含删空白行、清理编号、清理格式,便于处理从网络上复制的资料 文本打散与合并 包含文本打散、文本合并,文本打散可实现将一个文本打散…...
Kafka中的Topic
在Kafka中,Topic是消息的逻辑容器,用于组织和分类消息。本文将深入探讨Kafka Topic的各个方面,包括创建、配置、生产者和消费者,以及一些实际应用中的示例代码。 1. 介绍 在Kafka中,Topic是消息的逻辑通道࿰…...
LAMP部署
目录 一、安装apache 二、配置mysql 三、安装php 四、搭建论坛 4、安装另一个网站 一、安装apache 1.关闭防火墙,将安装Apache所需软件包传到/opt目录下 systemctl stop firewalld systemctl disable firewalld setenforce 0 httpd-2.4.29.tar.gz apr-1.6.2.t…...
DouyinAPI接口开发系列丨商品详情数据丨视频详情数据
电商API就是各大电商平台提供给开发者访问平台数据的接口。目前,主流电商平台如淘宝、天猫、京东、苏宁等都有自己的API。 二、电商API的应用价值 1.直接对接原始数据源,数据提取更加准确和完整。 2.查询速度更快,可以快速响应用户请求实现…...
AWS Remote Control ( Wi-Fi ) on i.MX RT1060 EVK - 3 “编译 NXP i.MX RT1060”( 完 )
此章节叙述如何修改、建构 i.MX RT1060 的 Sample Code“aws_remote_control_wifi_nxp” 1. 点击“Import SDK example(s)” 2. 选择“MIMXRT1062xxxxA”>“evkmimxrt1060”,并确认 SDK 版本后,点击“Next>” 3. 选择“aws_examples”>“aw…...
5G - NR物理层解决方案支持6G非地面网络中的高移动性
文章目录 非地面网络场景链路仿真参数实验仿真结果 非地面网络场景 链路仿真参数 实验仿真结果 Figure 5 && Figure 6:不同信噪比下的BER和吞吐量 变量 SISO 2x2MIMO 2x4MIMO 2x8MIMOReyleigh衰落、Rician衰落、多径TDL-A(NLOS) 、TDL-E(LOS)(a)QPSK (b)16…...
python epub文件解析
python epub文件解析 代码BeautifulSoup 介绍解释 代码 import ebooklib from bs4 import BeautifulSoup from ebooklib import epubbook epub.read_epub("逻辑思维训练1200题.epub")# 解析 for item in book.get_items():# 提取书中的文本内容if item.get_type() …...
Visual Studio 2015 中 FFmpeg 开发环境的搭建
Visual Studio 2015 中 FFmpeg 开发环境的搭建 Visual Studio 2015 中 FFmpeg 开发环境的搭建新建控制台工程拷贝并配置 FFmpeg 开发文件测试FFmpeg 开发文件的下载链接 Visual Studio 2015 中 FFmpeg 开发环境的搭建 新建控制台工程 新建 Win32 控制台应用程序。 具体流程&…...
期末速成数据库极简版【存储过程】(5)
目录 【7】系统存储过程 【8】用户存储过程——带输出参数的存储过程 创建存储过程 存储过程调用 【9】用户存储过程——不带输出参数的存储过程 【7】系统存储过程 系统存储我们就不做过程讲解用户存储过程会考察一道大题,所以我们把重点放在用户存储过程。…...
Android Studio的代码笔记--IntentService学习
IntentService学习 IntentService常规用法清单注册服务服务内容开启服务 IntentService 一个 HandlerThread工作线程,通过Handler实现把消息加入消息队列中等待执行,通过传递的intent在onHandleIntent中处理任务。(多次调用会按顺序执行事件…...
C语言 - 字符函数和字符串函数
系列文章目录 文章目录 系列文章目录前言1. 字符分类函数islower 是能够判断参数部分的 c 是否是⼩写字⺟的。 通过返回值来说明是否是⼩写字⺟,如果是⼩写字⺟就返回⾮0的整数,如果不是⼩写字⺟,则返回0。 2. 字符转换函数3. strlen的使⽤和…...
Redis rdb源码解析
前置学习:Redis server启动源码-CSDN博客 1、触发时机 1、执行save命令--->rdbSave函数 2、执行bgsave命令--->rdbSaveBackground函数或者(serverCron->prepareForShutdown) 3,主从复制-->startBgsaveForReplication…...
深入理解CyclicBarrier
文章目录 1. 概念2. CylicBarier使用简单案例3. 源码 1. 概念 CyclicBarrier 字面意思回环栅栏(循环屏障),通过它可以实现让一组线程等待至某个状态(屏障点)之后再全部同时执行。叫做回环是因为当所有等待线程都被释放…...
微信小程序 - 格式化操作 moment.js格式化常用使用方法总结大全
格式化操作使用 1. 首先,下载一个第三方库 moment npm i moment --save 注:在微信小程序中无法直接npm 下载 导入 的(安装一个就需要构建一次) 解决:菜单栏 --> 工具 --> 构建 npm 点击即可(会…...
学习pytorch18 pytorch完整的模型训练流程
pytorch完整的模型训练流程 1. 流程1. 整理训练数据 使用CIFAR10数据集2. 搭建网络结构3. 构建损失函数4. 使用优化器5. 训练模型6. 测试数据 计算模型预测正确率7. 保存模型 2. 代码1. model.py2. train.py 3. 结果tensorboard结果以下图片 颜色较浅的线是真实计算的值&#x…...
电子学会C/C++编程等级考试2021年09月(五级)真题解析
C/C++等级考试(1~8级)全部真题・点这里 第1题:抓牛 农夫知道一头牛的位置,想要抓住它。农夫和牛都位于数轴上,农夫起始位于点N(0<=N<=100000),牛位于点K(0<=K<=100000)。农夫有两种移动方式: 1、从X移动到X-1或X+1,每次移动花费一分钟 2、从X移动到2*X,每…...
Halcon联合winform显示以及处理
在窗口中添加窗体和按钮,并在解决方案资源管理器中调加了导入Halcon导出的.cs文件,运行出现下图的问题: 问题1:CS0017 程序定义了多个入口点。使用/main(指定包含入口点的类型)进行编译。 解决方案1.: 右…...
【设计模式-4.3】行为型——责任链模式
说明:本文介绍设计模式中行为型设计模式中的,责任链模式; 审批流程 责任链模式属于行为型设计模式,关注于对象的行为。责任链模式非常典型的案例,就是审批流程的实现。如一个报销单的审批流程,根据报销单…...
单片机语言--C51语言的数据类型以及存储类型以及一些基本运算
C51语言 本文主要涉及C51语言的一些基本知识,比如C51语言的数据类型以及存储类型以及一些基本运算。 文章目录 C51语言一、 C51与标准C的比较二、 C51语言中的数据类型与存储类型2.1、C51的扩展数据类型2.2、数据存储类型 三、 C51的基本运算3.1 算术运算符3.2 逻辑…...
《每天一个Linux命令》 -- (5)通过sshkey密钥登录服务器
欢迎阅读《每天一个Linux命令》系列!在本篇文章中,将介绍通过密钥生成,使用公钥连接管理服务器。 概念 SSH 密钥是用于安全地访问远程服务器的一种方法。SSH 密钥由一对密钥组成:公钥和私钥。公钥存储在远程服务器上,…...
kubernetes的服务发现(二)
如前面的文章我们说了,kubernetes的服务发现是服务端发现模式。它有一个服务注册中心,使用DNS作为服务的注册表。每个集群都会运行一个DNS服务,默认是CoreDNS服务。每个服务都会在这个DNS中注册。注册的大致过程: 1、向kube-apise…...
【矩阵论】Chapter 4—特征值和特征向量知识点总结复习
文章目录 1 特征值和特征向量2 对角化3 Schur定理和正规矩阵4 Python求解 1 特征值和特征向量 定义 设 σ \sigma σ为数域 F F F上线性空间 V V V上的一个线性变换,一个非零向量 v ∈ V v\in V v∈V,如果存在一个 λ ∈ F \lambda \in F λ∈F使得 σ (…...
Linux 进程地址空间
知识回顾 在 C 语言的学习过程中,我们知道内存是可以被划分为栈区,堆区,全局数据区,字符常量区,代码区的。他的空间排布可能是下面的样子: 其中,全局数据区,可以划分为已初始化全局…...
websocket vue操作
let websocket: WebSocket; /** websocket测试 */ function connectWebsocket() {if (typeof WebSocket "undefined") {console.log("您的浏览器不支持WebSocket");return;}// let ip window.location.hostname ":8080";let ip "10.192…...
腾讯云CentOS8 jenkins war安装jenkins步骤文档
腾讯云CentOS8 jenkins war安装jenkins步骤文档 一、安装jdk 1.1 上传jdk-11.0.20_linux-x64_bin.tar.gz 1.2 解压jdk安装包文件 tar -zxvf jdk*.tar.gz 1.3 在/usr/local 目录下创建java目录 cd /usr/local mkdir java 1.4 切到java目录,把jdk解压文件改名为jd…...
Linux: glibc: net/if.h vs linux/if.h
最近看到一段代码改动,用net/if.h替换了linux/if.h。仔细看了看这两个的区别: https://stackoverflow.com/questions/20082433/what-is-the-difference-between-linux-if-h-and-net-if-h 从网上搜了一下看到如下的一个编译错误,如果同时使用这两个if.h文件,需要将net/if.h…...
使用Android Studio导入Android源码:基于全志H713 AOSP,方便解决编译、编码问题
文章目录 一、 篇头二、 操作步骤2.1 编译AOSP AS工程文件2.2 将AOSP导入Android Studio2.3 切到Project试图2.4 等待index结束2.5 下载缺失的JDK 1.82.6 导入完成 三、 导入AS的好处3.1 本文案例演示源码编译错误AS对比同文件其余地方的调用AS错误提示依赖AS做错误修正 一、 篇…...
python random详解
文章目录 random简单示例1. 生成随机浮点数:2. 生成指定范围内的随机整数:3. 从序列中随机选择元素:4. 打乱序列顺序: 常用的方法及其解释和例子:1. random():该方法返回一个0到1之间的随机浮点数。例如&am…...
java-两个列表进行比较,判断那些是需要新增的、删除的、和更新的
文章目录 前言两个列表进行比较,判断那些是需要新增的、删除的、和更新的 前言 如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作不易啊^ _ ^。 而且听说点赞的人每天的运气都不会太差,实…...
【WPF.NET开发】WPF中的对话框
目录 1、消息框 2、通用对话框 3、自定义对话框 实现对话框 4、打开对话框的 UI 元素 4.1 菜单项 4.2 按钮 5、返回结果 5.1 模式对话框 5.2 处理响应 5.3 非模式对话框 Windows Presentation Foundation (WPF) 为你提供了自行设计对话框的方法。 对话框是窗口&…...
NLP项目实战01之电影评论分类
介绍: 欢迎来到本篇文章!在这里,我们将探讨一个常见而重要的自然语言处理任务——文本分类。具体而言,我们将关注情感分析任务,即通过分析电影评论的情感来判断评论是正面的、负面的。 展示: 训练展示如下…...
一款可无限扩展的软件定时器开源框架项目代码
摘自链接 时间片轮询架构如何稳定高效实现,取代传统的标志位判断方式,更优雅更方便地管理程序的时间触发操作。 可以在STM32单片机上运行。...
GRE与顺丰圆通快递盒子
1. DNS污染 随想: 在输入一串网址后,会发生如下变化如果你在系统中配置了 Hosts 文件,那么电脑会先查询 Hosts 文件如果 Hosts 里面没有这个别名,就通过域名服务器查询域名服务器回应了,那么你的电脑就可以根据域名服…...
12.Mysql 多表数据横向合并和纵向合并
Mysql 函数参考和扩展:Mysql 常用函数和基础查询、 Mysql 官网 Mysql 语法执行顺序如下,一定要清楚!!!运算符相关,可前往 Mysql 基础语法和执行顺序扩展。 (8) select (9) distinct (11)<columns_name…...
线性回归与逻辑回归:深入解析机器学习的基石模型
目录 一、线性回归 二、逻辑回归 逻辑回归算法和 KNN 算法的区别 分类算法评价维度...
电脑待机怎么设置?让你的电脑更加节能
在日常使用电脑的过程中,合理设置待机模式是一项省电且环保的好习惯。然而,许多用户对于如何设置电脑待机感到困扰。那么电脑待机怎么设置呢?本文将深入探讨三种常用的电脑待机设置方法,通过详细的步骤,帮助用户更好地…...
数据库对象介绍与实践:视图、函数、存储过程、触发器和物化视图
文章目录 一、视图(View)1、概念2、基本操作1)创建视图2)修改视图3)删除视图4)使用视图 3、使用场景4、实践 二、函数(Function)1、概念2、基本操作1)创建函数2ÿ…...
arm平台编译so文件回顾
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、几个点二、回顾过程 1.上来就执行Makefile2.编译第三方开源库.a文件 2.1 build.sh脚本2.2 Makefile3.最终编译三、其它知识点总结 前言 提示:这…...
【数据结构】顺序表的定义和运算
目录 1.初始化 2.插入 3.删除 4.查找 5.修改 6.长度 7.遍历 8.完整代码 🌈嗨!我是Filotimo__🌈。很高兴与大家相识,希望我的博客能对你有所帮助。 💡本文由Filotimo__✍️原创,首发于CSDN📚。 &…...
idea使用maven的package打包时提示“找不到符号”或“找不到包”
介绍:由于我们的项目是多模块开发项目,在打包时有些模块内容更新导致其他模块在引用该模块时不能正确引入。 情况一:找不到符号 情况一:找不到包 错误代码部分展示: Failure to find com.xxx.xxxx:xxx:pom:0.5 in …...