CSS3 Flexbox

news2024/11/6 9:41:52

Flex 是 Flexible Box 的缩写，意为弹性盒子布局。

  • CSS3中一种新的布局模式：W3C在2009年提出的一种布局方案，一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。其目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

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

  • 容器：采用Flex布局的元素(设置了元素的display:flex)，称为Flex容器（flex container），简称”容器”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis），默认水平方向为主轴
  • 项目：Flex容器中的子元素称为 Flex 项目（flex item），简称“项目”。项目的 float、clear和vertical-align属性将失效。

1. Flex容器有如下属性：

  • flex-direction：设置容器的主轴方向，即项目的排列方向

  • flex-wrap：设置当项目超出容器时是否换行

  • flex-flow：flex-direction 和 flex-wrap 两个属性的简写

  • justify-content：设置项目在主轴（横轴）方向上的对齐方式

  • align-items：设置项目在交叉轴（纵轴）方向上的对齐方式

  • align-content：设置容器内多行在交叉轴上的排列方式

    注：这几个属性的可选值都还有两个值，initial 和 inherit。initial 表示将此属性设置为属性的默认值，inherit 表示从父元素继承属性的值，此文对这两个可选值省略不表。

1.1 flex-direction 属性设置容器的主轴方向，其属性可选值如下：

row      默认值，主轴沿水平方向从左到右
row-reverse主轴沿水平方向从右到左
column主轴沿垂直方向从上到下
column-reverse主轴沿垂直方向从下到上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.row-container,
			.row-reverse-container,
			.column-container,
			.column-reverse-container
			{
				display: flex;
				background-color: aqua;
			}
			
			.row-container{
				flex-direction:row;
			}
			
			.row-reverse-container{
				flex-direction:row-reverse;
			}
			
			.column-container{
				flex-direction:column;
			}
			
			.column-reverse-container
			{
				flex-direction:column-reverse;
			}
			
			.row-container div,
			.row-reverse-container div,
			.column-container div,
			.column-reverse-container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="row-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="row-reverse-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="column-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="column-reverse-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
	</body>
</html>

1.2 flex-wrap：设置当项目超出容器时是否换行，其属性可选值如下：

nowrap默认值，项目不会换行，但项目宽度会都等比例缩短，达不到设定的宽度
wrap项目会换行，项目宽度不变
wrap-reverse项目会换行，但会以相反的顺序，项目宽度不变

        注：主轴是横轴或纵轴都是如此

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.nowrap-container,
			.wrap-container,
			.wrap-reverse-container
			{
				display: flex;
				background-color: aqua;
				flex-direction:row;
			}
			
			.nowrap-container{
				flex-wrap:nowrap;
			}
			
			.wrap-container{
				flex-wrap:wrap;
			}
			
			.wrap-reverse-container{
				flex-wrap:wrap-reverse;
			}
			
			
			.nowrap-container div,
			.wrap-container div,
			.wrap-reverse-container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="nowrap-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="wrap-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="wrap-reverse-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		
	</body>
</html>

1.3 flex-flow：flex-direction 和 flex-wrap 两个属性的简写

                如：flex-flow:column wrap

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.container
			{
				height: 80px;
				display: flex;
				background-color: aqua;
				flex-flow:column wrap;
			}
			
			
			.container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
	</body>
</html>

 

1.4 justify-content：设置项目在主轴（横轴）方向上的对齐方式，其属性可选值如下：

