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

前端面试之Box盒子布局：核心知识与实战解析

news 来源：原创 2025/9/18 22:38:46

目录

引言：布局能力决定前端高度

一、盒模型基础：看得见的像素战争

1. 标准盒模型 vs IE盒模型

2. 核心组成公式

3. 视觉格式化模型

二、传统布局三剑客

1. 浮动布局（Float Layout）

2. 定位布局（Position Layout）

3. 表格布局（Table Layout）

三、现代布局双雄：Flex与Grid

1. Flex弹性布局（面试热点）

高频考点：

2. Grid网格布局（未来趋势）

典型应用场景：

四、六大经典布局问题实现

1. 垂直居中（5+种方案）

2. 两栏自适应布局

3. 等高布局

4. 瀑布流布局

5. 粘性页脚布局

6. 全屏布局

五、避坑指南：常见布局问题

1. margin塌陷问题

2. 浮动导致的父容器高度塌陷

3. 移动端1px边框问题

六、面试加分技巧

结语：布局即世界观

引言：布局能力决定前端高度

在Web开发领域，盒子布局（Box Layout）是构建页面结构的基石。据统计，80%的前端面试必考布局问题，而90%的布局异常与盒子模型理解偏差相关。本文将深入解析盒模型、布局体系及典型场景实现，助你构建系统的布局知识体系。

一、盒模型基础：看得见的像素战争

1. 标准盒模型 vs IE盒模型

/* 默认标准盒模型 */
.box { width: 200px; padding: 20px; } /* 总宽度=200+20*2=240px *//* IE盒模型 */ 
.box { box-sizing: border-box; width: 200px; padding: 20px; } /* 总宽度=200px */

2. 核心组成公式

  • 标准盒模型：总宽度 = width + padding + border + margin

  • IE盒模型：总宽度 = width（包含padding+border） + margin

3. 视觉格式化模型

  • 块级元素默认占满父容器宽度（display: block）

  • 行内元素共享行空间（display: inline）

  • 脱离文档流的定位方式：position: absolute/fixed

二、传统布局三剑客

1. 浮动布局（Float Layout）

<div class="container"><div class="left">左浮动</div><div class="right">右浮动</div>
</div>

运行 HTML

.left { float: left; width: 200px; }
.right { float: right; width: calc(100% - 200px); }
.container::after { content: ''; display: block; clear: both; } /* 清除浮动 */

2. 定位布局（Position Layout）


.parent { position: relative; height: 400px; }
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 经典居中方案 */
}

3. 表格布局（Table Layout）


.container {display: table;width: 100%;
}
.row { display: table-row; }
.cell {display: table-cell;vertical-align: middle; /* 天然垂直居中特性 */
}

三、现代布局双雄：Flex与Grid

1. Flex弹性布局（面试热点）

.container {display: flex;justify-content: space-between; /* 主轴对齐 */align-items: center; /* 交叉轴对齐 */
}
.item {flex: 1; /* 等分剩余空间 */min-width: 100px; /* 防止内容挤压 */
}
高频考点：

  • flex: 1 的完整含义（flex-grow, flex-shrink, flex-basis）

  • 实现九宫格布局（flex-wrap + justify-content）

  • 圣杯布局实现（flex-order属性控制顺序）

2. Grid网格布局（未来趋势）

.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;
}
.header {grid-column: 1 / -1; /* 跨所有列 */
}
.aside {grid-row: 2 / 4; /* 跨行控制 */
}
典型应用场景：

  • 复杂响应式布局（结合minmax函数）

  • 不规则网格排版（grid-template-areas）

  • 自动填充布局（auto-fit + minmax）

四、六大经典布局问题实现

1. 垂直居中（5+种方案）

/* 方案5：Grid终极方案 */
.parent {display: grid;place-items: center;
}

2. 两栏自适应布局

.container {display: flex;
}
.sidebar { width: 200px; flex-shrink: 0; }
.main { flex: 1; }

