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

Uniapp：view容器(容器布局)

news 来源：原创 2025/7/26 1:30:02

一、基本概述
二、属性说明
三、常用布局
- 3.1 横向布局
- 3.2 纵向布局
- 3.3 更多布局
- - 3.3.1 纵向布局-自动宽度
  - 3.3.2 纵向布局-固定宽度
  - 3.3.3 横向布局-自动宽度
  - 3.3.4 横向布局-居中
  - 3.3.5 横向布局-居右
  - 3.3.6 横向布局-平均分布
  - 3.3.7 横向布局-两端对齐
  - 3.3.8 横向布局-自动填充
  - 3.3.9 横向布局-换行展示
  - 3.3.10 横向布局-垂直分布

一、基本概述

view是一个视图容器，本身不显示任何可视化元素。用途都是为了包裹其他真正显示的组件。它类似于传统html中的div，用于包裹各种元素内容。

二、属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

实例代码

<view class="box-container" hover-class="box-container-hover" hover-start-time="100" hover-stay-time="1000">视图容器</view>

.box-container {width: 200px;height: 200px;background-color: orange;text-align: center;line-height: 200px;
}
.box-container-hover {background-color: blue;
}

三、常用布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。

3.1 横向布局

在这里插入图片描述

<view class="uni-flex uni-row"><view class="flex-item uni-bg-red">A</view><view class="flex-item uni-bg-green">B</view><view class="flex-item uni-bg-blue">C</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.flex-item {width: 33.3%;height: 100px;text-align: center;line-height: 100px;
}
.uni-bg-red{background:#F76260; color:#FFF;
}
.uni-bg-green{background:#09BB07; color:#FFF;
}
.uni-bg-blue{background:#007AFF; color:#FFF;
}

3.2 纵向布局

在这里插入图片描述

<view class="uni-flex uni-column"><view class="flex-item flex-item-V uni-bg-red">A</view><view class="flex-item flex-item-V uni-bg-green">B</view><view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>

.uni-flex {display: flex;
}
.uni-column {flex-direction: column;
}
.flex-item {width: 33.3%;height: 100px;text-align: center;line-height: 100px;
}
.uni-bg-red{background:#F76260; color:#FFF;
}
.uni-bg-green{background:#09BB07; color:#FFF;
}
.uni-bg-blue{background:#007AFF; color:#FFF;
}

3.3 更多布局

在这里插入图片描述

3.3.1 纵向布局-自动宽度

<view class="text">纵向布局-自动宽度</view>

.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.2 纵向布局-固定宽度

<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>

.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.3 横向布局-自动宽度

<view class="uni-flex uni-row"><view class="text">横向布局-自动宽度</view><view class="text">横向布局-自动宽度</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.4 横向布局-居中

