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

JavaScript元素尺寸与位置

news 来源：原创 2025/6/29 8:34:49

client 家族与 offset 家族

一、client 家族：内容区域 + 内边距

示例代码

应用场景

二、offset 家族：内容区域 + 内边距 + 边框 + 滚动条

示例代码

应用场景

三、综合应用场景

1. 动态调整元素高度

2. 拖拽元素

3. 判断元素是否在视口内

四、注意事项

五、总结

getBoundingClientRect()

一、DOMRect 对象属性

二、关键特性

1. 相对视口坐标系

2. 包含边框和内边距

3. 兼容性与性能

三、与其他方法的对比

四、代码示例

示例：电梯导航

`client` 家族与 `offset` 家族

在 JavaScript 中，元素的尺寸和位置信息可通过 client 和 offset 系列属性获取。这两组属性分别描述了元素不同维度的几何特征，适用于动态布局、拖拽交互、滚动计算等场景。

一、`client` 家族：内容区域 + 内边距

属性	说明
`clientWidth`	元素内容区域的宽度 + 左右内边距（不包含滚动条、边框、外边距）
`clientHeight`	元素内容区域的高度 + 上下内边距（不包含滚动条、边框、外边距）
`clientTop`	元素上边框的宽度（等同于 `border-top-width`）
`clientLeft`	元素左边框的宽度（等同于 `border-left-width`）

示例代码

const box = document.querySelector('.box');
console.log('内容宽度:', box.clientWidth);  // 内容 + padding
console.log('上边框宽度:', box.clientTop);  // 上边框宽度

应用场景

计算元素内部可用空间（如文本容器）。
动态调整内容区域大小（结合滚动条状态）。

二、`offset` 家族：内容区域 + 内边距 + 边框 + 滚动条

属性	说明
`offsetWidth`	元素总宽度（内容 + 内边距 + 边框 + 垂直滚动条宽度，若存在）
`offsetHeight`	元素总高度（内容 + 内边距 + 边框 + 水平滚动条高度，若存在）
`offsetTop`	元素上外边框距离最近定位父元素（或文档）上内边框的垂直距离
`offsetLeft`	元素左外边框距离最近定位父元素（或文档）左内边框的水平距离
`offsetParent`	元素的最近定位祖先元素（`position` 不为 `static`，若没有则指向 `body`）

示例代码

const box = document.querySelector('.box');
console.log('元素总宽度:', box.offsetWidth); // 内容 + padding + border + 滚动条
console.log('距离父元素顶部:', box.offsetTop);

应用场景

获取元素的完整尺寸（包含边框和滚动条）。
计算元素在文档中的绝对位置（结合 offsetParent）。

三、综合应用场景

1. 动态调整元素高度

// 根据窗口高度调整容器高度
function adjustHeight() {const viewportHeight = window.innerHeight;const headerHeight = document.querySelector('header').offsetHeight;const container = document.querySelector('.container');container.style.height = `${viewportHeight - headerHeight}px`;
}
window.addEventListener('resize', adjustHeight);

2. 拖拽元素

let isDragging = false;
let startX, startY, initialX, initialY;document.querySelector('.draggable').addEventListener('mousedown', (e) => {isDragging = true;const rect = e.target.getBoundingClientRect();initialX = rect.left; // 元素当前文档位置initialY = rect.top;startX = e.clientX;   // 鼠标按下位置startY = e.clientY;
});document.addEventListener('mousemove', (e) => {if (!isDragging) return;const deltaX = e.clientX - startX;const deltaY = e.clientY - startY;e.target.style.left = `${initialX + deltaX}px`;e.target.style.top = `${initialY + deltaY}px`;
});document.addEventListener('mouseup', () => {isDragging = false;
});

3. 判断元素是否在视口内

function isElementInViewport(el) {const rect = el.getBoundingClientRect();return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= window.innerHeight &&rect.right <= window.innerWidth);
}

四、注意事项

布局抖动：频繁读取尺寸属性（如 offsetWidth）会强制浏览器重排，应尽量减少读取次数。
隐藏元素：若元素为 display: none，其尺寸属性值为 0。
小数精度：部分浏览器返回的尺寸值可能是小数，需按需取整。
边框与滚动条：滚动条的存在会影响 clientWidth 和 offsetWidth 的值。