3. 等高布局

/* Flex方案 */
.container {display: flex;align-items: stretch; /* 默认值即等高 */
}

4. 瀑布流布局

.container {column-count: 3;column-gap: 20px;
}
.item { break-inside: avoid; }

5. 粘性页脚布局

body {min-height: 100vh;display: flex;flex-direction: column;
}
.main { flex: 1; }

6. 全屏布局

.container {display: grid;height: 100vh;grid-template-rows: auto 1fr auto;
}

五、避坑指南：常见布局问题

1. margin塌陷问题

.parent {overflow: hidden; /* 触发BFC */
}
.child { margin-top: 20px; }

2. 浮动导致的父容器高度塌陷

.clearfix::after {content: '';display: block;clear: both;
}

3. 移动端1px边框问题

.border {position: relative;
}
.border::after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #ddd;transform: scaleY(0.5);
}

六、面试加分技巧

  1. 性能优化：避免频繁触发重排（如offsetTop读取）

  2. 响应式布局：媒体查询与clamp()函数结合

  3. CSS变量应用：动态调整布局参数

  4. 现代布局方案选择依据：

    • 一维布局用Flex

    • 二维布局用Grid

    • 兼容性要求高用传统方案

结语：布局即世界观

盒子布局不仅是CSS技术的集合，更是开发者对页面结构的理解方式。掌握从盒模型到现代布局方案的知识体系，配合对浏览器渲染机制的理解，方能在面试中游刃有余。建议通过CSS Battle等平台进行实战演练，真正将知识转化为解决问题的能力。

相关文章：

前端面试之Box盒子布局：核心知识与实战解析

目录 引言&#xff1a;布局能力决定前端高度 一、盒模型基础&#xff1a;看得见的像素战争 1. 标准盒模型 vs IE盒模型 2. 核心组成公式 3. 视觉格式化模型 二、传统布局三剑客 1. 浮动布局&#xff08;Float Layout&#xff09; 2. 定位布局&#xff08;Position Layou…...

编程日记 2025/9/18 22:38:46

前端VUE+后端uwsgi 环境搭建

1整体架构 请求流程the web clinet--the web server->the socket->uwsgi--django 第一级的nginx并不是必须的&#xff0c;uwsgi完全可以完成整个的和浏览器交互的流程&#xff1b;在nginx上加上安全性或其他的限制&#xff0c;可以达到保护程序的作用&#xff1b;uWSGI本…...

编程日记 2025/9/15 8:22:44

保姆级！ 本地部署DeepSeek-R1大模型 安装Ollama Api 后，Postman本地调用 deepseek

要在Postman中访问Ollama API并调用DeepSeek模型&#xff0c;你需要遵循以下步骤。首先&#xff0c;确保你有一个有效的Ollama服务器实例运行中&#xff0c;并且DeepSeek模型已经被加载。 可以参考我的这篇博客 保姆级&#xff01;使用Ollama本地部署DeepSeek-R1大模型 并java…...

编程日记 2025/9/15 10:57:11

【python】pip命令合集

文章目录 1. 包安装与卸载2. 依赖管理与文件操作3. 包下载与构建4. 配置与缓存管理5. 高级调试与日志6. 虚拟环境集成7. 哈希验证与安全8. 实验性功能&#xff08;可能不稳定&#xff09;9. 其他实用命令参数大全&#xff08;全局常用参数&#xff09;示例场景 conda: 【python…...

编程日记 2025/9/15 10:57:09

【鸿蒙开发】第四十章 Form Kit（卡片开发服务）

目录 1 概述 1.1 卡片使用场景 1.2 服务卡片架构 1.3 亮点/特征 1.4 开发模式 1.5 与相关Kit的关系 1.6 约束限制 2 ArkTS卡片运行机制 2.1 实现原理 2.2 ArkTS卡片的优势 2.3 ArkTS卡片的约束 3 ArkTS卡片相关模块 4 ArkTS卡片开发指导 4.1 创建一个ArkTS卡片 …...