flex-start默认值，左对齐
flex-end右对齐
center居中
space-between两端对齐，项目之间的间隔是相等的
space-around每个项目两侧的间隔相等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.content-start-container,
			.content-end-container,
			.content-center-container,
			.content-space-between-container,
			.content-space-around-container
			{
				display: flex;
				background-color: aqua;
				flex-direction:row;
				margin-top: 10px;
			}
			
			.content-start-container{
				justify-content: flex-start;
			}
			
			.content-end-container{
				justify-content: flex-end;
			}
			
			.content-center-container{
				justify-content: center;
			}
			
			.content-space-between-container{
				justify-content: space-between;
			}
			
			.content-space-around-container{
				justify-content: space-around;
			}
			
			
			.content-start-container div,
			.content-end-container div,
			.content-center-container div,
			.content-space-between-container div,
			.content-space-around-container div
			{
				width: 80px;
				height: 20px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
		</style>
	</head>
	<body>
		
		<div class="content-start-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-end-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-center-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-space-between-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="content-space-around-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
	</body>
</html>

1.5 align-items：设置项目在交叉轴（纵轴）方向上的对齐方式，其属性可选值如下：

stretch默认值，项目将被拉伸以适合容器(当项目不设置高度时)
center项目于容器中央对齐(当项目高度一致时对齐，项目高度不一致时，项目垂直居中)
flex-start项目位容器顶部对齐
flex-end项目于容器的底部对齐
baseline项目与容器的基线对齐
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.items-stretch-container,
			.items-center-container,
			.items-start-container,
			.items-end-container,
			.items-baseline-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
				height: 80px;
			}
			
			.items-stretch-container{
				align-items: stretch;
			}
			
			.items-center-container{
				align-items: center;
			}
			
			.items-start-container{
				align-items: flex-start;
			}
			
			.items-end-container{
				align-items: flex-end;
			}
			
			.items-baseline-container{
				align-items: baseline;
			}
			
			
			.items-stretch-container div,
			.items-center-container div,
			.items-start-container div,
			.items-end-container div,
			.items-baseline-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="items-stretch-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		
		<div class="items-center-container">
			<div style="height: 20px;">1</div>
			<div style="height: 30px;">2</div>
			<div style="height: 40px;">3</div>
			<div style="height: 50px;">4</div>
		</div>
		
		<div class="items-start-container">
			<div style="height: 20px;">1</div>
			<div style="height: 30px;">2</div>
			<div style="height: 40px;">3</div>
			<div style="height: 50px;">4</div>
		</div>
		
		<div class="items-end-container">
			<div style="height: 20px;">1</div>
			<div style="height: 30px;">2</div>
			<div style="height: 40px;">3</div>
			<div style="height: 50px;">4</div>
		</div>
		
		<div class="items-baseline-container">
			<div style="height: 20px;font-size: 20px;">1</div>
			<div style="height: 30px;font-size: 5px;">2</div>
			<div style="height: 40px;font-size: 30px;">3</div>
			<div style="height: 50px;font-size: 10px;">4</div>
		</div>
		
	</body>
</html>

        

1.6 align-content：设置项目多跟轴线的对齐方式，其属性可选值如下：

注：容器内必须有多行的项目，该属性才能渲染出效果。

stretch

默认值。元素被拉伸以适应容器。

各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。注：项目没有高度时才会占满整个交叉轴 。有高度时将是高度大小（则项目之间会有间隔）

center项目在容器内居中排布
flex-start项目在容器的顶部排列，各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行
flex-end项目在容器的底部排列，各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.align-stretch-container,
			.align-center-container,
			.align-start-container,
			.align-end-container,
			.align-space-between-container,
			.align-space-around-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
				height: 120px;
				flex-flow: row wrap;
			}
			
			.align-stretch-container{
				align-content: stretch;
			}
			
			.align-center-container{
				align-content: center;
			}
			
			.align-start-container{
				align-content: flex-start;
			}
			
			.align-end-container{
				align-content: flex-end;
			}
			
			.align-space-between-container{
				align-content: space-between;
			}
			
			.align-space-around-container{
				align-content: space-around;
			}
			
			
			.align-stretch-container div,
			.align-center-container div,
			.align-start-container div,
			.align-end-container div,
			.align-space-between-container div,
			.align-space-around-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="align-stretch-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-center-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-start-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-end-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-space-between-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
		<div class="align-space-around-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		
	</body>
</html>

        