五、总结

client 系列：关注元素内容与内边距，适合内部空间计算。
offset 系列：包含边框和滚动条，用于获取元素整体占位或定位。
scroll 系列：处理内容滚动与溢出部分。
组合使用：结合 getBoundingClientRect() 或 offsetParent 实现精准布局控制。

getBoundingClientRect()

Element.getBoundingClientRect() 是 JavaScript 中用于获取元素精确尺寸和位置的核心方法。它返回一个 DOMRect 对象，包含元素相对于浏览器视口（viewport）的几何信息，适用于动态布局计算、滚动检测、交互定位等场景。

一、`DOMRect` 对象属性

调用 getBoundingClientRect() 返回的对象包含以下属性（单位：像素）：

属性	说明
`x`/`left`	元素左边界到视口左侧的距离（`x` 是 `left` 的别名，兼容性稍差）
`y`/`top`	元素上边界到视口顶部的距离（`y` 是 `top` 的别名，兼容性稍差）
`right`	元素右边界到视口左侧的距离（`right = left + width`）
`bottom`	元素下边界到视口顶部的距离（`bottom = top + height`）
`width`	元素的宽度（包含 `padding` + `border`，不包含 `margin`）
`height`	元素的高度（包含 `padding` + `border`，不包含 `margin`）

二、关键特性

1. 相对视口坐标系

所有值基于视口左上角计算，页面滚动会改变结果（视口位置动态变化）。

转换为文档坐标（绝对位置）：

const rect = element.getBoundingClientRect();
const absoluteLeft = rect.left + window.scrollX;
const absoluteTop = rect.top + window.scrollY;

2. 包含边框和内边距

width 和 height 包含元素的 padding 和 border，与 offsetWidth/offsetHeight 一致。
对比其他尺寸属性：

属性 包含内容
clientWidth 内容 + padding（不含边框/滚动条）
offsetWidth 内容 + padding + border
scrollWidth 实际内容宽度（含溢出部分）

属性	包含内容
`clientWidth`	内容 + padding（不含边框/滚动条）
`offsetWidth`	内容 + padding + border
`scrollWidth`	实际内容宽度（含溢出部分）

3. 兼容性与性能

兼容性：所有现代浏览器均支持，包括 IE9+。
性能：频繁调用可能触发重排（reflow），建议缓存结果或使用优化策略（如防抖）。

三、与其他方法的对比

方法	特点
`offsetTop`/`offsetLeft`	返回相对于最近定位父元素的偏移，不提供完整尺寸信息
`clientWidth`/`clientHeight`	仅包含内容 + padding，无位置信息
`scrollIntoView()`	滚动元素到视口，但无法直接获取位置数据

四、代码示例

const element = document.getElementById('target');
const rect = element.getBoundingClientRect();console.log('元素尺寸:', rect.width, 'x', rect.height);
console.log('视口内位置:', rect.left, rect.top);
console.log('文档绝对位置:', rect.left + window.scrollX, rect.top + window.scrollY);

示例：电梯导航

  <!-- 电梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鲜好物</a></li><li><a href="javascript:;" data-name="popular">人气推荐</a></li><li><a href="javascript:;" data-name="brand">热门品牌</a></li><li><a href="javascript:;" data-name="topic">最新专题</a></li><li><a href="javascript:;" data-name="backTop"><i class="sprites"></i>顶部</a></li></ul></div><script>//导航隐藏与显示const elevator = document.querySelector('.xtx-elevator')const entry = document.querySelector('.xtx_entry')window.addEventListener('scroll', function () {let scrolltop = document.documentElement.scrollTopelevator.style.opacity = scrolltop > entry.offsetTop ? 1 : 0})function clear() {if (document.querySelector('.xtx-elevator .active'))document.querySelector('.xtx-elevator .active').classList.remove('active')}//点击导航跳转const ul = document.querySelector('.xtx-elevator-list')ul.addEventListener('click', function (e) {clear()e.target.classList.add('active')if (e.target.dataset.name === 'backTop') {document.documentElement.scrollTop = 0}else {const distance = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTopdocument.documentElement.scrollTop = distance}})//页面滚动更新导航const newsTop = Math.floor(document.querySelector('.xtx_goods_new').offsetTop)const popularTop = Math.floor(document.querySelector('.xtx_goods_popular').offsetTop)const brandTop = Math.floor(document.querySelector('.xtx_goods_brand').offsetTop)const topicTop = Math.floor(document.querySelector('.xtx_goods_topic').offsetTop)window.addEventListener('scroll', function () {let scrolltop = document.documentElement.scrollTopclear()if (scrolltop >= newsTop && scrolltop < popularTop) {document.querySelector('[data-name = new]').classList.add('active')}else if (scrolltop >= popularTop && scrolltop < brandTop) {document.querySelector('[data-name = popular]').classList.add('active')}else if (scrolltop >= brandTop && scrolltop < topicTop) {document.querySelector('[data-name = brand]').classList.add('active')}else if (scrolltop >= topicTop) {document.querySelector('[data-name = topic]').classList.add('active')}})</script>