编程日记 2025/9/15 10:57:07

汽车自动驾驶辅助L2++是什么？

自动驾驶辅助级别有哪些&#xff1f; 依照SAE&#xff08;SAE International&#xff0c;Society of Automotive Engineers国际自动机工程师学会&#xff09;的标准&#xff0c;大致划分为6级&#xff08;L0-L5&#xff09;&#xff1a; L0人工驾驶&#xff1a;即没有驾驶辅助…...

编程日记 2025/9/15 10:57:06

微信小程序消息推送解密

package com.test.main.b2b;import org.apache.commons.codec.binary.Base64;import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import java.util.Arrays;/*** author * version 1.0* description: 解谜微信小…...

编程日记 2025/9/15 9:47:46

java项目之城市公园信息管理系统的设计与实现(源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的城市公园信息管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 城市公园信息…...

编程日记 2025/9/15 10:57:02

EasyRTC：基于WebRTC与P2P技术，开启智能硬件音视频交互的全新时代

在数字化浪潮的席卷下&#xff0c;智能硬件已成为我们日常生活的重要组成部分&#xff0c;从智能家居到智能穿戴&#xff0c;从工业物联网到远程协作&#xff0c;设备间的互联互通已成为不可或缺的趋势。然而&#xff0c;高效、低延迟且稳定的音视频交互一直是智能硬件领域亟待…...

编程日记 2025/9/15 1:15:00

【前端框架】vue2和vue3的区别详细介绍

Vue 3 作为 Vue 2 的迭代版本&#xff0c;在性能、语法、架构设计等多个维度均有显著的变革与优化。以下详细剖析二者的区别&#xff1a; 响应式系统 Vue 2 实现原理&#xff1a;基于 Object.defineProperty() 方法实现响应式。当一个 Vue 实例创建时&#xff0c;Vue 会遍历…...

编程日记 2025/9/15 10:56:59

23.1 WebBrowser控件

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 WebBrowser控件类似于IE浏览器的文档界面&#xff08;事实上IE也是使用的这个控件&#xff09;&#xff0c;它提供了显示网页及支持…...

编程日记 2025/9/15 10:56:57

从0-1搭建mac环境最新版

从0-1搭建mac环境 先查看自己的芯片信息 bash uname -mbash-3.2$ uname -m arm64这里是自己的型号安装brew xcode-select --install xcode-select -p /bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)” source /Users/lanren/.…...

编程日记 2025/9/17 14:20:37

Docker-技术架构演进之路

目录 一、概述 常见概念 二、架构演进 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 三、尾声 一、概述 在进行技术学习过程中&am…...

编程日记 2025/9/15 10:49:43

堆、优先队列、堆排序

堆&#xff1a; 定义&#xff1a; 必须是一个完全二叉树&#xff08;完全二叉树&#xff1a;完全二叉树只允许最后一行不为满&#xff0c;且最后一行必须从左往右排序&#xff0c;最后一行元素之间不可以有间隔&#xff09; 堆序性&#xff1a; 大根堆&#xff1a;每个父节点…...

编程日记 2025/9/14 18:57:05

C语言之宏定义

目录 前言 一、宏定义前操作 二、引用自定义.h文件 三、宏定义#define 四、对比typedef的差异 五、替换一个函数或表达式 六、嵌套宏替换 七、用宏和typedef创建一个“布尔型数据 八、定义有参数的宏 总结 前言 C语言中的宏定义是一种预处理指令&#xff0c;用来定义常量、函数…...

编程日记 2025/9/15 10:56:51

大语言模型基础

简介 AI大模型是“人工智能预训练大模型”的简称，包含了“预训练”和“大模型”两层含义，二者结合产生了一种新的人工智能模式，即模型在大规模数据集上完成了预训练后无需微调，或仅需要少量数据的微调，就能直接支撑各类应用。AI大模型主要分为三类：大语言模型、CV大模型…...

编程日记 2025/9/15 0:33:24

vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体

vxe-table 如何实现跟 Excel 一样的数值或金额的负数自动显示红色字体&#xff0c;当输入的值为负数时&#xff0c;会自动显示红色字体&#xff0c;对于数值或者金额输入时该功能就非常有用了。 查看官网&#xff1a;https://vxetable.cn gitbub&#xff1a;https://github.co…...

编程日记 2025/9/18 15:39:46

Web 自动化测试提速利器：Aqua 的 Web Inspector （检查器）使用详解

Web 自动化测试提速利器&#xff1a;Aqua 的 Web Inspector &#xff08;检查器&#xff09;使用详解 前言简介一、安装二、Web Inspector 的使用2.1 获取元素定位器&#xff08;Locators&#xff09;2.2 将定位器添加到代码2.3 验证定位器2.4 处理 Frames (框架) 总结 前言 Je…...

编程日记 2025/9/15 10:56:46

23种设计模式 - 空对象模式

模式定义 空对象模式&#xff08;Null Object Pattern&#xff09;是一种行为型设计模式&#xff0c;通过用无操作的空对象替代null值&#xff0c;消除客户端对空值的检查&#xff0c;避免空指针异常。其核心是让空对象与真实对象实现相同接口&#xff0c;但空对象不执行实际逻…...

编程日记 2025/9/15 10:56:44

【mysql80 安装】mysql8.0.31 安装修改3306端口

在离线安装 MySQL 时&#xff0c;可以通过修改 MySQL 的配置文件来更改默认的 3306 端口。以下是具体步骤&#xff1a; 1、vim /etc/my.cnf 打开配置文件后&#xff0c;找到 [mysqld] 部分&#xff0c;这是 MySQL 服务的配置区域。在该部分中&#xff0c;找到或添加以下内容&a…...

编程日记 2025/9/15 0:33:25

基于eBPF的全栈可观测性系统：重新定义云原生环境诊断范式

引言&#xff1a;突破传统APM的性能桎梏 某头部电商平台采用eBPF重构可观测体系后&#xff0c;生产环境指标采集性能提升327倍&#xff1a;百万QPS场景下传统代理模式CPU占用达63%&#xff0c;而eBPF直采方案仅消耗0.9%内核资源。核心业务的全链路追踪时延从900μs降至18μs&a…...

编程日记 2025/9/15 10:56:40

C语言基础学习指南：从零入门到实战应用——适合零基础学习者与进阶巩固

目录 一、C语言概述与开发环境搭建 二、核心语法与数据类型 三、控制结构与运算符 四、函数与模块化编程 五、指针与内存管理 六、实践建议与资源推荐 结语 一、C语言概述与开发环境搭建 C语言是一种高效、灵活的通用编程语言&#xff0c;广泛应用于系统开发、嵌入式系…...

编程日记 2025/9/15 10:56:39

软件架构设计：架构风格

一、架构风格概述 定义 架构风格是对软件系统整体结构和组织方式的抽象描述&#xff0c;提供了一套通用的设计原则和模式。 作用 提高系统的可维护性、可扩展性和可复用性。帮助开发团队在设计和实现过程中保持一致性和规范性。 常见架构风格 分层架构、MVC架构、微服务架构、…...

编程日记 2025/9/15 10:56:37

为啥vue3设计不直接用toRefs,而是reactive+toRefs

Vue 3 设计中将 reactive 和 toRefs 结合使用而非直接使用 toRefs&#xff0c;主要基于以下设计考量&#xff1a; 1. 响应式粒度的不同需求 reactive 适用于对象整体响应式 reactive 会为整个对象创建响应式代理&#xff0c;自动追踪对象内部所有属性的变化。这种设计适用于需要…...

编程日记 2025/9/15 10:56:36

go 网络编程 websocket gorilla/websocket

在 Go 语言中&#xff0c;你可以使用标准库中的 net/http 包和第三方库 gorilla/websocket 来实现一个 WebSocket 服务器。gorilla/websocket 库提供了对 WebSocket 协议的高级抽象&#xff0c;使得处理 WebSocket 连接变得相对简单。 package mainimport ("fmt"&qu…...

编程日记 2025/9/15 7:49:40

【微服务】springboot远程docker进行debug调试使用详解

目录 一、前言 二、线上问题常用解决方案 2.1 微服务线上运行中常见的问题 2.2 微服务线上问题解决方案 2.3 远程debug概述 2.3.1 远程debug原理 2.3.2 远程debug优势 三、实验环境准备 3.1 搭建springboot工程 3.1.1 工程结构 3.1.2 引入基础依赖 3.1.3 添加配置文…...

编程日记 2025/9/16 11:33:11

CORS跨域问题常见解决办法

1.引言 在现代前端开发中&#xff0c;跨域资源共享&#xff08;Cross-Origin Resource Sharing, CORS&#xff09;是一种通过设置 HTTP 头来允许或阻止不同源之间的资源访问的机制。浏览器出于安全考虑&#xff0c;默认情况下会阻止跨域请求。本文将详细介绍 CORS 的工作原理、…...

编程日记 2025/9/17 23:40:38

并查集算法篇上期：并查集原理及实现

引入 那么我们在介绍我们并查集的原理之前&#xff0c;我们先来看一下并查集所应用的一个场景&#xff1a;那么现在我们有一个长度为n的数组&#xff0c;他们分别属于不同的集合&#xff0c;那么现在我们要查询数组当中某个元素和其他元素是否处于同一集合当中&#xff0c;或者…...

编程日记 2025/9/15 10:56:29

树莓派4基于Debian GNU/Linux 12 (Bookworm)添加多个静态ipv4网络

假设之前已经配置了 在eth0接口配置了192.168.0.100&#xff0c;现在要在同一接口&#xff08;例如 eth0&#xff09;上添加 192.168.1.100&#xff1a; 直接编辑 /etc/NetworkManager/system-connections/ 中相应的连接文件&#xff08;该文件的文件名通常与连接名称相同&…...

编程日记 2025/9/15 10:56:27

「正版软件」PDF Reader - 专业 PDF 编辑阅读工具软件

PDF Reader 轻松查看、编辑、批注、转换、数字签名和管理 PDF 文件&#xff0c;以提高工作效率并充分利用 PDF 文档。 像专业人士一样编辑 PDF 编辑 PDF 文本 轻松添加、删除或修改 PDF 文档中的原始文本以更正错误。自定义文本属性&#xff0c;如颜色、字体大小、样式和粗细。…...

编程日记 2025/9/17 9:57:56

Python连接MySQL数据库图文教程，Python连接数据库MySQL入门教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1. 环境准备1.1安装 Python1.2选择开发环境1.3安装 MySQL 数据库1.4 安装 pymysql 库 2. 连接数据库3. 数据库基本操作3.1 创建数据库3.2 创建表3.3 插入数据3.…...

编程日记 2025/9/15 10:56:25

Websocket——心跳检测

1. 前言&#xff1a;为什么需要心跳机制&#xff1f; 在现代的实时网络应用中&#xff0c;保持客户端和服务端的连接稳定性是非常重要的。尤其是在长时间的网络连接中&#xff0c;存在一些异常情况&#xff0c;导致服务端无法及时感知到客户端的断开&#xff0c;可能造成不必要…...

编程日记 2025/9/14 16:34:24

量子计算驱动的金融衍生品定价革命：突破传统蒙特卡洛模拟的性能边界

引言&#xff1a;金融计算的算力困局 某国际投行采用128量子位处理器对亚洲期权组合定价时&#xff0c;其量子振幅估计算法在2.7秒内完成传统GPU集群需要68小时的计算任务。在蒙特卡洛路径模拟实验中&#xff0c;量子随机游走算法将10,000维衍生品的价格收敛速度提升4个数量级…...

编程日记 2025/9/15 7:29:02

文心智能体平台已全面接入DeepSeek模型，全部免费！

文心智能体平台已全面接入DeepSeek模型&#xff01;即日起&#xff0c;您可以在创建智能体时&#xff0c;自由选择所需要的模型&#xff0c;欢迎大家体验。 ✅ ‌零成本体验‌&#xff1a;当前阶段所有用户可免费使用‌DeepSeek模型。‌ ✅ ‌‌智能适配&#xff1a;4款DeepSe…...

编程日记 2025/9/18 15:13:55

DuodooBMS源码解读之 odoo_phoenix_alarm模块

Odoo18 扩展模块声光报警器用户使用手册 一、模块概述 本扩展模块是基于 Odoo18 原生系统进行开发的&#xff0c;主要用于实现与上位声光报警设备的通讯功能。通过该模块&#xff0c;用户可以方便地向设备发送指令&#xff0c;控制设备的声音、灯光等操作。本手册将详细介绍该…...

编程日记 2025/9/15 10:56:19

docker从容器中cp到本地、cp本地到容器

在 Docker 中&#xff0c;你可以使用 docker cp 命令从容器中复制文件到本地主机。以下是具体步骤&#xff1a; 1. 查找容器 ID 或名称 首先&#xff0c;你需要知道容器的 ID 或名称。你可以使用以下命令列出所有正在运行的容器&#xff1a; docker ps 这将显示所有正在运行…...

编程日记 2025/9/18 17:26:54

网络工程师 （49）UDP协议

前言 UDP协议&#xff0c;即用户数据报协议&#xff08;User Datagram Protocol&#xff09;&#xff0c;是一种无连接的、不可靠的、面向报文的传输层通信协议。 一、基本特点 无连接性&#xff1a;UDP在发送数据之前不需要与目标设备建立连接&#xff0c;也无需在数据发送结束…...

编程日记 2025/9/17 23:15:47

1.20作业

1 mfw(git泄露) ./git&#xff0c;原本以为点了链接下了index文件&#xff0c;就可以打开看源码&#xff0c;结果解析不了 老老实实用了githacker githacker --url --output 1 assert() 断言(assert)的用法 | 菜鸟教程 命令注入: /?page).system(cat ./templates/fl…...

编程日记 2025/9/15 10:56:14

HTML/CSS中交集选择器

1.作用:选中同时符合多个条件的元素 交集就是或的意思 2.语法:选择器1选择器2选择器3......选择器n{} 3.举例: /* 选中:类名为beauty的p元素,此种写法用的非常的多 */p.beauty{color: red;}/* 选中:类名包含rich和beauty的元素 */.rich.beauty{color: blue;} 4.注意: 1.有标签…...

