当前位置: 首页 > news >正文

【CSS 布局】水平垂直居中

CSS 布局-水平垂直居中

一、水平居中

创建一个父盒子,和子盒子


<div class="parent"><div class="child"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}

1.使用 text-aligin 屬性

若元素为行内块级元素,也就是 display: inline-block 的元素,可以通过为其父元素设置text-align: center 实现水平居中。

<!-- 1. 使用 text-aligin 屬性 ,子元素行内块元素 display:inline-block; -->
<div class="parent text-align-center"><div class="child display-inline-block"></div>
</div>

css样式如下

/* 	 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中*/
.text-align-center {text-align: center;
}.display-inline-block {display: inline-block;
}

2.margin:0 auto;

定宽块级元素水平居中:若元素为定宽的的子级块级元素,设置宽度,最简单的一种方式就是 margin: 0 auto;

<!-- 2.定宽块级元素水平居中: 设置宽度,设置margin:0 auto; -->
<div class="parent "><div class="child margin-0-auto"></div>
</div>

css样式如下

/* 对于定宽的子元素,直接 margin:0 auto; 即可实现水平居中 */
.margin-0-auto {margin: 0 auto;
}

3.定位 : relative + left:50% + margin-left: 负宽度的一半;

定宽块级元素水平居中:对于开启定位的元素,可以通过 left 属性 和 margin 实现。 子元素开启相对定位 position:relative; 设置left:50%;属性,设置 margin-left: 负宽度的一半;

<!-- 3.定宽块级元素水平居中:开启相对定位 paosition:relative; 设置left:50%属性,设置margin-left: 负宽度的一半; -->
<div class="parent  "><div class="child child-relative"></div>
</div>

css基本样式如下

/* 对于定宽的子元素,开启定位relative , margin-left 为 负的宽度的一半*/
.child-relative {position: relative;left: 50%;margin-left: -50px;
}

4.定位 :父相子绝 + magin:auto

定宽块级元素水平居中:对于开启开启绝对定位或者固定定位的元素, left 属性和 right 属性一起设置就会拉伸元素的宽度,在配合 width 属性与 margin 属性就可以实现水平居中。

(1)开启定位 父相子绝;

(2)水平拉满屏幕,子元素设置left:0;right:0;

(3)拉满屏幕之后设置宽度,设置width宽度

(4)最后通过 margin 实现水平居中 :margin: auto;

<!-- 4.定宽块级元素水平居中:开启定位 父相子绝 ,子元素设置left:0;right:0;设置width宽度,margin:auto; -->
<div class="parent h100 parent-relative"><div class="child child-absolute child-left-0-right-0"></div>
</div>

css样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}/* 子绝父相 */
.parent-relative {position: relative;
}.h100 {height: 100px;
}/* 父相子绝 */
.child-absolute {position: absolute;
}/* 当元素开启绝对定位或者固定定位时,
left 属性和 right 属性一起设置就会拉伸元素的宽度,left: 0;right: 0;
在配合 width 属性与 margin 属性就可以实现水平居中。 */
.child-left-0-right-0 {left: 0;right: 0;margin: auto;
}

5.定位 :父相子绝 + left:50% + transform: translateX(-50%);

定宽块级元素水平居中:对于开启开启绝对定位或者固定定位的元素, left 属性和 transform 属性即可实现水平居中。

(1) 开启定位 父相子绝

(2)子元素设置left:50%属性;

(3)transform: translateX(-50%);

类似于 left 和 -margin 的用法,但是该方法不需要手动计算宽度。

<!-- 5.定宽块级元素水平居中:开启定位 父相子绝 ,子元素设置left:50%属性;transform: translateX(-50%); -->
<div class="parent h100 parent-relative"><div class="child child-absolute child-transform-x"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}/* 子绝父相 */
.parent-relative {position: relative;
}.h100 {height: 100px;
}/* 父相子绝 */
.child-absolute {position: absolute;}/* 该方法类似于 left 于 -margin 的用法,但是该方法不需要手动计算宽度。 */
.child-transform-x {left: 50%;transform: translateX(-50%);
}