JavaScript元素尺寸与位置

目录 client 家族与 offset 家族一、client 家族：内容区域内边距示例代码应用场景二、offset 家族：内容区域内边距边框滚动条示例代码应用场景三、综合应用场景 1. 动态调整元素高度 2. 拖拽元素 3. 判断元素是否在视口内四…...

编程日记 2025/6/29 8:34:49

IS-IS：单区域集成配置与多区域集成配置

一、IS-IS概述 IS-IS（Intermediate System to Intermediate System） 是一种链路状态内部网关协议（IGP），设计用于自治系统（AS）内部的路由选择。最初由ISO为OSI模型的无连接网络服务（…...

编程日记 2025/6/28 3:45:02

添加底图 viewer.imageryLayers.addImageryProvider(imageryProvider)常见 ImageryProvider 实现类 ArcGisMapServerImageryProvider：用于从 ArcGIS Server 获取影像数据。 BingMapsImageryProvider：用于从 Bing Maps 获取影像数据。 OpenStreetMapIm…...

编程日记 2025/6/29 7:48:27

【学Rust写CAD】22 双圆径向渐变的结构体(two_circle_radial_gradient.rs)

源码 //two_circle_radial_gradient.rs //! 定义双圆径向渐变的结构体和相关功能/// 表示一个双圆径向渐变的源 /// /// 该结构体描述了两个圆之间的渐变，支持矩阵变换和颜色查找表优化 #[derive(Debug, Clone, PartialEq)] pub struct TwoCircleRadialGradientSou…...

编程日记 2025/6/28 1:20:21

基于SpringAOP面向切面编程的一些实践（日志记录、权限控制、统一异常处理）

前言 Spring框架中的AOP（面向切面编程） 通过上面的文章我们了解到了AOP面向切面编程的思想，接下来通过一些实践，去更加深入的了解我们所学到的知识。简单回顾一下AOP的常见应用场景日志记录：记录方法入参、返回值、执…...

编程日记 2025/6/29 7:32:25

acwing 5438. 密接牛追踪2

农夫约翰有 NN 头奶牛排成一排，从左到右依次编号为 1∼N。不幸的是，有一种传染病正在蔓延。最开始时，只有一部分奶牛受到感染。每经过一个晚上，受感染的牛就会将病毒传染给它左右两侧的牛（如果有的话&#xff09…...

编程日记 2025/6/28 11:52:55

【Linux】线程池

目录线程池日志线程池在程序中，会预先创建一批线程，在内部会有一个叫任务队列task_queue的东西，未来如果有任务要处理，就把任务push到任务队列里，然后自动有线程去任务队列里拿任务并处理，如果没有任…...

编程日记 2025/6/29 7:33:50

【11408】考研英语长难句解析策略：三步断开与简化法，快速提升阅读得分

2025.04.01 英语断开长难句分析主谓心得简化长难句心得英语断开长难句在一些长难句中，有时从句的连词会被省略，且没有标点将其隔开，此时就无法通过标点和连接词来断开长难句。那么我们只能够通过分析主谓来断开长难句。分析主谓谓语…...

编程日记 2025/6/28 5:45:26

Spring Cloud 2023.x安全升级：OAuth2.1与JWT动态轮换实战

