CSS弹性布局

CSS弹性布局

一、概念

​ 弹性盒子是 CSS3 的一种新的布局模式。

​ CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

​ 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

​ 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

​ 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;              /*将div设置为弹性容器*/		   	
		}

二、弹性容器属性

2.1 flex-direction属性

顺序指定了弹性子元素在父容器中的位置。

语法：

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

示例1:子元素水平排列

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;              /*将div设置为弹性盒模型对象*/	
			flex-direction: row;        /*默认，子元素水平排列*/
		}

在这里插入图片描述

示例2：子元素水平反向排列

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			flex-direction: row-reverse;        /*子元素水平反向排列*/
		}

在这里插入图片描述

示例3：子元素纵向排列

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			flex-direction: column;              /*子元素纵向排列*/
		}

在这里插入图片描述

示例4：子元素纵向反向排列

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			flex-direction: column-reverse;     /*子元素纵向反向排列*/
		}

在这里插入图片描述

2.2 justify-content 属性

应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

语法：

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）。

示例1：头部对齐

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			justify-content: flex-start;        /*头部对齐*/
		}

在这里插入图片描述

示例2：尾部对齐

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			justify-content: flex-end;          /*尾部对齐*/
		}

在这里插入图片描述

示例3：居中对齐

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			justify-content: center;            /*居中对齐*/
		}

在这里插入图片描述

示例4：平均分布1

	#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			justify-content: space-between;     /*平均分布1*/
		}

在这里插入图片描述

示例4：平均分布2

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			justify-content: space-around;      /*平均分布2*/
		}

在这里插入图片描述

2.3 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’属性的限制。 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

示例1：侧轴（纵轴）方向头部对齐

	#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			align-items: flex-start;            /*侧轴（纵轴）方向头部对齐*/
		}

在这里插入图片描述

示例2：侧轴（纵轴）方向尾部对齐

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			align-items: flex-end;              /*侧轴（纵轴）方向尾部对齐*/
		}

在这里插入图片描述

示例3：侧轴（纵轴）方向居中对齐

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                      /*将div设置为弹性盒模型对象*/	
			align-items: center;                /*侧轴（纵轴）方向居中对齐*/
		}

在这里插入图片描述

示例4：按文本的基线对齐

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                        /*将div设置为弹性盒模型对象*/				
			align-items: baseline;                /*侧轴（纵轴）方向按子元素内文本基线对齐*/ 
		}

在这里插入图片描述

示例5：stretch（默认值）

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;             /*将div设置为弹性盒模型对象*/				
			align-items: stretch;      /*默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度*/ 
		}

在这里插入图片描述

2.4 flex-wrap 属性

用于指定弹性盒子的子元素换行方式。

语法：

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

示例1：不换行，子元素的宽度会被压缩

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;             /*将div设置为弹性盒模型对象*/				
			flex-wrap: nowrap;         /*默认值，不换行*/ 
		}

在这里插入图片描述

示例2：换行

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;             /*将div设置为弹性盒模型对象*/				
			flex-wrap: wrap;           /*换行*/ 
		}

在这里插入图片描述

示例3：反转 wrap 排列

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
			flex-wrap: wrap-reverse;           /*反转 wrap 排列*/ 
		}

在这里插入图片描述

2.5 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 - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

示例1：各行向弹性盒容器的起始位置堆叠

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
			flex-wrap: wrap;
			align-content: flex-start;         /*各行向弹性盒容器的起始位置堆叠*/
		}

在这里插入图片描述

示例2：各行向弹性盒容器的结束位置堆叠

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
			flex-wrap: wrap;
			align-content: flex-end;           /*各行向弹性盒容器的结束位置堆叠*/
		}

在这里插入图片描述

示例3：各行向弹性盒容器的中间位置堆叠

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
			flex-wrap: wrap;
			align-content: center;            /*各行向弹性盒容器的中间位置堆叠*/
		}

在这里插入图片描述