2. Flex容器内项目有如下属性：

  • order：设置项目的排序顺序

  • flex-grow：设置项目相对于其他项目的增长量(如果容器还有多余空间)，也可以说是定义项目的放大比例，默认值为 0(即如果存在多余空间也不放大)

  • flex-shrink：设置项目相对于其他项目的收缩量(如果容器空间不够)，也可以说是定义项目的缩小比例，默认值为 1(一起按比例缩小)

  • flex-basic：设置项目的初始长度

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

  • align-self：为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值

   2.1 order：设置项目的排序顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.flex-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
			}
			
			
			.flex-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="flex-container">
			<div style="order: 1;">1</div>
			<div style="order: 4;">2</div>
			<div style="order: 2;">3</div>
			<div style="order: 3;">4</div>
		</div>
		
		
	</body>
</html>

  2.2 flex-grow：设置项目相对于其他项目的增长量(如果容器还有多余空间)，也可以说是定义项目的放大比例，默认值为 0(即如果存在多余空间也不放大)，当容器没有多余空间时，该属性失效

 当容器有剩余空间时：将所有flex-grow的取值相加得到分母sum，每个属性的数值作为分子，然后乘以剩余空间，即是项目要扩展的空间，再加上项目本来的空间即是项目所占的总空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.flex-container
			{
				display: flex;
				background-color: aqua;
				margin-top: 10px;
			}
			
			.flex-container div
			{
				width: 80px;
				padding: 3px;
				border: 1px solid #CCC;
				margin: 5px;
				background-color: aliceblue;
			} 
			
		</style>
	</head>
	<body>
		
		<div class="flex-container">
			<div style="flex-grow: 1;">1</div>
			<div style="flex-grow: 3;">2</div>
			<div style="flex-grow: 2;">3</div>
			<div style="flex-grow: 0;">4</div>
		</div>
		
		
	</body>
</html>

 

2.3 flex-shrink：设置项目相对于其他项目的收缩量(如果容器空间不够)，也可以说是定义项目的缩小比例，默认值为 1(一起按比例缩小)，计算公式和 flex-grow 放大公式类似

 

2.4 flex-basic：设置项目的初始长度，默认值 auto，即项目本来的长度

2.5 flex：属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

语法格式为：flex: flex-grow flex-shrink flex-basis。

默认值为0 1 auto。后两个属性可选，两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

         我们更常用到 flex 属性的用法是只有 flex-grow 一个参数的值，flex:1 或者 flex:2 等等，相当于 flex:1 1 0 或者 flex:2 1 0，表示项目在 flex-basic 为 0 的基础上伸缩。其等效效果为 各项目长度占容器长度 flex:? 的取值的比例。

 

 2.6 align-self：为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

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

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

相关文章

回收站不见了？正确的2个操作方法！

回收站不见了？正确的2个操作方法！

大家有没有遇到回收站不见了的情况啊&#xff1f;真的很崩溃&#xff0c;我误删了一个比较重要的文件&#xff0c;想在回收站中把它还原&#xff0c;才发现我的回收站不见了&#xff01;这可咋整啊&#xff1f; 回收站是电脑操作系统中一个比较重要的功能&#xff0c;它可以帮助…
阅读更多...
Ceph简介和特性

Ceph简介和特性

Ceph是一个多版本存储系统&#xff0c;它把每一个待管理的数据流(例如一个文件) 切分为一到多个固定大小的对象数据&#xff0c;并以其为原子单元完成数据存取。 对象数据的底层存储服务是由多个主机 (host) 组成的存储集群&#xff0c;该集群也被称之为 RADOS (ReliableAutoma…
阅读更多...
DS18B20的原理及实例代码(51单片机、STM32单片机)

DS18B20的原理及实例代码(51单片机、STM32单片机)

一、DS18B20介绍 DS18B20数字温度传感器是DALLAS公司生产的单总线器件&#xff0c;用它来组成一个测温系统具有线路简单&#xff0c;体积小&#xff0c;在一根通信线上可以挂很多这样的数字温度传感器&#xff0c;十分方便。 温度传感器种类众多&#xff0c;应用在高精度、高可…
阅读更多...
快排、二路归并疑难杂症