引言：当安全遇上云原生，零停机密钥轮换成为刚需在微服务架构中，OAuth2.1与JWT已成为身份验证的黄金标准，但传统方案存在两大痛点： 密钥轮换风险：手动替换JWT密钥需重启服务，导致短暂鉴权中断&…...

编程日记 2025/6/28 6:29:33

Vue3.5 企业级管理系统实战（十二）：组件尺寸及多语言实现

1 组件尺寸切换 1.1 用 Pinia 进行 Size 的持久化存储首先，在 src/plugins/element.ts 中增加 size 类型，代码如下： //src/plugins/element.ts import type { App } from "vue";import { ElMessage, ElNotification, ElMessageBo…...

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

15：00开始面试，15：08就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到8月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/27 14:44:14

Java学习路线 - 第三阶段笔记

Java学习路线 - 第三阶段笔记 Java高级特性（2-3个月） 1. 集合框架深入 1.1 List详解 ArrayList：基于动态数组实现，随机访问高效，插入删除效率低LinkedList：基于双向链表实现，插入删除高效&a…...

编程日记 2025/6/28 3:41:04

【无标题】Scala函数基础

函数和方法的区别 1） 核心概念 （1） 为完成某一功能的程序语句的集合，称为函数。 （2） 类中的函数称之方法。 2） 案例实操 （1） Scala 语言可以在任何的语法结构中声明…...

编程日记 2025/6/28 4:55:39

微信登录、商品浏览前瞻

一.业务效果二.所需技术...

编程日记 2025/6/28 6:01:23

自动化工作流工具的综合对比与推荐

最近收到很多朋友私信我说：“刷短视频的时候，总是刷到自动化工作流的工具，有好多直播间都在宣传，不知道哪款工具好”。我花了点时间，做了一下测试，大家可以参考一下，以下内容： 以下…...

编程日记 2025/6/28 1:20:30

可实现黑屏与蓝屏反应的屏幕隐私保护软件分享

软件介绍在信息安全备受关注的当下，一款能够有效保护屏幕隐私的软件 —— 防窥助手，悄然问世。它由吾爱的遗憾迟香精心开发，为用户的屏幕隐私防护带来全新体验。独特原理，精准守护防窥助手的运行原理相当巧妙，它…...

编程日记 2025/6/28 5:00:53

PERL开发环境搭建＞＞Windows,Linux,Mac OS

特点简单快速 perl解释器直接对源代码程序解释执行,是一个解释性的语言, 不需要编译器和链接器来运行代码>>速度快灵活借鉴了C/C, Basic, Pascal, awk, sed等多种语言, 定位于实用性语言,既具备了脚本语言的所有功能,也添加了高级语言功能开源.免费没有&qu…...

编程日记 2025/6/28 3:51:17

【实战】渗透测试下的传输命令

目录 bitsadmin certutil curl ftp js nc perl php py scp vbs wget WindowsDefender bitsadmin 不支持https、ftp协议，php python带的服务器会出错 >bitsadmin /transfer n http://192.168.1.192/Client.exe e:\1.exe >bitsadmin /rawreturn /…...

编程日记 2025/6/28 5:06:57

JSON 基础知识（一）

第一部分：JSON 基础知识 📢 快速掌握 JSON！文章视频双管齐下 🚀 如果你觉得阅读文章太慢，或者更喜欢边看边学的方式，不妨直接观看我录制的 JSON 课程视频！🎬 视频里会用更直观…...

编程日记 2025/6/28 6:34:04

nodejs：midi-writer-js 将基金净值数据转换为 midi 文件

开放式基金是没有公布每日交易量的。 /funds/data/660008.csv 文件开头： date,jz,ljjz 2016-01-04,1.1141,1.1141 2016-01-05,1.1161,1.1161 2016-01-06,1.1350,1.1350 这是一个将开放式基金数据转换为 MIDI音乐的 js 程序示例。该程序将基金净值映射为 MIDI音符的…...

编程日记 2025/6/28 1:20:25

从零实现Json-Rpc框架】- 项目实现 - 服务端registrydiscovery实现

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/6/28 1:20:28

自适应二值化与形态学变换在图像颜色识别与替换中的应用解析