示例4：各行在弹性盒容器中平均分布1

在这里插入图片描述

示例5：各行在弹性盒容器中平均分布2

#box1{
			width: 800px;
			height: 600px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
			flex-wrap: wrap;
			align-content: space-around;       /*各行在弹性盒容器中平均分布*/
		}

在这里插入图片描述

三、弹性子元素属性

3.1 order属性

子元素排序,用整数值来定义排列顺序，数值小的排在前面。可以为负值。

语法：

order:<integer>

示例：

#box1{
			width: 800px;
			height: 200px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
		}
		#box1 div{
			width:200px;
			height: 60px; 
			line-height: 60px;
			text-align: center;			
		}
		#item1{
			background-color: red;
			order:6                           /*排序顺序，数字越小顺序越靠前*/				
		}
		#item2{
			background-color: yellow;
			order:5                           /*排序顺序，数字越小顺序越靠前*/		
		}
		#item3{
			background-color: blue;
			order:4                           /*排序顺序，数字越小顺序越靠前*/			
		}
		#item4{
			background-color: green;
			order:3                           /*排序顺序，数字越小顺序越靠前*/
				}
		#item5{
			background-color: pink;
			order:2                           /*排序顺序，数字越小顺序越靠前*/
				}
		#item6{
			background-color: firebrick;
			order:1                           /*排序顺序，数字越小顺序越靠前*/
				}
		
	</style>
	<body>
		<div id='box1'>
			<div id='item1'>1</div>
			<div id='item2'>2</div>
			<div id='item3'>3</div>
			<div id='item4'>4</div>
			<div id='item5'>5</div>
			<div id='item6'>6</div>
			
		</div>
	</body>

在这里插入图片描述

3.2 margin属性

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全集中。

示例1：margin-right,自动获取弹性容器右侧的空间

#item1{
			background-color: red;												
			margin-right: auto;               /*自动获取弹性容器右侧的空间*/
		}

在这里插入图片描述

示例2：margin-left，自动获取弹性容器左侧的空间

#item1{
			background-color: red;												
			margin-left: auto;               /*自动获取弹性容器左侧的空间*/
		}

在这里插入图片描述

示例3：margin-top：自动获取弹性容器上侧的空间

#item1{
			background-color: red;												
			margin-top:auto                       /*自动获取弹性容器上侧的空间*/
		}

在这里插入图片描述

示例4：margin-bottom：自动获取弹性容器下侧的空间

#item1{
			background-color: red;												
			margin-bottom:auto;                       /*自动获取弹性容器下侧的空间*/
		}

在这里插入图片描述

示例4：margin：自动获取弹性容器上下左右侧的空间

#item1{
			background-color: red;												
			margin:auto                       /*自动获取弹性容器上下左右侧的空间*/
		}

在这里插入图片描述

3.3 align-self属性

用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法：

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

3.4 flex-grow属性

用于设置或检索弹性盒的扩展比率

语法：

flex-grow: number|initial|inherit;

number:一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0(扩展）。

#box1{
			width: 800px;                      /*弹性容器的总宽度*/
			height: 200px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
		}
#box1 div{
			width:100px;                       /*每个子元素的宽度*/
			height: 60px; 
			line-height: 60px;
			text-align: center;			
		}
#item1{
			background-color: red;												
			flex-grow: 2;    /*扩展的空间为剩余空间*1/5，即(800-100*3)*2/5=200，实际宽度为100+200=300px   */
		}
#item2{
			background-color: yellow;
			flex-grow: 2;    /*扩展的空间为剩余空间*1/5，即(800-100*3)*2/5=200，实际宽度为100+200=300px  */			
		}
#item3{
			background-color: blue;
			flex-grow: 1;    /*扩展的空间为剩余空间*1/5，即(800-100*3)*1/5=100，实际宽度为100+100=200px  */     		
		}

在这里插入图片描述

3.5 flex-shrink属性

用于设置或检索弹性盒的收缩比率。。

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