6.Flex 布局 + justify-content :center

  1. 开启 Flex 布局 ,父元素通过 justify-content 属性实现居中
  2. 开启 Flex 布局,子元素设置margin:auto;
<!-- 6.定宽块级元素水平居中:开启 Flex 布局  ,父元素通过 justify-content 属性实现居中;或者 子元素设置margin:auto; -->
<div class="parent parent-flex parent-justify-content-center"><div class="child "></div>
</div><div class="parent parent-flex "><div class="child child-margin-auto"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}/* 开启flex布局 ,设置justify-content:center;居中 */.parent-flex {display: flex;
}.parent-justify-content-center {justify-content: center;}.child-margin-auto {margin: auto;
}

7.Grid 布局 + justify-items / justify-content / margin:auto;

通过Grid实现居中布局:

  1. 父元素开启 Grid 布局 display: grid;

    方法一 : justify-items: center;

    方法二 : justify-content: center;

  2. 父元素开启 Grid 布局 display: grid;子元素设置margin: auto;

<!-- 7.定宽块级元素水平居中:开启 Grid  布局  ,父元素通过 justify-items: center;属性实现居中;或者 父元素通过  justify-content: center;属性实现居中;或者 子元素设置margin:auto; -->
<div class="parent parent-grid parent-justify-content-center"><div class="child "></div>
</div><div class="parent parent-grid parent-justify-items-center"><div class="child "></div>
</div><div class="parent parent-grid "><div class="child child-margin-auto"></div>
</div>

基本样式如下

.parent {background-color: #fff;
}.child {background-color: #999;width: 100px;height: 100px;
}.child-margin-auto {margin: auto;
}/* grid 布局 */
.parent-grid {display: grid;
}.parent-justify-items-center {justify-items: center;
}

二、垂直居中

创建一个父盒子,和子盒子


<div class="parent"><div class="child"></div>
</div>

公共的 CSS 代码如下

.parent {height: 50px;width: 50px;margin: 0 auto;background-color: #ccc;
}.child {width: 50px;height: 10px;background-color: aliceblue;
}

1.display: inline-block, vertical-align: middle

设置子元素为行内块级元素, display: inline-block, vertical-align: middle;并让父元素行高等同于高度。

<!-- 1. 行内块元素垂直居中 -->
<div class="parent lh50"><div class="child display-inline-block-middle"></div>
</div>

基本样式如下

/* 为父级容器设置行高 */
.lh50 {line-height: 50px;
}.display-inline-block-middle {/* 将子级元素设置为 inline-block 元素 */display: inline-block;/* 通过 vertical-align: middle; 实现居中 */vertical-align: middle;
}

2.定位: 子绝父相+top:50% ;margin-top:负高度的一半

设置通过定位的方式:为父级容器开启相对定位position: relative;,子元素开启绝对定位position: absolute;通过top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。

<!-- 2. 定位方式实现 top:50% ;margin:负高度的一半-->
<div class="parent mt5 parent-position-relative"><div class="child child-position-absolute child-top-50-margin-top"></div>
</div>

css样式如下

/* 为父级容器开启相对定位 */
.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-50-margin-top {top: 50%;/* margin-top: 等于负高度的一半 */margin-top: -5px;
}

3.定位: 子绝父相 + top/bottom:0 + margin: auto

设置通过定位的方式:为父级容器开启相对定位position: relative;,子元素开启绝对定位position: absolute; top 和 bottom 将子元素拉伸至100%,设置指定的高度,通过margin:
auto;即可实现垂直居中。

<!-- 3. 定位方式实现 top:0 ;bottom:0; margin:auto;-->
<div class="parent mt5 parent-position-relative"><div class="child child-position-absolute  child-top-0-bottom-0 child-margin-auto"></div>
</div>

css样式如下

/* 为父级容器开启相对定位 */
.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-0-bottom-0 {top: 0;bottom: 0;
}.child-margin-auto {margin: auto;
}

4.定位: 子绝父相 + top + transform

设置通过定位的方式:为父级容器开启相对定位position: relative;,子元素开启绝对定位position: absolute; 使用 top 配合 transform 属性:top: 50%; transform:
translateY(-50%);

