css3 弹性布局flex

news2024/9/21 11:08:31

文章目录

  • flex弹性盒子
    • flex-direction 决定主轴的方向
    • flex-wrap 换行
    • flex-flow flex-direction和flex-wrap的简写属性
    • justify-content 定义了弹性子元素在主轴上的对齐方式
    • align-items 定义弹性子元素在交叉轴上如何对齐
    • align-content 定义了多根轴线的对齐方式
    • order 定义弹性子元素的排列顺序。数值越小，排列越靠前
    • flex-grow 定义弹性子元素的放大比例
    • flex-shrink 定义了弹性子元素的缩小比例
    • flex-basis 定义了在分配多余空间之前，弹性子元素占据的主轴空间
    • flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
    • align-self 设置单个弹性子元素的对齐方式

flex弹性盒子

通过 display:flex | inline-flex; 将元素设置为弹性容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使容器变为弹性容器</title>
		<style type="text/css">
			.con {
				display: flex;
				/* 使容器变为弹性容器 */	
			}
		</style>
	</head>
	<body>
		<!-- 容器  项目 -->
		<div class="con">
			<p>你好p标签</p>
			<p>你好h3标签</p>
			<div class="">
				00000
				<p>1111</p>
			</div>
		</div>

	</body>
</html>

效果：
弹性容器
弹性容器内包含了一个或多个弹性子元素
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction 决定主轴的方向