目录前言一、自适应二值化1.1 取均值 ADAPTIVE_THRESH_MEAN_C1.2 高斯加权求和 ADAPTIVE_THRESH_GAUSSIAN_C1.2.1 一维高斯分布1.2.2 二维高速分布1.2.3 二维高斯分布权重计算规则 1.2.3.1 用户设置了σ1.2.3.2 用户没有设置σ1.3 代码二、形态学变换2.1 核 2.2 腐蚀2.3 膨胀…...

编程日记 2025/6/28 1:20:24

JsonCpp 处理 JSON（现代 C++ 方案）（三）

第三部分：JsonCpp 处理 JSON（现代 C++ 方案） 📢 快速掌握 JSON！文章 + 视频双管齐下 🚀 如果你觉得阅读文章太慢，或者更喜欢边看边学的方式，不妨直接观看我录制的 JsonCpp 课程视频！🎬 视频里会用更直观的方式讲解 JsonCpp 的核心概念、实战技巧，并配有动手演…...

编程日记 2025/6/28 1:20:22

flutter 曲线学习使用第三方插件实现左右滑动

flutter 曲线的使用实现左右滑动 TemperatureChartPage() TemperatureChartPage2() – 不太完善方法 ChartDrawPage import package:doluyo/dly_package/widget/dly_widget.dart; import package:fl_chart/fl_chart.dart; import package:flutter/material.dart; impor…...

编程日记 2025/6/28 1:20:23

【WRF工具】GIS4WRF详细介绍：配置 WPS/WRF

【WRF工具】GIS4WRF详细介绍 QGIS-GIS4WRF安装（Installation）安装 QGIS安装 GIS4WRF GIS4WRF 配置(Configuration)一、如何进入配置界面二、可配置内容1️⃣ 设置工作目录2️⃣ 与 WPS/WRF 集成3️⃣ 与 NCAR 数据档案集成参考 GIS4WRF 是一个在 QGIS 中…...

编程日记 2025/6/28 1:20:27

【自用记录】本地关联GitHub以及遇到的问题

最近终于又想起GitHub，想上传代码和项目到仓库里。由于很早之前有在本地连接过GitHub（但没怎么用），现在需要重新搞起（操作忘得差不多）。在看教程实操的过程中遇到了一些小问题，遂记录一下。前…...

编程日记 2025/6/28 1:20:29

小程序中跨页面组件共享数据的实现方法与对比

小程序中跨页面/组件共享数据的实现方法与对比在小程序开发中，实现不同页面或组件之间的数据共享是常见需求。以下是几种主要实现方式的详细总结与对比分析： 一、常用数据共享方法全局变量（getApp()）、本地缓存（w…...

编程日记 2025/6/28 3:00:50

ngx_http_core_merge_srv_conf