<!-- 3. 定位方式实现 top:0 ;bottom:0; margin:auto;-->
<div class="parent mt5 parent-position-relative"><div class="child child-position-absolute  child-top-0-bottom-0 child-margin-auto"></div>
</div>

css样式如下

/* 为父级容器开启相对定位 */
.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-50 {top: 50%;
}.child-transform-y {transform: translateY(-50%);
}

5.flex布局 + align-items:center

通过 Flex 可以有很多方式实现这个垂直居中布局。 方法一 : flex布局 flex + 父元素 align-items:center; 方法二 : flex布局 flex + 子元素 margin:auto;

<!-- 方法一 : flex布局 flex ,父元素 align-items:center;-->
<div class="parent mt5 parent-flex align-items-center"><div class="child "></div>
</div><!-- 方法二 : flex布局 flex + 子元素 margin:auto-->
<div class="parent mt5 parent-flex "><div class="child child-margin-auto"></div>
</div>

css样式如下

.parent-flex {display: flex;
}.align-items-center {align-items: center;
}.child-margin-auto {margin: auto;
}

6.grid布局 + align-items:center

通过 Grid 可以有很多方式实现这个垂直居中布局。 方法一 : grid布局 grid + 父元素 align-items:center; 方法二 : grid布局 grid + 父元素 align-center:center;
方法三 : grid布局 grid + 子元素 margin:auto; 方法四 : grid布局 grid + 子元素 align-self:center;


<!-- 5. grid布局 grid
父元素 align-items:center;
或父元素 align-center:center;
或 子元素 margin:auto--><!-- 方法一 : grid布局 grid + 父元素 align-items:center;-->
<div class="parent mt5 parent-grid align-items-center"><div class="child "></div></div><!-- 方法二 : grid布局 grid + 父元素 align-center:center;-->
<div class="parent mt5 parent-grid align-content-center"><div class="child "></div>
</div><!-- 方法三 : grid布局 grid + 子元素 margin:auto;-->
<div class="parent mt5 parent-grid "><div class="child child-margin-auto"></div>
</div><!-- 方法四 : grid布局 grid + 子元素 align-self:center;-->
<div class="parent mt5 parent-grid "><div class="child align-self-center"></div>
</div>

css样式如下


.parent-grid {display: grid;
}.align-content-center {align-content: center;
}.child-margin-auto {margin: auto;
}.align-self-center {align-self: center;
}

三、水平垂直居中

创建一个父盒子,和子盒子


<div class="parent"><div class="child"></div>
</div>

基本CSS样式如下

body {margin: 0;
}.parent {height: 50px;width: 50px;background-color: bisque;margin: 0 auto;
}.child {width: 20px;height: 20px;background-color: #ccc;
}

1.行内块元素: 行高 + vertical-align: middle + text-align: center

1.实现垂直居中: 子元素设置为行内块元素,父元素设置行高等于容器高度。 => vertical-align:middle;
2.实现水平居中: 子元素设置为行内块元素 => text-align:center;

<!-- 1. 行内块元素
(1)容器元素行高等于容器高度
(2)通过 text-align: center; 实现水平居中
(3)将子级元素设置为水平块级元素
(4)通过 vertical-align: middle; 实现垂直居中
-->
<div class="parent parent-line-height text-align-center"><div class="child child-display-inline-block vertical-align-middle"></div>
</div>

基本CSS样式如下

.child-display-inline-block {display: inline-block;
}.parent-line-height {line-height: 50px;
}.vertical-align-middle {vertical-align: middle;
}.text-align-center {text-align: center;
}

2.定位: 子绝父相 + 偏移量calc设置

1.设置父元素相对定位 position:relative;,子元素绝对定位 position:absolute;
2.设置偏移量:值为 50%减去宽度/高度的一半 => left:calc(50% - 宽度的一半) ; top:calc(50% - 高度的一半) :

<!-- 2. 定位 子绝父相 + 偏移量 calc 设置
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)设置该元素的偏移量,值为50% 减去宽度/高度的一半
-->
<div class="parent parent-position-relative"><div class="child child-position-absolute  child-left-calc-top-calc"></div>
</div>