flex-direction 属性指定了弹性子元素在父容器中的位置
语法：
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>决定主轴的方向</title>
		<style type="text/css">
			/* 容器  项目 */
			.content {
				display: flex;
				flex-direction:column-reverse;
				/* row （默认值）：左→右
					row-reverse 主轴为水平方向，起点在右端。
					column 主轴为垂直方向，起点在上沿。
					column-reverse 主轴为垂直方向，起点在下沿
			*/
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素1
			</div>
			<div class="item">
				子元素2
			</div>
			<div class="item">
				子元素3
			</div>
			<div class="item">
				子元素4
			</div>
		</div>
	</body>
</html>

效果：
flex-direction效果

flex-wrap 换行

flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行</title>
		<style type="text/css">
			.content {
				display: flex;
				width: 100%;
				flex-wrap: wrap-reverse;
				/* nowrap（默认）：不换行。
				wrap：换行，第一行在上方。
				wrap-reverse：换行，第一行在下方。
				 */
			}
			.item {
				width: 19%;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素11
			</div>
			<div class="item">
				子元素2
			</div>
			<div class="item">
				子元素3
			</div>
			<div class="item">
				子元素4
			</div>
			<div class="item">
				子元素5
			</div>

			<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>
	</body>
</html>

效果：
flex-wrap效果

flex-flow flex-direction和flex-wrap的简写属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用
语法：
flex-flow=“column nowrap”
各个值的解析：

flex-direction 	可能的值：
					row
					row-reverse
					column
					column-reverse
					initial
					inherit
					默认值是 "row",规定灵活项目的方向
flex-wrap 	可能的值：
				nowrap
				wrap
				wrap-reverse
				initial
				inherit
				默认值是 "nowrap"	规定灵活项目是否拆行或拆列
initial 	设置该属性为它的默认值
inherit 	从父元素继承该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02+03的简写属性</title>
		<style type="text/css">
			.content {
				display: flex;
				width: 100%;
				flex-flow: row nowrap;
				/* 1.flex-direction属性值
				2. flex-wrap属性值 */
			}
			.item {
				flex-basis: 20%;/* 设置宽度 */
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<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>
	</body>
</html>

效果：
flex-flow效果

justify-content 定义了弹性子元素在主轴上的对齐方式

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:

flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end： 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center： 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
space-between： 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等
space-around： 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<title>定义了项目在主轴上的对齐方式</title>
		<style type="text/css">
				.content {
					display: flex;
					width: 100%;
					/* height: 300px;
					flex-direction: column; */
					flex-wrap: wrap;
					justify-content:space-around;
					/* flex-start（默认值）：左对齐
					flex-end：右对齐
					center： 居中
					space-between：两端对齐，项目之间的间隔都相等。
					space-around：每个项目两侧的间隔相等。 */
				}
			.item {
					width: 10%;
					border: #000000 1px solid;
				}
			</style>
		</head>
		<body>
			<div class="content">
				<div class="item">
					子元素1
				</div>
				<div class="item">
					子元素2
				</div>
				<div class="item">
					子元素3
				</div>
				<div class="item">
					子元素4
				</div>
			</div>
	</body>
</html>

效果：
justify-content效果

align-items 定义弹性子元素在交叉轴上如何对齐

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法:
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义项目在交叉轴上如何对齐</title>
	<style type="text/css">
			.content {
				display: flex;
				background-color: #00FFFF;
				align-items:center;
				height: 400px;
			/* 
			flex-start：交叉轴的起点对齐。
			flex-end：交叉轴的终点对齐。
			center：交叉轴的中点对齐。
			baseline: 项目的第一行文字的基线对齐。
			stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
			 */
			}
			.item{
				
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素1
			</div>
			<div class="item">
				子元素2
			</div>
			<div class="item">
				子元素3
			</div>
		</div>
	</body>
</html>

效果：
align-items效果图

align-content 定义了多根轴线的对齐方式

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:

stretch - 默认。各行将会伸展以占用剩余的空间
flex-start - 各行向弹性盒容器的起始位置堆叠
flex-end - 各行向弹性盒容器的结束位置堆叠
center -各行向弹性盒容器的中间位置堆叠
space-between -各行在弹性盒容器中平均分布
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义了多根轴线的对齐方式</title>
		<style>
			#main {
				width: 100px;
				height: 600px;
				border: 1px solid #c3c3c3;
				display: flex;
				flex-wrap: wrap;
				align-content: space-around;
			}
			/* 
				flex-start：与交叉轴的起点对齐。
				flex-end：与交叉轴的终点对齐。
				center：与交叉轴的中点对齐。
				space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
				space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
				stretch（默认值）：轴线占满整个交叉轴。
				 */
			#main div {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div style="background-color:coral;"></div>
			<div style="background-color:lightblue;"></div>
			<div style="background-color:pink;"></div>
		</div>
	</body>
</html>

效果：
align-content效果

order 定义弹性子元素的排列顺序。数值越小，排列越靠前

语法:
order:
各个值解析:

<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义项目的排列顺序。数值越小，排列越靠前</title>
		<style type="text/css">
			.content{
				display: flex;
				width: 500px;
				border: #000000 1px solid;
			}
			.item{
				/* order:1; */
				background-color: #009DFD;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item" style="order: 3;">
				子元素1
			</div>
			<div class="item" style="order: 4;">
				子元素2
			</div>
			<div class="item" style="order: 1;">
				子元素3
			</div>
			<div class="item" style="order: 2;">
				子元素4
			</div>
			<div class="item" style="order: 0;">
				子元素5
			</div>
		</div>
	</body>
</html>

效果：
order效果

flex-grow 定义弹性子元素的放大比例

flex-grow 属性用于设置或检索弹性盒子的扩展比率。
语法：
flex-grow: number|initial|inherit;
各个值解析：

number -	一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是
initial -	设置该属性为它的默认值
inherit -	从父元素继承该属性

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义项目的放大比例</title>
	<style type="text/css">
			.content{
				display: flex;
				width: 100%;
				border: #000000 1px solid;
			}
			.item{
				/* flex-grow: 1; */
				background-color: #009DFD;
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item" style="order: 3;flex-grow: 1;">
				子元素1
			</div>
			<div class="item" style="order: 4;flex-grow: 3;">
				子元素2
			</div>
			<div class="item" style="order: 0;flex-grow: 1;">
				子元素3
			</div>
			<div class="item" style="order: 2;flex-grow: 1;">
				子元素4
			</div>
			<div class="item" style="order: 0;flex-grow: 1;">
				子元素5
			</div>
		</div>
	</body>
</html>

效果：
flex-grow效果

flex-shrink 定义了弹性子元素的缩小比例

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值
语法：
flex-shrink: number|initial|inherit;
各个值的解析：

number - 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1
initial - 设置该属性为它的默认值
inherit - 从父元素继承该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义了项目的缩小比例</title>
		<style>
			#content {
				display: flex;
				width: 500px;
			}
			#content div {
				flex-basis: 120px;
				border: 3px solid rgba(0, 0, 0, .2);
			}
			.box {
				flex-shrink: 1;
			}
			.box1 {
				flex-shrink: 2;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="box">A</div>
			<div class="box">B</div>
			<div class="box">C</div>
			<div class="box1">D</div>
			<div class="box1">E</div>
		</div>
	</body>
</html>

效果：
flex-shrink效果

flex-basis 定义了在分配多余空间之前，弹性子元素占据的主轴空间

flex-basis 属性用于设置或检索弹性盒伸缩基准值
语法：
flex-basis: number|auto|initial|inherit;
各个值的解析：

number - 一个长度单位或者一个百分比，规定灵活项目的初始长度
auto - 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定
initial - 设置该属性为它的默认值
inherit - 从父元素继承该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义了在分配多余空间之前，项目占据的主轴空间</title>
		<style type="text/css">
			.content {
				display: flex;
				width: 100%;
				background-color: #009DFD;

			}
			.item {
				flex-basis:20%;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<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>
	</body>
</html>

效果：
flex-basis效果

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
语法：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
各个值的解析：

flex-grow - 一个数字，规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink - 一个数字，规定项目将相对于其他灵活的项目进行收缩的量
flex-basis - 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字
auto - 与 1 1 auto 相同
none - 与 0 0 auto 相同
initial - 设置该属性为它的默认值，即为 0 1 auto
inherit - 从父元素继承该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>09+10+11简写</title>
		<style type="text/css">
			/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
			.content {
				display: flex;
				width: 100%;
				background-color: #009DFD;
			}
			.item {
				flex: 1;
				flex-basis: 10%;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素1
			</div>
			<div class="item">
				子元素2
			</div>
			<div class="item" style="flex: 3 0 auto;">
				子元素3
			</div>
			<div class="item">
				子元素4
			</div>
			<div class="item">
				子元素5
			</div>
		</div>
	</body>
</html>

效果：
flex属性效果

align-self 设置单个弹性子元素的对齐方式

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式
语法：
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
各个值的解析：

auto - 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 	测试 »
stretch - 元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制
center - 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
flex-start - 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end - 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline - 元素位于容器的基线上，如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐
initial 	设置该属性为它的默认值
inherit 	从父元素继承该属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置单个项目的对齐方式</title>
		<style type="text/css">
			.content {
				display: flex;
				width: 100%;
				background-color: #009DFD;
				height: 200px;
			}
			.item {
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="item">
				子元素1
			</div>
			<div class="item" style="align-self: center;">
				子元素2
			</div>
			<div class="item">
				子元素3
			</div>
			<div class="item">
				子元素4
			</div>
			<div class="item">
				子元素5
			</div>
		</div>
	</body>
</html>

效果：
align-self效果
分享结束啦

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

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

相关文章

网络安全合规-数据安全治理的重要性

网络安全合规-数据安全治理的重要性

数据安全治理能力评估框架将数据安全治理分为三大层次&#xff0c;即数据安全战略、数据全生命周期安全和基础安全[3]。数据安全战略指组织的数据安全顶层规划&#xff0c;起到为数据安全治理“搭框架”“配人手”的作用&#xff1b;数据全生命周期安全指组织在数据全生命周期的…
阅读更多...
PDF转换成CAD怎么转换？分享几种快速转换方法

PDF转换成CAD怎么转换？分享几种快速转换方法

CAD 文件通常具有比 PDF 文件更高的精度。这是因为 CAD 文件是为设计和制造目的而创建的&#xff0c;而 PDF 文件则是为共享和打印目的而创建的。因此&#xff0c;将 PDF 转换成 CAD 可以提高设计的精度和准确性。CAD 文件可以通过精确的尺寸、角度、线型和曲线来描述物体。这使…
阅读更多...
c++崩溃调试总结

c++崩溃调试总结

个人博客地址: https://cxx001.gitee.io windows上程序崩溃调试 场景1 调用第三方dll崩溃 调试需求 需要第三方提供对应的pdb和源码。 调试步骤 把dll 、pdb和exe程序放同级目录。在调用dll崩溃的地方打上断点&#xff0c;F5运行&#xff0c;第一次调试需要选择dll对应源码…
阅读更多...
javaweb知识初汇总

javaweb知识初汇总

前言&#xff1a; 本文主要介绍了JavaWeb前端开发的以下几个方面&#xff1a; 1. HTML/CSS&#xff1a;使用HTML和CSS进行页面结构和样式的设计与布局。 2. JavaScript&#xff1a;使用JavaScript进行页面的交互和动态效果的实现。 3. 前端框架&#xff1a;使用前端框架如V…
阅读更多...
CSV文件简单介绍（逗号分隔值Comma-Separated Values）

CSV文件简单介绍（逗号分隔值Comma-Separated Values）

文章目录 CSV文件CSV文件优点 CSV对比Excel xlsx文件CSV文件应用场景CSV文件使用示例用Python生成CSV文件将Excel文件导出为CSV文件 CSV文件 CSV是逗号分隔值&#xff08;Comma-Separated Values&#xff09;的缩写&#xff0c;是一种常见的电子表格文件格式。CSV文件以纯文本…
阅读更多...
【图像处理】去雾源码收集（halcon、python、C#、VB、matlab）

【图像处理】去雾源码收集（halcon、python、C#、VB、matlab）

【图像处理】去雾代码收集&#xff08;附halcon、python、C#、VB、matlab源码&#xff09; 一、halcon算法1.1 halcon算法源码1.2 halcon算法效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/8ad5217a59be4de29b5a7b6eee997b85.png#pic_center) 二、opencv算法2.1 py…
阅读更多...
对弈人工智能！myCobot 280开源六轴机械臂Connect 4 四子棋对弈

对弈人工智能！myCobot 280开源六轴机械臂Connect 4 四子棋对弈

Connect 4 myCobot280 Introduction Hi,guys.今天我们来介绍一下人工智能下棋&#xff0c;我们将用机械臂来作为对手跟你进行下棋。 人工智能下棋的研究可以追溯到20世纪50年代。当时&#xff0c;计算机科学家开始探索如何编写程序&#xff0c;使计算机能够下象棋。其中最著…
阅读更多...
【React组件通讯的三种方式】

【React组件通讯的三种方式】

React组件通讯的三种方式 父组件传递数据给子组件子组件传递数据给父组件 React组件之间的通讯分为三种&#xff1a; 父组件 →子组件子组件 →父组件兄弟组件 父组件传递数据给子组件 步骤&#xff1a; 父组件提供要传递的state数据给子组件标签添加属性&#xff0c;值为st…
阅读更多...
Spring Boot 中的分布式配置中心：什么是它，原理及如何使用

Spring Boot 中的分布式配置中心：什么是它，原理及如何使用

Spring Boot 中的分布式配置中心&#xff1a;什么是它&#xff0c;原理及如何使用 在分布式应用程序中&#xff0c;配置管理是一项重要的任务。通常情况下&#xff0c;配置信息被硬编码在应用程序中&#xff0c;这样一来&#xff0c;当应用程序需要相应的配置信息时&#xff0…
阅读更多...
$.ajax 怎么进行 json请求

$.ajax 怎么进行 json请求

$.ajax请求默认是form表单的格式&#xff0c;这次给到的接口需要的是json的格式&#xff0c;一开始只是将dataType调整为application/json; charsetutf-8&#xff0c;在f12看到的确实是将请求方式改变了&#xff0c;但是参数格式不对劲&#xff0c;应该是个json对象才对 通过查…
阅读更多...
PyTorch示例——ResNet34模型和Fruits图像数据

PyTorch示例——ResNet34模型和Fruits图像数据

PyTorch示例——ResNet34模型和Fruits图像数据 前言导包数据探索查看数据集构建构建模型 ResNet34模型训练绘制训练曲线 前言 ResNet34模型&#xff0c;做图像分类数据使用水果图片数据集&#xff0c;下载见Kaggle Fruits Dataset (Images)Kaggle的Notebook示例见 PyTorch——…
阅读更多...
android_mars老师_蓝牙学习1

android_mars老师_蓝牙学习1

实现功能&#xff1a; 查看本机是否有蓝牙功能、扫瞄周边蓝牙获取其地址。 效果展示&#xff1a; 具体流程&#xff1a; AndroidManifest.xml配置蓝牙权限activity_main.xml绘制页面_按钮MainActivity实现&#xff1a;点击事件监听按钮------>创建一个bluetoothAdapter对…
阅读更多...
Check Point R81.20 Gaia - 下一代防火墙 (NGFW)

Check Point R81.20 Gaia - 下一代防火墙 (NGFW)

Check Point R81.20 Gaia - 下一代防火墙 (NGFW) Quantum Security Gateway 请访问原文链接&#xff1a;https://sysin.org/blog/check-point-r81/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Quantum Security Gateway a…
阅读更多...
执行shell脚本时，提示：第xxx行：[: xxxxxxxxxxxxxxxxxxxxxxxxxxxx：需要一元表达式

执行shell脚本时，提示：第xxx行：[: xxxxxxxxxxxxxxxxxxxxxxxxxxxx：需要一元表达式

定位到 283行看看情况。。。 # ... 此处省略诸多脚本命令isContinue1for item_id in "${ENABLE_BURNER_ARRAY[]}"doif [ $item_id $idd_serial ];then isContinue0continuefidoneif [ $isContinue -eq 0 ];thencontinuefi# ... 此处省略诸多脚本命令# 该行即为 283行…
阅读更多...
入侵排查与响应-window和linux版

入侵排查与响应-window和linux版

目录 &#xff08;一&#xff09;关于这方面的一些简单了解 1、我们的电脑为什么会被黑客入侵 2、黑客攻击的方式 &#xff08;二&#xff09;window入侵排查 1、查看异常特征 2、系统账户安全 3、检测异常端口、进程 4、查看启动项、计划任务、服务 5、检查系统相关信…
阅读更多...
三、eureka-server端和客户端配置文件讲解

三、eureka-server端和客户端配置文件讲解

常用配置文件设置 通过这张图理解为什么要进行文件配置 server 中常用的配置 server:port: 8761spring:application:name: eureka-servereureka:client:service-url: #eureka 服务端和客户端的交互地址,集群用,隔开defaultZone: http://localhost:8761/eureka #自己注册自…
阅读更多...
中移物联车联网项目，在 TDengine 3.0 的应用

中移物联车联网项目，在 TDengine 3.0 的应用

小T导读&#xff1a;在中移物联网的智慧出行场景中&#xff0c;需要存储车联网设备的轨迹点&#xff0c;还要支持对车辆轨迹进行查询。为了更好地进行数据处理&#xff0c;他们在 2021 年上线了 TDengine 2.0 版本的 5 节点 3 副本集群。 3.0 发布后&#xff0c;它的众多特性吸…
阅读更多...
C语言入门篇（五）

C语言入门篇（五）

前言 　　函数是 C 语言中的重要组成部分&#xff0c;它可以将程序分解为模块&#xff0c;提高代码的可读性和可维护性。 　　&#x1f352;本篇文章将详细介绍 C 语言中的函数。 函数 1. 函数是什么&#xff1f;2. 函数的分类2.1 库函数2.2 自定义函数 3. 函数的参数3.1 实际参…
阅读更多...
select下拉框---无限滚动加载

select下拉框---无限滚动加载

需求&#xff1a; select的下拉框&#xff0c;后端做了分页&#xff0c;此时前段需要同步加分页 解决思路&#xff1a; 考虑到交互和性能&#xff0c;采用触底请求下一页&#xff08;无限滚动加载&#xff09; 代码示例&#xff1a; import { Select, message } from antd; im…
阅读更多...
UE5.1.1 C++从0开始(16.作业5思路分享)

UE5.1.1 C++从0开始(16.作业5思路分享)

教程的链接&#xff1a;https://www.bilibili.com/video/BV1nU4y1X7iQ 总结一下这次的任务点&#xff1a; 用PlayerState来做一个Credit系统&#xff0c;需要在我们的ui内显示我们的分数更新血药对象&#xff0c;每次使用血药都会扣除相应的分数新增一个金币对象&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023