编程日记 2025/9/15 10:56:12

迅为RK3568开发板篇Openharmony配置HDF控制UART-实操-HDF驱动配置UART-修改HCS配置

对于不同的平台&#xff0c;需要在对应的平台目录修改对应的 hcs 文件&#xff0c;接下来示例为在 rk3568下新增 uart4 uart9 uart7 的修改方法。 修改 vendor/hihope/rk3568/hdf_config/khdf/device_info/device_info.hcs 文件&#xff0c;device_info.hcs 中添加以下内容&…...

编程日记 2025/9/15 13:25:30

实时股票行情接口与WebSocket行情接口的应用

实时股票行情接口与WebSocket行情接口的应用 实时股票行情接口是量化交易和投资决策的核心工具之一&#xff0c;行情接口的种类和功能也在不断扩展。介绍几种常见的行情接口&#xff0c;包括实时股票行情接口、Level2行情接口、WebSocket行情接口以及量化行情接口&#xff0c;…...

编程日记 2025/9/15 3:28:58

k8s故障处理经典案例（Classic Case of k8s Fault Handling）

k8s故障处理经典案例 问题描述 kubernetes版本&#xff1a;v1.22.5 部分Pod在新版本发布后一直处于ContainerCreating状态&#xff0c;经过kubectl delete命令删除后一直Terminating状态。 排查过程 遇到问题先查日志 首先进入宿主机&#xff0c;查看三个日志&#xff0c…...