基本CSS样式如下

.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-left-calc-top-calc {left: calc(50% - 10px);top: calc(50% - 10px);
}

3.定位: 子绝父相 + 偏移量 margin-left margin-top 设置

1.设置父元素相对定位 position:relative; 子元素绝对定位 position:absolute;
2.设置偏移量: left: 50%; top: 50%;
3.外边距-宽度/高度的一半将元素移动: margin-left:- 宽度的一半 ; margin-top: 高度的一半 ;

<!-- 3.定位 子绝父相 + 偏移量 margin-left margin-top 设置
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)设置该元素的偏移量,值为50%
(4)通过外边距-值的方式将元素移动回去
-->
<div class="parent parent-position-relative"><div class="child child-position-absolute child-left-50-top-50 child-margin-left-margin-top"></div>
</div>

基本CSS样式如下

.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-left-50-top-50 {left: 50%;top: 50%;
}.child-margin-left-margin-top {margin-left: -10px;margin-top: -10px;
}

4.定位: 子绝父相 + 将子元素拉满整个容器 + 设置margin :auto

1.设置父元素相对定位 position:relative;,子元素绝对定位 position:absolute;
2.将子元素拉满整个容器 => top: 0;left: 0;right: 0;bottom: 0;
3.设置 margin:auto 实现水平垂直居中

<!-- 4. 定位 子绝父相 + 将子元素拉满整个容器 + 设置margin :auto
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)将子元素拉满整个容器
(4)通过margin:auto实现水平垂直居中
-->
<div class="parent parent-position-relative"><div class="child child-position-absolute child-top-left-right-bottom-0 child-margin-auto"></div>
</div>

基本CSS样式如下

.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-top-left-right-bottom-0 {top: 0;left: 0;right: 0;bottom: 0;
}.child-margin-auto {margin: auto;
}

5.定位: 子绝父相 + 偏移量50% + 设置translate 反向偏移

1.设置父元素相对定位 position:relative;,子元素绝对定位 position:absolute;
2.设置该元素的偏移量,值为 50% => top: 50%;left: 50%;
3.通过translate反向偏移的方式,实现居中 => transform: translate(-50%, -50%);

<!-- 5. 定位 子绝父相 + 偏移量50%  + 设置translate 反向偏移
(1)使子元素相对于容器元素定位
(2)子元素开启绝对定位
(3)设置该元素的偏移量,值为50%
(4)通过 translate 反向偏移的方式,实现居中
-->
<div class="parent  parent-position-relative"><div class="child child-position-absolute child-left-50-top-50 transform-50-50"></div>
</div>

基本CSS样式如下

.parent-position-relative {position: relative;
}.child-position-absolute {position: absolute;
}.child-left-50-top-50 {left: 50%;top: 50%;
}.transform-50-50 {transform: translate(-50%, -50%);
}

6.Flex 布局 + justify-content:center ; align-items:center

(1)将元素设置为 Flex 布局
(2)通过 justify-content: center 以及 align-items: center 实现或者 margin: auto; 实现。

<!-- 6. flex 父元素flex布局,justify-content:center align-items:center-->
<div class="parent parent-display-flex justify-content-center align-items-center"><div class="child"></div>
</div><!-- 6. flex 父元素flex布局,子元素 margin:auto-->
<div class="parent parent-display-flex "><div class="child child-margin-auto"></div>
</div>

基本CSS样式如下

.parent-display-flex {display: flex;
}.justify-content-center {justify-content: center;
}.align-items-center {align-items: center;
}.child-margin-auto{margin: auto;
}

7.grid 布局 + items属性 / content属性 /self 属性 /margin:auto

元素设置为Grid 元素 display: grid;
(1) 通过 items 属性实现 : align-items: center;justify-items: center;
items 的缩写 : place-items: center;
(2)通过 content 属性 : align-content: center; justify-content: center;
content 的缩写 : place-content: center;
(3) margin auto 实现 : margin: auto;
(4)通过 self 属性 : align-self: center; justify-self: center;
self 的缩写 : place-self: center;