语法：

flex-shrink: number|initial|inherit;

number:一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0

示例：

#box1{
			width: 800px;                      /*弹性容器的总宽度*/
			height: 200px;
			background-color: gray;
			display: flex;                     /*将div设置为弹性盒模型对象*/				
		}
		#box1 div{
			width:300px;                       /*每个子元素的宽度*/
			height: 60px; 
			line-height: 60px;
			text-align: center;			
		}
		#item1{
			background-color: red;												
			flex-shrink: 2;    /*收缩的空间为所有子元素空间之和减弹性容器空间，即300*3-800=100px,该子元素收缩空间为100*2/5=40px,该子元素实际宽度为300-40=260px*/
		}
		#item2{
			background-color: yellow;
			flex-shrink: 2;    /*收缩的空间为所有子元素空间之和减弹性容器空间，即300*3-800=100px,该子元素收缩空间为100*2/5=40px,该子元素实际宽度为300-40=260px*/
		}			
		
		#item3{
			background-color: blue;
			flex-shrink: 1;    /*收缩的空间为所有子元素空间之和减弹性容器空间，即300*3-800=100px,该子元素收缩空间为100*1/5=20px,该子元素实际宽度为300-20=280px*/
		}

在这里插入图片描述

3.6 flex属性

用于指定弹性子元素如何分配空间。

语法：

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
  • none：none关键字的计算值为: 0 0 auto
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  • [ flex-basis ]：定义弹性盒子元素的默认基准值。

示例1：flex-grow

#item1{
			background-color: red;												
			flex:2                         /*占2/5的空间*/          
		}
#item2{
			background-color: yellow;
			flex:2                        /*占1/5的空间*/    		
		}
#item3{
			background-color: blue;
			flex:1                        /*占1/5的空间*/         		
		}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

山西电力市场日前价格预测【2024-02-21】

山西电力市场日前价格预测【2024-02-21】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-02-21&#xff09;山西电力市场全天平均日前电价为470.29元/MWh。其中&#xff0c;最高日前电价为654.81元/MWh&#xff0c;预计出现在18:45。最低日前电价为355.63元/MWh&#xff0c;预计…
阅读更多...
将Windows的系统日志自动收集并且转发到syslog服务器，百试百灵

将Windows的系统日志自动收集并且转发到syslog服务器，百试百灵

将windows的系统日志自动收集并且转发到syslog服务器&#xff0c;百试百灵* **使用*Evtsys工具&#xff0c;他会自动收集windows系统日志&#xff0c;然后发送到syslog服务器&#xff0c;并且不乱码 下载链接&#xff1a;百度云永久链接 链接&#xff1a;https://pan.baidu.co…
阅读更多...
D9741——用于也收路像机和笔记本电的等设备上的直流转换器。在便携式的仪器设备上。低电压输入时误操作保护电路， 定时闩锁、短路保护电路等功能

D9741——用于也收路像机和笔记本电的等设备上的直流转换器。在便携式的仪器设备上。低电压输入时误操作保护电路， 定时闩锁、短路保护电路等功能