编程日记 2025/9/15 9:56:46

关于uniApp的面试题及其答案解析

我的血液里流淌着战意&#xff01;力量与智慧指引着我&#xff01; 文章目录 1. 什么是uniApp&#xff1f;2. uniApp与原生小程序开发有什么区别&#xff1f;3. 如何使用uniApp实现条件编译&#xff1f;4. uniApp支持哪些平台&#xff0c;各有什么特点&#xff1f;5. 在uniApp中…...

编程日记 2025/9/15 9:56:44

给老系统做个安全检查——Burp SqlMap扫描注入漏洞

背景 在AI技术突飞猛进的今天&#xff0c;类似Cursor之类的工具已经能写出堪比大部分程序员水平的代码了。然而&#xff0c;在我们的代码世界里&#xff0c;仍然有不少"老骥伏枥"的系统在兢兢业业地发光发热。这些祖传系统的代码可能早已过时&#xff0c;架构可能岌…...

编程日记 2025/9/15 9:56:42

langchain系列 - FewShotPromptTemplate 少量示例

导读 环境&#xff1a;OpenEuler、Windows 11、WSL 2、Python 3.12.3 langchain 0.3 背景&#xff1a;前期忙碌的开发阶段结束&#xff0c;需要沉淀自己的应用知识&#xff0c;过一遍LangChain 时间&#xff1a;20250220 说明&#xff1a;技术梳理&#xff0c;针对FewShotP…...