<!-- 7. grid 父元素items属性-->
<div class="parent parent-display-grid align-items-center justify-items-center"><div class="child"></div>
</div><!-- 7. grid 父元素content属性-->
<div class="parent parent-display-grid align-content-center justify-content-center"><div class="child"></div>
</div><!-- 7. grid  子元素margin auto属性-->
<div class="parent parent-display-grid"><div class="child child-margin-auto"></div>
</div><!-- 7. grid  子元素self 属性-->
<div class="parent parent-display-grid"><div class="child align-self-center justify-self-center"></div>
</div>

基本CSS样式如下

.justify-content-center {justify-content: center;
}.align-items-center {align-items: center;
}.parent-display-grid {display: grid;
}.justify-items-center {justify-items: center;
}.align-content-center {align-content: center;
}.justify-content-center {justify-content: center;
}.align-self-center {align-self: center;
}.justify-self-center {justify-self: center;
}.place-content-center {place-content: center;
}.place-self-center {place-self: center;
}

相关文章:

【CSS 布局】水平垂直居中

CSS 布局-水平垂直居中 一、水平居中 创建一个父盒子&#xff0c;和子盒子 <div class"parent"><div class"child"></div> </div>基本样式如下 .parent {background-color: #fff; }.child {background-color: #999;width: 100p…...

【C++】类和对象--类的6个默认成员函数

目录1.类的6个默认成员函数2.构造函数2.1概念2.2特性3.析构函数3.1概念3.2特性4.拷贝构造函数4.1概念4.2特征5.赋值运算符重载5.1运算符重载5.2赋值运算符重载5.3前置和后置重载5.4流插入和流提取运算符重载6.const成员7.取地址重载和const取地址操作符重载1.类的6个默认成员函…...

常见面试题---------如何处理MQ消息丢失的问题?

如何处理MQ消息丢失的问题? RabbitMQ丢失消息分为如下几种情况&#xff1a; 生产者丢消息&#xff1a; 生产者将数据发送到RabbitMQ的时候&#xff0c;可能在传输过程中因为网络等问题而将数据弄丢了。 RabbitMQ自己丢消息&#xff1a; 如果没有开启RabbitMQ的持久化&#x…...

十四、Linux网络:高级IO

目录 五种IO模型 同步IO 阻塞IO 非阻塞IO 信号驱动IO IO多路转接 异步IO...

带你走进API安全的知识海洋

Part1什么是API API&#xff08;Application Programming Interface&#xff0c;应用程序接口&#xff09;是一些预先定义的接口&#xff08;如函数、HTTP接口&#xff09;&#xff0c;或指软件系统不同组成部分衔接的约定。用来提供应用程序与开发人员基于某软件或硬件得以访…...

【Java】TCP的三次握手和四次挥手

三次握手 TCP三次握手是一个经典的面试题&#xff0c;它指的是TCP在传递数据之前需要进行三次交互才能正式建立连接&#xff0c;并进行数据传递。&#xff08;客户端主动发起的&#xff09;TCP之所以需要三次握手是因为TCP双方都是全双工的。 什么是全双工&#xff1f; TCP任何…...

JUC并发编程

1.什么是JUC java.util工具包、包、分类 业务&#xff1a;普通业务线程代码 Thread Runable: 没有返回值、效率相比Callable相对较低。 2.线程和进程 进程&#xff1a;一个程序&#xff0c;QQ.exe Music.exe 程序的集合 一个进程往往可以包含多个线程&#xff0c;至少包含一个…...

概率统计·假设检验【正态总体均值的假设检验、正态总体方差的假设检验】

均值假设检验定义 2类错误 第1类错误&#xff08;弃真&#xff09;&#xff1a;当原假设H0为真&#xff0c;观察值却落入拒绝域&#xff0c;因而拒 绝H0这类错误是“以真为假” 犯第一类错误的概率显著性水平α第2类错误&#xff08;取伪&#xff09;&#xff1a;当原假设H0不…...

如何预测机组设备健康状态?你可能需要这套解决方案

1. 应用场景随机振动[注1]会发生在工业物联网的各个场景中&#xff0c;包括产线机组设备的运行、运输设备的移动、试验仪器的运行等等。通过分析采集到的振动信号可以预估设备的疲劳年限、及时知晓设备已发生的异常以及预测未来仪器可能发生的异常等等。本篇教程会提供给有该方…...