快排、二路归并疑难杂症

蒟蒻小♥复习机试&#xff0c;记录一些疑点和注意点。 细节见代码注释 快排 快排中的边界条件判断需保证i<j&#xff0c;即满足label基准左边的数均小于右边的数。<的判断可能让子问题求解陷入死循环。 #include <iostream> #include <stdio.h> #include …
阅读更多...
C++笔记之STL的sort使用第三个参数来自定义排序

C++笔记之STL的sort使用第三个参数来自定义排序

C笔记之STL的sort使用第三个参数来自定义排序 code review! 文章目录 C笔记之STL的sort使用第三个参数来自定义排序1.方法一&#xff1a;使用比较函数(其实是使用函数指针)作为std::sort()的第三个参数来排序2.方法二&#xff1a;使用lambda表达式作为std::sort()的第三个参数…
阅读更多...
IO进程线程day1（2023.7.25）

IO进程线程day1（2023.7.25）

一、Xmind整理&#xff1a; 什么是IO&#xff1a; 文件IO函数与标准IO函数&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;标准IO函数的简单示例 scanf: if(OS Linux) {去调用Linux的文件IOread(); } else if(OS windows) {去调用windows的文件IOfread(); …
阅读更多...
垃圾回收回收阶段算法

垃圾回收回收阶段算法

当成功区分出垃圾的对象和存活的对象后&#xff0c;下面就是要开始回收了&#xff0c;目前在JVM中的垃圾回收阶段的算法有三种&#xff1a;标记——复制算法、标记——清除算法、标记——压缩算法。 1.标记——复制算法 将可用内存按照容量分为大小相等的两块&#xff0c;每次…
阅读更多...
国标GB28181视频监控平台EasyGBS视频无法播放，抓包返回ICMP是什么原因？

国标GB28181视频监控平台EasyGBS视频无法播放，抓包返回ICMP是什么原因？

国标GB28181视频平台EasyGBS是基于国标GB/T28181协议的行业内安防视频流媒体能力平台&#xff0c;可实现的视频功能包括&#xff1a;实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。国标GB28181视频监控平台部署简单、可拓展性强&#xff0c;支持将…
阅读更多...
【软件测试】webdriver常用API演示（Java+IDEA+chrome浏览器）

【软件测试】webdriver常用API演示（Java+IDEA+chrome浏览器）

1.元素定位方法 对象的定位应该是自动化测试的核心&#xff0c;要想操作一个对象&#xff0c;首先应该识别这个对象。一个对象就是一个人一样&#xff0c;他会有各种的特征&#xff08;属性&#xff09;&#xff0c;如比我们可以通过一个人的身份证号&#xff0c;姓名&#xf…
阅读更多...
centos（linux）手动配置ip地址

centos（linux）手动配置ip地址

查看系统 查看ip 进入网卡配置的目录 [root178-119-30-16 ~]# cd /etc/sysconfig/network-scripts/ [root178-119-30-16 network-scripts]# ls ifcfg-ens192 ifdown ifdown-ippp ifdown-post ifdown-sit ifdown-tunnel ifup-bnep ifup-ipv6 ifup-plus…
阅读更多...
C#代码实现状态机

C#代码实现状态机

状态机四要素 现态、条件、动作、次态 现态&#xff1a;是指当前所处的状态 条件&#xff1a;又称为“事件”&#xff0c;当一个条件被满足&#xff0c;将会触发一个动作&#xff0c;或者执行一次状态转移。 动作&#xff1a;条件满足后执行的动作。动作执行完毕后&#xff0…
阅读更多...
JavaScript |（一）JavaScript简介及基本语法 | 尚硅谷JavaScript基础实战

JavaScript |（一）JavaScript简介及基本语法 | 尚硅谷JavaScript基础实战

学习来源&#xff1a;尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 &#x1f4da;JavaScript简介&#x1f407; 实现&#x1f407;JavaScript的特点 &#x1f4da;基本知识&#x1f407;编写位置&#x1f525;方式一&#xff1a;在标签中写&#xff08;不推…
阅读更多...
常见Vue Admin对比