编程日记 2025/9/15 9:56:40

【C语言】fgetpos函数用法介绍

目录 一、函数概述 二、核心参数与数据类型 三、典型应用场景 四、与 ftell() 的对比 五、错误处理与调试 六、进阶示例&#xff1a;多位置标记与恢复 七、注意事项 八、总结 fgetpos() 是C标准库中用于文件操作的关键函数之一&#xff0c;其核心功能是获取文件流的当前…...

编程日记 2025/9/15 9:56:39

《算法基础入门：最常用的算法详解与应用（持续更新实战与面试题）》

1. 排序算法 排序算法是将一组数据按特定的顺序排列起来的算法&#xff0c;常见的有&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;归并排序&#xff08;Merge So…...

编程日记 2025/9/15 9:56:37

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-split_dota.py

split_dota.py ultralytics\data\split_dota.py 目录 split_dota.py 1.所需的库和模块 2.def bbox_iof(polygon1, bbox2, eps1e-6): 3.def load_yolo_dota(data_root, split"train"): 4.def get_windows(im_size, crop_sizes(1024,), gaps(200,), im_rate_t…...

编程日记 2025/9/18 14:00:23

如何使用Python快速开发一个带管理系统界面的网站-解析方案

如果你想用 Python 开发一个 管理系统界面 的网站&#xff0c;并且希望界面美观&#xff0c;可以考虑以下几个框架和库&#xff1a; 1. Streamlit&#xff08;快速、简洁&#xff09; 适合&#xff1a;数据分析、仪表盘、内部管理系统特点&#xff1a; 写法简单&#xff0c;类…...

编程日记 2025/9/15 9:56:32

25年HVV关于0day的面试题

以下是对0day漏洞如何防&#xff0c;基本上是每次HVV中大家都会提到的&#xff0c;今天总结了100day防护手段。 《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkw…...

编程日记 2025/9/15 9:56:30