D9741是一块脉宽调制方三用于也收路像机和笔记本电的等设备上的直流转换器。在便携式的仪器设备上。 主要特点: 高精度基准电路 定时门锁、短路保护电路 低电压输入时误操作保护电路 输出基准电压(2.5V 超过工作范围能进行自动校正 封装形式: SOP16 应用: 电视摄像机 笔记本电…
阅读更多...
5个顶级开源法学硕士大型语言模型 (LLM)

5个顶级开源法学硕士大型语言模型 (LLM)

5个顶级开源法学硕士大型语言模型 (LLM)。 在快速发展的人工智能 (AI) 世界中&#xff0c;大型语言模型 (LLM) 已成为推动创新并重塑我们与技术交互方式的基石。 随着这些模型变得越来越复杂&#xff0c;人们越来越重视对它们的访问的民主化。 尤其是开源模型&#xff0c;在这…
阅读更多...
算法面试八股文『 模型详解篇 』

算法面试八股文『 模型详解篇 』

说在前面 这是本系列的第二篇博客&#xff0c;主要是整理了一些经典模型的原理和结构&#xff0c;面试有时候也会问到这些模型的细节&#xff0c;因此都是需要十分熟悉的。光看原理还不够&#xff0c;最好是能用代码试着复现&#xff0c;可以看看李沐老师深度学习的教材&#…
阅读更多...
线程池：优化多线程管理的利器

线程池：优化多线程管理的利器

引言 同步和异步想必各位都有了解&#xff0c;同步简单来说就是一件事做完再去做下一件&#xff1b;异步则是不用等一件事做完&#xff0c;就可以去做另一件事&#xff0c;当一件事完成后可以收到对应的通知&#xff1b;异步一般应用于一些耗时较长的操作&#xff0c;比如大型…
阅读更多...
量子计算：数据安全难题

量子计算：数据安全难题

当今数字技术面临的最大挑战之一是安全系统和数据。为此&#xff0c;人们设计了复杂的算法来加密数据并通过称为对称加密的框架来保护数据。虽然这已被证明是成功的&#xff0c;但量子计算的进步&#xff08;利用量子力学比传统计算机更快地解决复杂问题&#xff09;可能会彻底…
阅读更多...
Flink的单元测试介绍及示例

Flink的单元测试介绍及示例

本文详细的介绍了Flink的单元测试&#xff0c;分为有状态、无状态以及作业的测试&#xff0c;特别是针对无状态的单元测试给出了常见的使用示例。 本文除了maven依赖外&#xff0c;没有其他依赖。 一、Flink测试概述 Apache Flink 同样提供了在测试金字塔的多个级别上测试应用程…
阅读更多...
离谱，华为食堂也要搞末位淘汰

离谱，华为食堂也要搞末位淘汰

华为饭堂 末位淘汰 今天逛职场 App&#xff0c;无意间翻到一篇帖子&#xff1a; 点开图片之前&#xff0c;我还以为只是普通的争霸赛被网友解读为末位淘汰。 点开图片后我却发现 ... 可以看出&#xff0c;是深圳华为的行政部做的海报&#xff0c;里面清晰写到&#xff1a;员工的…
阅读更多...
QT-地形3D

QT-地形3D

QT-地形3D 一、 演示效果二、关键程序三、下载链接 一、 演示效果 二、关键程序 #include "ShaderProgram.h"namespace t3d::core {void ShaderProgram::init() {initializeOpenGLFunctions();loadShaders(); }void ShaderProgram::addShader(const QString &fil…
阅读更多...
如何使用Docker搭建YesPlayMusic网易云音乐播放器并发布至公网访问

如何使用Docker搭建YesPlayMusic网易云音乐播放器并发布至公网访问

文章目录 1. 安装Docker2. 本地安装部署YesPlayMusic3. 安装cpolar内网穿透4. 固定YesPlayMusic公网地址 本篇文章讲解如何使用Docker搭建YesPlayMusic网易云音乐播放器&#xff0c;并且结合cpolar内网穿透实现公网访问音乐播放器。 YesPlayMusic是一款优秀的个人音乐播放器&am…
阅读更多...
JS逆向进阶篇【去哪儿旅行登录】【中篇-滑动轨迹破解补浏览器环境破参数】

JS逆向进阶篇【去哪儿旅行登录】【中篇-滑动轨迹破解补浏览器环境破参数】

目录&#xff1a; 每篇前言&#xff1a;0、整体分析1、逆向轨迹snapshot&#xff08;1&#xff09;分析&#xff1a;&#xff08;2&#xff09;Python轨迹生成&#xff1a;&#xff08;3&#xff09;AES加密&#xff1a;&#xff08;4&#xff09;轨迹加密&#xff1a;&#xf…
阅读更多...
springcloud：1.Eureka详细讲解

springcloud：1.Eureka详细讲解

Eureka 是 Netflix 开源的一个服务注册和发现工具，被广泛应用于微服务架构中。作为微服务架构中的核心组件之一，Eureka 提供了服务注册、发现和失效剔除等功能，帮助构建弹性、高可用的分布式系统。在现代软件开发领域，使用 Eureka 可以有效地管理和监控服务实例，实现服务之…
阅读更多...
Qt Creator在#include第三方库不带.h后缀的文件时，没有智能提示和自动补全

Qt Creator在#include第三方库不带.h后缀的文件时，没有智能提示和自动补全

1、问题截图 OSG文件目录下有很多头文件&#xff08;均不带.h后缀&#xff09;&#xff0c;Qt Creator可以识别到OSG目录&#xff0c;但是OSG目录下的所有头文件识别不到 2、原因 找到原因是因为Qt Creator开启了ClanCodeModel插件导致的 3、解决方法 1、在Qt Creator中…
阅读更多...
GenAI的“关键一跃”：推理与知识

GenAI的“关键一跃”：推理与知识

当前的人工智能领域正通过生成式人工智能&#xff08;GenAI&#xff09;经历一场重大转变。这一转变不仅代表了技术上的飞跃&#xff0c;更标志着人工智能领域的范式转变&#xff0c;引发了有关GenAI的独特特性及其深远影响的关键问题讨论。 植根于计算革命的丰富历史&#xff…
阅读更多...
OpenCV人脸检测案例实战

OpenCV人脸检测案例实战

人脸检测是一种计算机视觉技术&#xff0c;旨在识别图像或视频中的人脸。这项技术的基本内容包括使用特定的算法和模型来定位和识别人脸&#xff0c;通常涉及在图像中寻找面部特征&#xff0c;如眼睛、鼻子、嘴巴等&#xff0c;以便准确地确定人脸的位置和边界。人脸检测技术的…
阅读更多...
LeetCode JS专栏刷题笔记（一）

LeetCode JS专栏刷题笔记（一）

一、前言 LeetCode 在前不久出了一个 JavaScript 专栏&#xff0c;这个专栏一个目的是为了非前端工程师学习 JS&#xff0c;另一个是为了前端工程师提升 JS 能力。 因此在这个专栏中&#xff0c;基本不涉及什么具体算法问题&#xff0c;都是一些 JS 的入门语法与常见的 JS 面…
阅读更多...
安卓游戏开发之图形渲染技术优劣分析

安卓游戏开发之图形渲染技术优劣分析

一、引言 随着移动设备的普及和性能的提升&#xff0c;安卓游戏开发已经成为一个热门领域。在安卓游戏开发中&#xff0c;图形渲染技术是关键的一环。本文将对安卓游戏开发中常用的图形渲染技术进行分析&#xff0c;比较它们的优劣&#xff0c;并探讨它们在不同应用场景下的适用…
阅读更多...
从零开始：开发多商户商城APP的技术指南

从零开始：开发多商户商城APP的技术指南

当下&#xff0c;电子商务正在飞速发展&#xff0c;多商户商城APP的需求也与日俱增。本篇文章&#xff0c;小编将为大家深度详解如何开发多商户商城APP。 1.确定功能需求 在着手开发多商户商城APP之前&#xff0c;首先需要明确功能需求。这包括但不限于&#xff1a; -用户注…
阅读更多...
如何在CentOS安装SQL Server数据库并实现无公网ip环境远程连接

如何在CentOS安装SQL Server数据库并实现无公网ip环境远程连接

文章目录 前言1. 安装sql server2. 局域网测试连接3. 安装cpolar内网穿透4. 将sqlserver映射到公网5. 公网远程连接6.固定连接公网地址7.使用固定公网地址连接 前言 简单几步实现在Linux centos环境下安装部署sql server数据库&#xff0c;并结合cpolar内网穿透工具&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023