C++类和对象:面向对象编程的核心。| 面向对象还编什么程啊,活该你是单身狗。

&#x1f451;专栏内容&#xff1a;C学习笔记⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;日拱一卒&#xff0c;功不唐捐 文章目录一、前言二、面向对象编程三、类和对象1、类的引入2、类的定义Ⅰ、声明和定义在一起Ⅱ、声明和定义分开Ⅲ、成员变量命…...

CUDA虚拟内存管理

CUDA中的虚拟内存管理 文章目录CUDA中的虚拟内存管理1. Introduction2. Query for support3. Allocating Physical Memory3.1. Shareable Memory Allocations3.2. Memory Type3.2.1. Compressible Memory4. Reserving a Virtual Address Range5. Virtual Aliasing Support6. Ma…...

线程池小结

什么是线程池 线程池其实就是一种多线程处理形式&#xff0c;处理过程中可以将任务添加到队列中&#xff0c;然后在创建线程后自动启动这些任务。这里的线程就是我们前面学过的线程,这里的任务就是我们前面学过的实现了Runnable或Callable接口的实例对象; 为什么使用线程池 …...

vue3状态管理模式 Pinia

状态管理库 Pinia是Vue的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态 1&#xff1a;安装与使用pinia 1.1 安装语法&#xff1a;npm install pinia1.2 创建一个pinia&#xff08;根存储&#xff09;并将其传递给应用程序 import { createApp } from vue import…...

python基于django的自媒体社区交流平台

自媒体社区平台采用python技术,基于django框架,mysql数据库进行开发,实现了以下功能&#xff1a; 本系统主要包括管理员,用户,商家和普通管理员四个角色组成,主要包括以下功能&#xff1a; 1;前台&#xff1a;首页、需求通告、优质案例、帮助中心、意见反馈、个人中心、后台管理…...

Python中类和对象(2)

1.继承 Python 的类是支持继承的&#xff1a;它可以使用现有类的所有功能&#xff0c;并在无需重新编写代码的情况下对这些功能进行扩展。 通过继承创建的新类称为 “子类”&#xff0c;被继承的类称为 “父类”、“基类” 或 “超类”。 继承语法是将父类写在子类类名后面的…...

SpringMvc入门

Spring与Web环境的集成 1.ApplicationContext应用上下文的获取方式 分析 之前获取应用上下文对象每次都是从容器中获取&#xff0c;编写时都需要new ClasspathXmlApplicationContext(Spring配置文件)&#xff0c;这样的弊端就是配置加载多次应用上下文就创建多次。 在Web项目…...

设计模式之单例模式(C++)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、单例模式是什么&#xff1f; 单例模式是一种创建型的软件设计模式&#xff0c;在工程项目中非常常见。通过单例模式的设计&am…...

贪心算法(基础)

目录 一、什么是贪心&#xff1f; &#xff08;一&#xff09;以教室调度问题为例 1. 问题 2. 具体做法如下 3. 因此将在这间教室上如下三堂课 4. 结论 &#xff08;二&#xff09;贪心算法介绍 1. 贪心算法一般解题步骤 二、最优装载问题 &#xff08;一&#xf…...

【九宫格坐标排列 Objective-C语言】

一、这个案例做好之后的效果如图: 1.这个下载是可以点击的,当你点击之后,弹出一个框,过一会儿,框框自动消失,这里变成“已安装” 2.那么,我现在先问大家一句话:大家认为在这一个应用里面,它包含几个控件, 3个,哪3个:一个是图片框,一个是Label,一个是按钮, 这…...

Tomcat简介

目录 一、Tomcat简介 二、下载安装Tomcat 三、利用Tomcat部署静态页面 一、Tomcat简介 Tomcat是一个HTTP服务器&#xff0c;可以按照HTTP的格式来解析请求来调用用户指定的相关代码然后按照HTTP的格式来构造返回数据。 二、下载安装Tomcat 进入Tomcat官网选择与自己电脑…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...