<view class="uni-flex uni-row uni-center"><view class="text">横向布局-居中</view><view class="text">横向布局-居中</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-center {-webkit-justify-content: center;justify-content: center;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.5 横向布局-居右

<view class="uni-flex uni-row uni-right"><view class="text">横向布局-居右</view><view class="text">横向布局-居右</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-right {-webkit-justify-content: flex-end;justify-content: flex-end;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.6 横向布局-平均分布

<view class="uni-flex uni-row"><view class="text uni-aver">横向布局-平均分布</view><view class="text uni-aver">横向布局-平均分布</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-aver {-webkit-flex: 1;flex: 1;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.7 横向布局-两端对齐

<view class="uni-flex uni-row .uni-between"><view class="text">横向布局-两端对齐</view><view class="text">横向布局-两端对齐</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-between {-webkit-justify-content: space-between;justify-content: space-between;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.8 横向布局-自动填充

<view class="uni-flex uni-row"><view class="text" style="width: 200rpx;">固定宽度</view><view class="text uni-fill">自动占满余量</view>
</view><view class="uni-flex uni-row"><view class="text" style="width: 200rpx;">固定宽度</view><view class="text uni-fill">自动占满</view><view class="text" style="width: 200rpx;">固定宽度</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-fill {-webkit-flex: 1;flex: 1;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.9 横向布局-换行展示

<view class="uni-flex uni-row uni-wrap"><view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view><view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view><view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-wrap {-webkit-flex-wrap: wrap;flex-wrap: wrap;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.10 横向布局-垂直分布

<view class="uni-flex uni-row"><view class="text uni-flex uni-vertical uni-vertical-top"><text>垂直居顶</text></view><view class="text uni-flex uni-vertical uni-vertical-center"><text>垂直居中</text></view><view class="text uni-flex uni-vertical uni-vertical-end"><text>垂直居底</text></view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-vertical {-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;
}
.uni-vertical-top {-webkit-align-items: flex-start;align-items: flex-start;
}
.uni-vertical-center {-webkit-align-items: center;align-items: center;
}
.uni-vertical-end {-webkit-align-items: flex-end;align-items: flex-end;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

Uniapp：view容器(容器布局)

目录一、基本概述二、属性说明三、常用布局3.1 横向布局3.2 纵向布局3.3 更多布局3.3.1 纵向布局-自动宽度3.3.2 纵向布局-固定宽度3.3.3 横向布局-自动宽度3.3.4 横向布局-居中3.3.5 横向布局-居右3.3.6 横向布局-平均分布3.3.7 横向布局-两端对齐3.3.8 横向布局-自动填充3.3…...

编程日记 2025/7/26 1:30:02

C# 运算符：?.（null 条件运算符）和 ??（null 合并运算符）

在 WinForms 中，comboBox1.SelectedValue?.ToString() ?? "" 这行代码使用了两个特殊的 C# 运算符：?.（null 条件运算符）和 ??（null 合并运算符）。让我分别解释它们的作用： ?.&…...

编程日记 2025/7/26 5:21:27

java/python——两个行为（操作）满足原子性的实现

目录 JAVA方法 1：使用 synchronized 同步块示例代码方法 2：使用 ReentrantLock锁示例代码方法 3：使用 AtomicReference 或其他原子类示例代码方法 4：使用数据库事务（如果涉及数据库操作）示例代码&#x…...

编程日记 2025/7/26 5:21:25

下面的优先级由高到低命令行参数java系统属性java系统环境变量外部config文件夹的application-{profile}.ym文件外部的application-{profile}.ym文件内部config文件夹的application-{profile}.ym文件内部的application-{profile}.ym文件外部config文件夹的application.ym文件外…...

编程日记 2025/7/26 5:21:23

Nginx下搭建rtmp流媒体服务并使用HLS或者OBS测试

所需下载地址： 通过网盘分享的文件：rtmp 链接: https://pan.baidu.com/s/1t21J7cOzQR1ASLrsmrYshA?pwd0000 提取码: 0000 window： 解压 win目录下的 nginx-rtmp-module-1.2.2.zip和nginx 1.7.11.3 Gryphon.zip安装包，解压时选…...

编程日记 2025/7/26 5:21:21

在线查看【免费】 txt, xml(渲染), md(渲染), java, php, py, js, css 文件格式网站

可以免费在线查看 .docx/wps/Office/wmf/ psd/ psd/eml/epub/dwg, dxf/ txt/zip, rar/ jpg/mp3 m.gszh.xyz m.gszh.xyz 免费支持以下格式文件在线查看类型支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office 办…...

编程日记 2025/7/26 5:21:19

RIP动态路由（三层交换机+单臂路由）

RIP动态路由（三层交换机单臂路由） J1 (配置VLAN，修改端口) Switch>en Switch>en Switch# Switch#conf t Enter configuration commands, one per line. End with CNTL/Z. Switch(config)#int f0/1 Switch(config-if)#sw Switch(confi…...

编程日记 2025/7/25 15:42:04

Docker 基本概念与安装指南

Docker 基本概念与安装指南一、Docker 核心概念 1. 容器（Container） 容器是 Docker 的核心运行单元，本质是一个轻量级的沙盒环境。它基于镜像创建，包含应用程序及其运行所需的依赖（如代码、库、环境变量等&#xf…...

编程日记 2025/7/26 5:21:15

Oracle DBA培训一般多长时间？

Oracle DBA培训的时间通常在‌2个月到6个月‌之间，具体看课程类型和你的学习目标。不过别只看总时长，关键得看每天学什么、练什么——有些机构把时间拖到半年，结果全是理论；有些课程压缩到2个月，但全是干货。下面分情况…...

编程日记 2025/7/26 5:21:13

【回眸】Linux 内核 (十七) 之网络编程

前言努力赶紧把Linux内核的内容更新完。网络编程协议的部分已经很成熟，只需要调用即可。进程间通讯无法进行多机通信，网络通讯则解决了这一缺陷。 TCP/UDP协议对比 （1）TCP 面向连接（如打电话要先拨号建立连接…...

编程日记 2025/7/26 5:21:11

Batch Size

1. 什么是Batch Size？ Batch Size（批大小）是指在深度学习模型训练过程中，每次前向传播和反向传播时输入到模型中的样本数量。具体来说，深度学习模型的训练通常基于梯度下降（Gradient Descent）算…...

编程日记 2025/7/26 5:21:09

Maven插件管理的基本原理

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/7/26 5:13:38

flutter 专题六十三 Flutter入门与实战作者：xiangzhihong8Fluter 应用调试

Fluter 应用调试 Flutter 构建模式目前，Flutter一共提供了三种运行模式，分别是Debug、Release和Profile模式。其中，Debug模式主要用在软件编写过程中，Release模式主要用于应用发布过程中，而Profile模式则主要用于应…...

编程日记 2025/7/26 5:13:37

MySQL-存储过程--游标

存储过程游标什么是游标一个游标是一个SQL语句执行时系统内存创建的一个临时工作区域。一个游标包含一个查询语句的信息和它操作的数据行的信息。 mysql游标的特点只读： 无法通过游标更新基础表中的数据不可滚动： 只能根据select中确定的顺序来…...

编程日记 2025/7/26 5:13:34

Spring AOP 事务

目录一,引入依赖: 二,切面 1,基本概念 2, 通知类型: 3,Pointcut 4, 切面优先级: 5 ,自定义优先级Order 6,切点表达式 7, 自定义注解总结: AOP有几种创建方式三, Spring AOP原理 1, 代理模式 (1)静态代理 (2)动态代理 △JDK动态代理 △CGLIB动态代理 JDB和c…...

编程日记 2025/7/26 5:13:32

Itext进行PDF的编辑开发

这周写了一周的需求，是制作一个PDF生成功能，其中用到了Itext来制作PDF的视觉效果。其中一些功能不是很懂，仅作记录，若要学习请仔细甄别正确与否。开始之前，我还是想说，这傻福需求怎么想出来的&#xff0c…...

编程日记 2025/7/26 5:13:30

Python 中消费者 - 生产者模式详解

目录引言消费者 - 生产者模式原理示例场景 Python 实现消费者 - 生产者模式使用队列（Queue）实现代码解释使用协程实现代码解释应用场景总结引言在软件开发里，消费者 - 生产者模式是一种常见且重要的设计模式。这种模式让…...

编程日记 2025/7/26 5:13:28

基于Hadoop的音乐推荐系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要本毕业生数据分析与可视化系统采用B/S架构，数据库是MySQL，网站的搭建与开发采用了先进的Java语言、爬虫技术进行编写，使用了Spring Boot框架。该系统从两个对象：由管理员和用户来对系统进行设计构建。主要功能包括&#xff…...

编程日记 2025/7/26 5:13:26

移动端动态滑动拨盘选择器【Axure元件库】

模拟移动端底部对话框效果，制作的年份、日期滑动拨盘选择器，支持日期动态滑动选择，提升原型制作强度。该模板主要使用中继器、动态面板和矩形制作，使用简单，复用性强。只需对中继器数据表格中的数据项进行修改、增删…...

编程日记 2025/7/26 5:13:24

7. 深入Spring AI：刨析 Advisors 机制

目录 1、序言2、什么是Advisor？3、源码分析Advisor3.1、Advisor接口3.2、Advisor Ordered3.3、CallAroundAdvisor & StreamAroundAdvisor3.4、BaseAdvisor4、内置的Advisor类型4.1、MessageChatMemoryAdvisor4.2、PromptChatMemoryAdvisor4.3、VectorStoreChatMemoryAdvis…...

编程日记 2025/7/26 3:42:48

高保真动态项目管理图表集

本作品为项目管理图表类原型，以关系图谱、甘特图、流程图、泳道图为核心，提供基础的图表设计风格和交互案例，再进阶到高级的动态交互设计，由浅入深诠释Axure设计高端复杂的动态交互设计的魅力。作品介绍原型名称：Ax…...

编程日记 2025/7/26 7:28:31

MCP：AI时代的“万能插座”，开启大模型无限可能

摘要：Model Context Protocol（MCP）由Anthropic在2024年底开源，旨在统一大模型与外部工具、数据源的通信标准。采用客户端-服务器架构，基于JSON-RPC 2.0协议，支持stdio、SSE、Streamable HTTP等多种通信方式…...

编程日记 2025/7/26 1:38:17

IDEA打不开、打开报错

目录场景异常原因解决场景 1、本机已经安装了IDEA 2、再次安装另外一个版本的IDEA后打不开、打开报错异常这里忘记截图了。。。原因情况1-打不开：在同一台电脑安装多个IDEA是需要对idea的配置文件进行调整的，否则打不开情况2-打开报错&#…...

编程日记 2025/7/26 5:13:20

TM1640学习手册及示例代码

数据手册 TM1640数据手册数据手册解读这里我们看管脚定义DIN和SCLK，一个数据线一个时钟线 SEG1~SEG8为段码，GRID1~GRID16为位码（共阴极情况下） 这里VDD给5V 数据指令数据命令设置地址命令设置显示控制命令共阴极硬件连接图…...

编程日记 2025/7/25 14:03:18

动态规划-零钱兑换

332.零钱兑换给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1 。你可以认为每种硬币的数量是无…...

编程日记 2025/7/26 5:13:16

leetcode50.pow（x，n）

class Solution {private double f(double x,long n){if(n0)return 1.0;else {double tempf(x,n/2);return n%21?temp*temp*x:temp*temp;}}public double myPow(double x, int n) {long Nn;return n>0?f(x,N):1.0/f(x,-N);} }...

编程日记 2025/7/25 23:32:11

ECA 注意力机制：让你的卷积神经网络更上一层楼

ECA 注意力机制：让你的卷积神经网络更上一层楼在深度学习领域，注意力机制已经成为提升模型性能的重要手段。从自注意力（Self-Attention）到各种变体，研究人员不断探索更高效、更有效的注意方法。今天我们要介绍一种轻…...

编程日记 2025/7/25 22:32:45

《谷歌Gemini 1.5：长语境理解重塑文档分析与检索新格局》

在人工智能的快速发展进程中，大语言模型不断突破边界，为各个领域带来变革性影响。谷歌Gemini 1.5的问世，凭借其卓越的长语境理解能力，在文档分析和检索任务方面掀起了一阵技术革新的浪潮。以往的大语言模型在处理长文本时&#…...

编程日记 2025/7/26 5:13:14

量变与质变的辩证关系

量变和质变是唯物辩证法中揭示事物发展状态和形式的一对重要范畴，二者之间存在着密切的辩证关系。一、量变是质变的必要准备含义量变是指事物数量的增减和场所的变更，是一种渐进的、不显著的变化。例如，水的温度升高，从0℃逐…...

编程日记 2025/7/26 5:13:12

讯联桌面TV版apk下载-讯联桌面安卓电视版免费下载安装教程

在智能电视的使用过程中，一款好用的桌面应用能极大提升我们的使用体验。讯联桌面 TV 版就是这样一款备受关注的应用，它可以让安卓电视拥有更个性化、便捷的操作界面。今天，就为大家详细介绍讯联桌面 TV 版 apk 的免费下载安装教程。一、下载…...

编程日记 2025/7/26 5:13:10

【Vue】组件基础

目录 🚀 Vue 非单文件组件和单文件组件的区别与实践对比 ✨ 引言一、非单文件组件 1. 基本使用 2. 注意： 3. 组件的嵌套 4. 关于VueComponent： 5. 一个重要的内置关系（有点难理解） 二、单文件组件那就…...

编程日记 2025/7/26 5:13:08

OpenCV---图像预处理（四）

OpenCV—图像预处理（四） 文章目录 OpenCV---图像预处理（四）九，图像掩膜9.1 制作掩膜9.2 与运算9.3 颜色替换9.3.19.3.2 颜色替换十，ROI切割十一，图像添加水印11.1模板输入11.2 与运算11.3 图像…...

编程日记 2025/7/26 5:13:00

《MySQL：MySQL表的基本查询操作CRUD》

CRUD：Create（创建）、Retrieve（读取）、Update（更新）、Delete（删除）。 Create into 可以省略。插入否则更新由于主键或唯一键冲突而导致插入失败。可以选择性的进行同步…...

编程日记 2025/7/26 7:28:30

Psychology 101 期末测验（附答案）

欢呼啦啦啦~啦啦啦~♪(^∇^*) 终于考过啦~ 开心(*^▽^*) 撒花✿✿ヽ(▽)ノ✿ |必须晒下证书：判卷记录下判卷，还是错了几道，填空题2道压根填不上。惭愧~ 答案我隐藏了，实在想不出答案的朋友可以留言，不定时回复。建议还是认认真真的学习~认认真真的考试~，知识就…...

编程日记 2025/7/26 7:28:28

Linux:权限相关问题

文章目录 shell命令以及运行的原理Linux权限 shell命令以及运行的原理操作系统分为内核和外壳程序，xshell是外壳程序，外壳程序包括我们windows桌面上的图形化界面，本质都是翻译给核心处理，再显示出来，而我们输入的命令…...

编程日记 2025/7/26 7:28:26

大模型应用开发大纲

AI大模型学习路径脑图结构一、AI及LLM基础学习目标：建立对AI和LLM的基础理解，了解主要的机器学习和神经网络模型，掌握API调用方法。 1.1 AI领域基础概念 AI, NL/NLU/NLG机器学习: 学习方法, 拟合评估神经网络: CNN, RNN, TransformerTra…...

编程日记 2025/7/26 7:28:25

【NCCL】transport建立（一）

transport建立 NCCL transport建立主要在ncclTransportP2pSetup函数中实现。概况先简单概括一下ncclTransportP2pSetup函数做了哪些事，方便理解代码流程。 recvpeer 表示本卡作为接收端的对端，sendpeer 表示本卡作为发送端的对端。假设8个rank全连接…...

编程日记 2025/7/25 7:51:27

智慧能源安全新纪元：当能源监测遇上视频联网的无限可能

引言：在数字化浪潮席卷全球的今天，能源安全已成为国家安全战略的重要组成部分。如何构建更加智能、高效的能源安全保障体系？能源安全监测平台与视频监控联网平台的深度融合，正为我们开启一扇通向未来能源管理新世界的大门。这种创…...

编程日记 2025/7/26 7:28:22

腾讯一面-软件开发实习-PC客户端开发方向

1.自我介绍就不多赘述了 2. 请介绍一下你的项目经历 - 介绍了专辑鉴赏项目，前端使用html语言编写，后端基于http协议使用C语言进行网页开发。此外，还提及项目中涉及处理多线程问题以及做过内存池管理项目。 3. 项目中HTTP协议是使用库实现的…...

编程日记 2025/7/26 7:28:20

Cad c# 射线法判断点在多边形内外

1、向量叉乘法 2、射线法原理射线法是判断点与多边形位置关系的经典算法，核心思想是： 从目标点发出一条水平向右的射线（数学上可视为 y p_y, x \geq p_x 的射线），统计该射线与多边形边的交点数量： - 偶…...

编程日记 2025/7/26 7:28:19

【第16届蓝桥杯软件赛】CB组第一次省赛

个人主页：Guiat 归属专栏：算法竞赛文章目录 A. 移动距离（5分填空题）B. 客流量上限（5分填空题）C. 可分解的正整数D. 产值调整E. 画展布置F. 水质检测G. 生产车间H. 装修报价正文总共10道题。 A. 移动距离…...

编程日记 2025/7/26 7:22:44

DePIN驱动的分布式AI资源网络

GAEA通过通证经济模型激励全球用户共享闲置带宽、算力、存储资源，构建覆盖150多个国家/地区的分布式AI基础设施网络。相比传统云服务，GAEA具有显著优势： 成本降低70%：通过利用边缘设备资源，避免了集中式数据中心所需…...

编程日记 2025/7/25 19:24:12

CC注入Tomcat Upgrade/Executor/WebSocket内存马

学习一下Tomcat中和组件内存马不一样的马。除了学习注入原理外，其payload还在一些缩短payload的场景有应用，比如shiro CC注入Tomcat Upgrade/Executor/WebSocket内存马漏洞所用环境及测试全部代码https://github.com/godownio/TomcatMemshell 漏洞路…...

编程日记 2025/7/26 6:47:41

算法工程师面试题与参考答案资料(2025年版）

一、核心技术能力 1. 编程能力与工具问题 1（选择题）: 下列哪种Python数据类型是通过哈希表实现的？ A. 列表 (list)...

编程日记 2025/7/10 3:44:03

烂土豆Juicypotato提权原理和利用

烂土豆Juicypotato提权原理和利用 0x00 Potato（烂土豆）提权的原理： 所谓的烂土豆提权就是俗称的MS16-075 可以将Windows工作站上的特权从最低级别提升到“ NT AUTHORITY \ SYSTEM” – Windows计算机上可用的最高特权级别。一、简单的原…...

编程日记 2025/7/26 6:47:39

基于LangChain4J的AI Services实践：用声明式接口重构LLM应用开发

基于LangChain4J的AI Services实践：用声明式接口重构LLM应用开发前言：当Java开发遇上LLM编程困境在LLM应用开发领域，Java开发者常面临两大痛点：一是需要手动编排Prompt工程、记忆管理和结果解析等底层组件，二是复杂…...

编程日记 2025/7/26 6:47:37

重构便携钢琴专业边界丨特伦斯便携钢琴V30Pro定义新一代便携电钢琴

在便携电钢琴领域，特伦斯推出的V30Pro折叠钢琴以"技术革新场景适配"的双重升级引发关注。这款产品不仅延续了品牌标志性的折叠结构，更通过声学系统重构与智能交互优化，重新定义了便携乐器的专业边界。 ▶ 核心特点：技术…...

编程日记 2025/7/26 6:47:35

【uniapp-兼容性处理】安卓uView组件中u-input后置插槽不展示

【日期】2025-04-21 【问题】在小程序上u-input后置插槽展示，真机运行安卓机上不展示【原因】： 原代码：（插槽写法惯性使用#，此处在APP上不兼容该写法） <u-input v-model"currentScore"…...

编程日记 2025/7/26 6:47:34

每天学一个 Linux 命令（30）：cut

可访问网站查看，视觉品味拉满： http://www.616vip.cn/28/index.html cut 命令用于从文件或输入流中提取文本的特定部分（如列、字符或字节位置）。它常用于处理结构化数据（如 CSV、TSV）或按固定格式分割的文本。以下是详细说明和示例：命令格式 cut [选项] [文件...]…...

编程日记 2025/7/26 6:47:32

部署本地Dify

本文我们来演示一下Dify的部署安装。一、安装docker环境 Dify只是一个dashboard，所以这里的话咱们一般不用使用物理部署了，直接使用docker启动一个即可，所以一定要先确保服务器上有docker环境和docker-compose环境。 docker的安装可参考&…...

编程日记 2025/7/26 6:47:30

目录

一、基本概述

二、属性说明

三、常用布局

3.1 横向布局

3.2 纵向布局

3.3 更多布局

3.3.1 纵向布局-自动宽度

3.3.2 纵向布局-固定宽度

3.3.3 横向布局-自动宽度

3.3.4 横向布局-居中

3.3.5 横向布局-居右

3.3.6 横向布局-平均分布

3.3.7 横向布局-两端对齐

3.3.8 横向布局-自动填充

3.3.9 横向布局-换行展示

3.3.10 横向布局-垂直分布

相关文章：