常见Vue Admin对比

作者&#xff1a;felix 个人博客 常见Vue Admin对比 Vue element admin - 老牌 admin 后台管理 求稳首选Antd Pro Vue - 背靠阿里&#xff0c;代码过硬&#xff0c;大型项目首选Vue vben admin - 宝藏后台管理 基于 Vue3 UI清新 功能扎实iView Admin - 老牌 admin 代码工程化 …
阅读更多...
【【51单片机的AT24C02】】

【【51单片机的AT24C02】】

51单片机的AT24C02 AT24C02 先介绍一下存储器的知识 这里的重点肯定是I2C总线 存储器 分为2种 一种是易失性存储器RAM 还有一种是非易失性存储器ROM RAM分为 SRAM 和 DRAM Mask ROM PROM EPROM E2PROM 这几个是一个家族的 从创建之后 不能修改 然后 只能写一次 再而发展成可擦…
阅读更多...
数字孪生融合 GIS 系统将为交通领域带来哪些改变？

数字孪生融合 GIS 系统将为交通领域带来哪些改变？

随着科技的不断发展&#xff0c;数字孪生和 GIS 技术正成为交通领域的新宠。数字孪生是指通过数学建模、数据采集和实时仿真等技术手段&#xff0c;将实体世界与数字世界相互关联&#xff0c;形成一个全新的虚拟系统。而 GIS&#xff08;地理信息系统&#xff09;则是将空间数据…
阅读更多...
1_Apollo4BlueLite芯片简介

1_Apollo4BlueLite芯片简介

1. 概述 Apollo4BlueLite是美国芯片制造公司Ambiq推出的一款超低功耗蓝牙SoC芯片。下面是关于Apollo4BlueLite芯片的概况介绍&#xff1a; &#xff08;1&#xff09;高性能&#xff1a;Apollo4BlueLite芯片具有较高的处理能力和性能表现。它采用了Arm Cortex-M4F处理器&#…
阅读更多...
MySQL基础（二）SQL语句

MySQL基础（二）SQL语句

目录 前言 一、SQL语句类型 二、数据库操作 查看 创建 进入 删除 更改 三、数据表操作 &#xff08;一&#xff09;、数据类型 1.数值类型 2.时间\日期类型 3.字符串类型 4.二进制类型 &#xff08;二&#xff09;、查看 1.查看表内的数据 2.查看表格的属性 &…
阅读更多...
为什么 Splashtop 比 Apple Remote Desktop 更好用

为什么 Splashtop 比 Apple Remote Desktop 更好用

Mac 电脑每年销量高达2000万台&#xff0c;可见在个人和专业计算领域 Mac 都越来越受欢迎。同样&#xff0c;由于人们在访问计算机的时间和地点方面需要更多灵活性&#xff0c;远程桌面软件的使用量也不断增长。 这就是为什么 Mac 原生应用 Apple Remote Desktop 深受苹果产品…
阅读更多...
stm32通过ESP8266接入原子云

stm32通过ESP8266接入原子云

1. ESP8266模块需要烧录原子云固件&#xff0c;此原子云固件和正常的ESP8266固件相比添加了ATATKCLDSTA 和 ATATKCLDCLS 这两条指令&#xff1a; 2. 原子云账号注册及设备建立 设备管理-新增设备-ESP8266 新建设备后新建分组&#xff0c;将设备加入到此分组中&#xff1a; 至此…
阅读更多...
Android 之 Canvas API 详解 (Part 1)

Android 之 Canvas API 详解 (Part 1)

本节引言&#xff1a; 前面我们花了13小节详细地讲解了Android中Paint类大部分常用的API&#xff0c;本节开始我们来讲解 Canvas(画板)的一些常用API&#xff0c;我们在 8.3.1 三个绘图工具类详解中已经列出了我们可供调用的一些方法&#xff0c;我们分下类&#xff1a; drawX…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023