定义在 src\http\ngx_http_core_module.c static char * ngx_http_core_merge_srv_conf(ngx_conf_t *cf, void *parent, void *child) {ngx_http_core_srv_conf_t *prev parent;ngx_http_core_srv_conf_t *conf child;ngx_str_t name;ngx_http_server_name_t…...

编程日记 2025/6/28 3:57:54

如何在中科方德llinux系统上离线安装salt-minion

1，我的系统是什么国产操作系统中科方德 NFSChina Server release 4.0.240701 (RTM4-G320) 2，首先准备好两个安装包 salt-minion-2015.8.8-2.el7.noarch.rpm和salt-2015.8.8-2.el7.noarch.rpm 后者这个是前者的依赖项。所以先安装salt-2015.8.8-2.e…...

编程日记 2025/6/28 6:14:25

RAG系统实战：当检索为空时，如何实现生成模块的优雅降级（Fallback）？

目录 RAG系统实战：当检索为空时，如何实现生成模块的优雅降级（Fallback）？ 一、为什么需要优雅降级（Fallback）？ 二、常用的优雅降级策略策略一：预设后备提示&#xff0…...

编程日记 2025/6/28 1:22:13

输电线路航空标志球：低空飞行的安全路标 / 恒峰智慧科技

在现代社会，随着航空业的快速发展，低空飞行活动日益频繁。为了确保飞行安全，避免飞机与高压电线等障碍物发生碰撞，输电线路航空标志球应运而生。这种装置被广泛应用于高压输电线路上，尤其是超高压和跨江输电线&#xf…...

编程日记 2025/6/28 5:37:58

【SPP】蓝牙 SDP 协议在SPP中的互操作性解析

在蓝牙通信体系中，服务发现协议（SDP, Service Discovery Protocol）扮演着 "服务目录" 的核心角色。对于串口通信协议（SPP, Serial Port Profile）而言，SDP 服务记录是设备间建立串口连接的基础&am…...

编程日记 2025/6/28 2:24:11

本地部署vanna ai+通过http请求调用vanna

本地部署vanna ai ① 准备python环境，推荐最新的python12、13版本 ② 安装vanna库我这里安装的python环境是python312 进入目录python312/Scripts，在该目录下的命令行窗口中输入以下命令：pip jinstall vanna pip install vanna③ 配置向…...

编程日记 2025/6/28 5:08:29

seq2seq

理解 transformer 中的 encoder decoder 详细的 transformer 教程见：【极速版 – 大模型入门到进阶】Transformer 文章目录 🌊 Encoder: 给一排向量输出另外一排向量🌊 Encoder vs. Decoder: multi-head attention vs. masked multi-head at…...

编程日记 2025/6/28 5:03:48

C++ ---- 虚继承

一、什么是虚继承虚继承就是子类中只有一份间接父类的数据。用于解决多继承中的父类为非虚继承时出现的二义性问题，即菱形继承问题。继承方式需要加上virtual关键字。二、虚继承的特性以菱形继承为例： 1.不使用虚继承根据输出的大小和关系图&…...

编程日记 2025/6/28 7:12:34

COMSOL多层圆片随机堆积三维模型

构建多层圆片随机堆积三维模型可用于材料、化工、土木、生物医学等多领域的研究，如复合材料设计、催化剂载体、颗粒物堆积研究等。本案例介绍在COMSOL内建立三维圆片堆积模型。三维圆片堆积模型可采用CAD纤维密堆积3D插件建立，参数设置如图所示&#…...

编程日记 2025/6/28 4:11:20

PHP 开发API接口签名验证

就安全来说，所有客户端和服务器端的通信内容应该都要通过加密通道(HTTPS)传输，明文的HTTP通道将会是man-in-the- middle及其各种变种攻击的温床。所谓man-in-the-middle攻击简单讲就是指恶意的黑客可以在客户端和服务器端的明文通信通道上做手脚&#x…...

编程日记 2025/6/28 4:50:01

Web开发-JavaEE应用ORM框架SQL预编译JDBCMyBatisHibernateMaven

知识点： 0、安全开发-JavaEE-构建工具-Maven 1、安全开发-JavaEE-ORM框架-JDBC 2、安全开发-JavaEE-ORM框架-Mybatis 3、安全开发-JavaEE-ORM框架-Hibernate 4、安全开发-JavaEE-ORM框架-SQL注入&预编译一、演示案例-WEB开发-JavaEE-构建工具-Maven IDEA配置m…...

编程日记 2025/6/28 5:18:27

软考-数据库系统工程师第四版pdf

软考-数据库系统工程师第四版pdf git中的文件相对没有那么清楚，网盘的有高清版 github下载这里我给出仓库地址链接: https://github.com/yaodada123/ruankao-pdf https://github.com/yaodada123/ruankao-pdf gitee下载 https://gitee.com/yao-hengchao/ruank…...

编程日记 2025/6/28 4:19:42

扫描仪+文档pdf编辑器+pdf格式转换器

小扫描仪是一款集“扫描仪文档pdf编辑器pdf格式转换器”于一体的多功能扫描软件，软件功能丰富，而且目前是免费，功能包括扫描、编辑、转换三部分。扫描：扫描的功能包括文档扫描、身份证扫描、护照扫描、书籍扫描、OCR和二维码。扫…...

编程日记 2025/6/28 3:24:24

【stm32--HAL库DMA+USART+空闲中断不定长收发数据】

串口通信-Hal库实现不定长度收发，DMAUSART DMA串口STM32CUBEMX配置（工程创建）基础配置时钟配置工程配置代码编写现象 DMA 在正式配置之前，我们先来一起简单了解一下DMA。DMA（Direct Memory Access，直接内…...

编程日记 2025/6/28 6:19:38

5G-A技术

最近的iOS 18.4 推送了新功能，最引人注目的便是这个5G-A的这个功能，那什么是5G-A呢 ？ 目前北京四环内还是有能显示出5G-A标志的。 5G-A 🌐 一句话概括： 5G-A 更快的速度更低的延迟更强的AI能力更智能的网…...

编程日记 2025/6/28 5:49:13

Vue 组件 - 动态组件

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 组件 - 动态组件目录动态组件选项卡页面示例更简单写法增加输入框弥补措施总结动态组件选项卡页面示例功能：选项卡功能，设置导航点击哪个显示相应页面。设置三个全局组件&#…...

编程日记 2025/6/28 7:05:57

ffmpeg滤镜使用

ffmpeg实现画中画效果 FFmpeg中，可以通过overlay将多个视频流、多个多媒体采集设备、多个视频文件合并到一个界面中，生成画中画的效果 FFmpeg 滤镜 overlay 基本参数 x和y x坐标和Y坐标 eof action 遇到 eof表示时的处理方式，默认为重复。…...

编程日记 2025/6/28 1:22:20

【MVC简介-产生原因、演变历史、核心思想、组成部分、使用场景】

MVC简介产生原因： MVC（Model-View-Controller）模式诞生于20世纪70年代，由Trygve Reenskaug在施乐帕克研究中心（Xerox PARC）为Smalltalk语言设计，目的是解决图形用户界面（GUI&…...

编程日记 2025/6/28 1:22:25

基于大模型的房间隔缺损手术全流程预测与方案优化研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的与目标 1.3 研究方法与创新点二、房间隔缺损概述 2.1 房间隔缺损定义与分类 2.2 发病机制与病理生理 2.3 流行病学特征三、大模型在房间隔缺损预测中的应用原理 3.1 大模型技术简介 3.2 数据收集与预处理 3.3 模型…...

编程日记 2025/6/28 1:22:30

什么是 CSSD?

文章目录一、什么是 CSSD？CSSD 的职责二、CSSD 是如何工作的？三、CSSD 为什么会重启节点？情况一：网络和存储都断联（失联）情况二：收到其他节点对自己的踢出通知（外部 fencing&#…...

编程日记 2025/6/28 1:21:57

uniapp APP端在线升级（简版）

设计思路： 1.版本比较：应用程序检查其当前版本与远程服务器上可用的最新版本 2. 更新状态指示：如果应用程序是不是最新的版本，则页面提示下载最新版本。 3.下载启动：通过plus.downloader.createDownload()启动新应用…...

编程日记 2025/6/28 3:52:32

2024年蓝桥杯Java B组省赛真题超详解析-分布式队列

问题：你需要回答在某个时刻，队列中有多少个元素具有可见性方案：跟踪每个副节点已经同步到主节点队列的元素数量，并找出所有副节点中同步到的最少元素数量，这个数量即为所有副节点都已经同步的元素数量。解析&#…...

编程日记 2025/6/28 6:18:55

Vue3入门

环境准备: node.js vscode or webstorm 哪个熟悉用哪个这两个都是傻瓜式安装浏览器直接搜索下载即可安装: 安装完node.js之后按住快捷键 winR 打开命令提示符输入node 将显示版本信息接着我们通过 vite 构建vue3工程优点: 轻量快速的热重载（HMR&#xf…...

编程日记 2025/6/28 4:34:30

client 家族与 offset 家族

一、client 家族：内容区域 + 内边距

示例代码

应用场景

二、offset 家族：内容区域 + 内边距 + 边框 + 滚动条

示例代码

应用场景

三、综合应用场景

1. 动态调整元素高度

2. 拖拽元素

3. 判断元素是否在视口内

四、注意事项

五、总结

getBoundingClientRect()

一、DOMRect 对象属性

二、关键特性

1. 相对视口坐标系

2. 包含边框和内边距

3. 兼容性与性能

三、与其他方法的对比

四、代码示例

示例：电梯导航

相关文章：

`client` 家族与 `offset` 家族

一、`client` 家族：内容区域 + 内边距

二、`offset` 家族：内容区域 + 内边距 + 边框 + 滚动条

一、`DOMRect` 对象属性