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

CSS 美化页面（五）

article 2026/1/18 9:20:00

一、position属性

属性值‌	‌描述‌	‌应用场景‌
`static`	默认定位方式，元素遵循文档流正常排列，`top`/`right`/`bottom`/`left` 属性无效‌。	普通文档流布局，默认布局，无需特殊定位。
`relative`	相对定位，相对于元素原本位置进行偏移，但仍保留原空间‌。	微调元素位置，或作为子元素绝对定位的基准（父元素设为 `relative`）‌。
`absolute`	绝对定位，相对于最近的非 `static` 祖先元素定位，脱离文档流‌。	创建浮动菜单、对话框，或重构页面布局（需配合父级 `relative` 使用）‌。
`fixed`	固定定位，相对于视口定位，不随页面滚动改变位置‌。	固定导航栏、回到顶部按钮等需要始终可见的元素‌。
`sticky`	粘性定位，在特定滚动阈值前表现为 `relative`，超过后变为 `fixed`‌。	实现滚动时固定表头、侧边导航栏等效果‌。

二、定位的应用

1、static 默认定位

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>默认定位示例</title><style>/* 父容器样式 */.container {width: 300px;height: auto;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;padding: 10px; /* 内边距 */}/* 第一个盒子：默认定位 */.box1 {width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */margin-bottom: 10px; /* 下方间距 */}/* 第二个盒子：默认定位 */.box2 {width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */margin-bottom: 10px; /* 下方间距 */}/* 第三个盒子：默认定位 */.box3 {width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */}</style>
</head>
<body><div class="container"><div class="box1">默认定位1</div><div class="box2">默认定位2</div><div class="box3">默认定位3</div></div>
</body>
</html>

排列方式：

三个盒子按照正常的文档流从上到下排列。
每个盒子之间有一定的间距（通过 margin-bottom 设置）。

布局特点：

没有使用任何定位属性，盒子不会发生重叠，也不会偏移。

2、relative相对定位

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位示例</title><style>/* 父容器样式 */.container {position: relative; /* 父容器设置为相对定位 */width: 300px;height: auto;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;padding: 10px; /* 内边距 */}/* 第一个盒子：相对定位 */.box1 {position: relative;width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */top: 10px; /* 向下偏移 10px */left: 10px; /* 向右偏移 10px */}/* 第二个盒子：相对定位 */.box2 {position: relative;width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */top: 20px; /* 向下偏移 20px */left: 20px; /* 向右偏移 20px */}/* 第三个盒子：相对定位 */.box3 {position: relative;width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */top: 30px; /* 向下偏移 30px */left: 30px; /* 向右偏移 30px */}</style>
</head>
<body><div class="container"><div class="box1">相对定位1</div><div class="box2">相对定位2</div><div class="box3">相对定位3</div></div>
</body>
</html>

第一个盒子（绿色）：
相对于自身默认位置向下偏移 10px，向右偏移 10px。

第二个盒子（橙色）：
相对于自身默认位置向下偏移 20px，向右偏移 20px。

第三个盒子（蓝色）：
相对于自身默认位置向下偏移 30px，向右偏移 30px。

注意事项

相对定位的特点：

元素仍然保留在文档流中，偏移后不会影响其他元素的布局。
偏移的效果仅影响元素的视觉位置。

重叠问题：

如果偏移量较大，可能会导致元素之间发生重叠。

3、absolute绝对定位

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位示例</title><style>/* 父容器样式 */.container {position: relative; /* 父容器设置为相对定位，作为子元素的定位参考点 */width: 300px;height: 300px;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;}/* 第一个盒子：绝对定位 */.box1 {position: absolute;width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */top: 10px; /* 距离父容器顶部 10px */left: 10px; /* 距离父容器左侧 10px */}/* 第二个盒子：绝对定位 */.box2 {position: absolute;width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */top: 50px; /* 距离父容器顶部 50px */right: 10px; /* 距离父容器右侧 10px */}/* 第三个盒子：绝对定位 */.box3 {position: absolute;width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */bottom: 10px; /* 距离父容器底部 10px */left: 50px; /* 距离父容器左侧 50px */}</style>
</head>
<body><div class="container"><div class="box1">绝对定位1</div><div class="box2">绝对定位2</div><div class="box3">绝对定位3</div></div>
</body>
</html>

第一个盒子（绿色）：
位于父容器的左上角，距离顶部 10px，左侧 10px。

第二个盒子（橙色）：
位于父容器的右上角，距离顶部 50px，右侧 10px。

第三个盒子（蓝色）：
位于父容器的左下角，距离底部 10px，左侧 50px。

注意事项

定位参考点：

绝对定位的元素会相对于最近的定位祖先（position: relative、absolute 或 fixed 的父级元素）进行定位。
如果没有定位祖先，则相对于 html（视口）进行定位。

脱离文档流：
绝对定位的元素不会占据文档流中的空间，因此可能会与其他元素重叠。

灵活布局：
绝对定位适合用于弹窗、工具提示、精确布局等场景。

4、fix固定定位

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定定位示例</title><style>/* 父容器样式 */.container {width: 300px;height: 300px;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;text-align: center;}/* 第一个盒子：固定定位 */.box1 {position: fixed;width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */top: 10px; /* 距离视口顶部 10px */left: 10px; /* 距离视口左侧 10px */}/* 第二个盒子：固定定位 */.box2 {position: fixed;width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */top: 10px; /* 距离视口顶部 10px */right: 10px; /* 距离视口右侧 10px */}/* 第三个盒子：固定定位 */.box3 {position: fixed;width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */bottom: 10px; /* 距离视口底部 10px */left: 10px; /* 距离视口左侧 10px */}</style>
</head>
<body><div class="container"><p>滚动页面，观察固定定位效果。</p></div><div class="box1">固定定位</div><div class="box2">固定定位</div><div class="box3">固定定位</div>
</body>
</html>

第一个盒子（绿色）：
固定在视口的左上角，距离顶部 10px，左侧 10px。

第二个盒子（橙色）：
固定在视口的右上角，距离顶部 10px，右侧 10px。

第三个盒子（蓝色）：
固定在视口的左下角，距离底部 10px，左侧 10px。

注意事项

固定定位的特点：

元素相对于视口定位，不受父容器的影响。
页面滚动时，固定定位的元素始终保持在指定位置。

适用场景：

固定导航栏。
返回顶部按钮。
固定广告或提示框。

重叠问题：

如果多个固定定位的元素位置重叠，可以通过 z-index 属性控制它们的层级。

5、sticky粘性定位

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粘性定位示例</title><style>/* 父容器样式 */.container {width: 300px;height: auto;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;padding: 10px; /* 内边距 */}/* 通用盒子样式 */.box {width: 100%;height: 100px;background-color: #4CAF50; /* 默认绿色背景 */margin-bottom: 20px; /* 下方间距 */text-align: center;line-height: 100px; /* 垂直居中 */color: #fff;font-size: 16px;}/* 第一个盒子：粘性定位 */.box1 {position: sticky;top: 0; /* 滚动到视口顶部时固定 */background-color: #4CAF50; /* 绿色背景 */}/* 第二个盒子：粘性定位 */.box2 {position: sticky;top: 50px; /* 滚动到距离视口顶部 50px 时固定 */background-color: #FF5722; /* 橙色背景 */}/* 第三个盒子：粘性定位 */.box3 {position: sticky;top: 100px; /* 滚动到距离视口顶部 100px 时固定 */background-color: #2196F3; /* 蓝色背景 */}</style>
</head>
<body><div class="container"><div class="box box1">粘性定位 - Box 1</div><div class="box box2">粘性定位 - Box 2</div><div class="box box3">粘性定位 - Box 3</div><p>滚动页面，观察粘性定位效果。</p><p style="height: 1000px;">这是一个长内容区域，用于测试粘性定位。</p></div>
</body>
</html>

第一个盒子（绿色）：
滚动到视口顶部时固定，直到父容器的内容滚动结束。

第二个盒子（橙色）：
滚动到距离视口顶部 50px 时固定，直到父容器的内容滚动结束。

第三个盒子（蓝色）：
滚动到距离视口顶部 100px 时固定，直到父容器的内容滚动结束。

注意事项

粘性定位的特点：

position: sticky; 是相对定位和固定定位的结合。
元素在滚动到指定位置时变为固定定位，但超出父容器范围后恢复正常流。

父容器的限制：

粘性定位的元素必须在一个有滚动内容的父容器中才能生效。
如果父容器没有足够的高度，粘性定位可能无法触发。

浏览器支持：

position: sticky; 在现代浏览器中支持良好，但在旧版 IE 中不支持。

三、综合应用

1、数字定位在图片上

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数字定位在图片底部</title><style>/* 容器样式 */.image-container {position: relative; /* 设置父容器为相对定位 */width: 600px;height: 300px;margin: 20px auto;border:5px solid #69b8ec; /* 边框 */}/* 图片样式 */.image-container img {width: 100%;height: 100%;display: block;}/* 数字容器样式 */.number-container {position: absolute; /* 绝对定位 */bottom: 10px; /* 距离图片底部 10px */left: 50%; /* 水平居中 */transform: translateX(-50%); /* 水平居中对齐 */display: flex; /* 使用 flexbox 布局 */gap: 10px; /* 数字之间的间距 */}/* 数字样式 */.number {color: #fff; /* 白色字体 */font-size: 18px; /* 字体大小 */font-weight: bold; /* 加粗字体 */background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */border-radius: 50%; /* 圆形背景 */width: 30px;height: 30px;line-height: 30px; /* 垂直居中 */text-align: center; /* 水平居中 */text-decoration: none; /* 去掉超链接下划线 */}/* 数字悬停效果 */.number:hover {background-color: rgba(209, 231, 166, 0.8); /* 背景变为白色 */color: #000; /* 字体变为黑色 */}</style>
</head>
<body><div class="image-container"><img src="https://imgs.699pic.com/images/500/363/911.jpg!seo.v1" alt="图片"><div class="number-container"><a href="#link1" class="number">1</a><a href="#link2" class="number">2</a><a href="#link3" class="number">3</a><a href="#link4" class="number">4</a><a href="#link5" class="number">5</a></div></div>
</body>
</html>

2、窗口两侧固定广告

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>窗口两侧固定广告</title><style>/* 左侧广告样式 */.ad-left {position: fixed; /* 固定定位 */top: 50%; /* 垂直居中 */left: 0; /* 靠左 */transform: translateY(-50%); /* 垂直居中对齐 */width: 120px; /* 广告宽度 */height: 300px; /* 广告高度 */background-color: #4CAF50; /* 绿色背景 */color: #fff; /* 白色文字 */text-align: center; /* 水平居中 */line-height: 300px; /* 垂直居中 */font-size: 16px; /* 字体大小 */box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */}/* 右侧广告样式 */.ad-right {position: fixed; /* 固定定位 */top: 50%; /* 垂直居中 */right: 0; /* 靠右 */transform: translateY(-50%); /* 垂直居中对齐 */width: 120px; /* 广告宽度 */height: 300px; /* 广告高度 */background-color: #FF5722; /* 橙色背景 */color: #fff; /* 白色文字 */text-align: center; /* 水平居中 */line-height: 300px; /* 垂直居中 */font-size: 16px; /* 字体大小 */box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */}/* 页面内容样式 */.content {width: 80%;margin: 50px auto;font-size: 18px;line-height: 1.6;text-align: justify;}</style>
</head>
<body><!-- 左侧广告 --><div class="ad-left">左侧广告</div><!-- 右侧广告 --><div class="ad-right">右侧广告</div><!-- 页面内容 --><div class="content"><h1>content内容</h1><p>这是一个页面，展示如何在窗口的左右两边添加固定广告。无论页面如何滚动，广告始终保持在视口的两侧。</p><p>通过使用 CSS 的固定定位（`position: fixed`），可以轻松实现这种效果。固定定位的元素相对于视口进行定位，不会随页面滚动而移动。</p><p>这种布局常用于广告、导航栏或其他需要始终可见的元素。</p><p style="height: 2000px;">滚动页面，观察广告始终固定在窗口两侧的效果。</p></div>
</body>
</html>

左侧广告始终固定在视口的左侧，垂直居中。
右侧广告始终固定在视口的右侧，垂直居中。
页面滚动时，广告不会移动，始终保持在窗口两侧。

四、总结

相对定位：一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量。

绝对定位：一般用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。

固定定位：一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

CSS 美化页面（五）

一、position属性属性值‌‌描述‌‌应用场景‌static默认定位方式，元素遵循文档流正常排列，top/right/bottom/left 属性无效‌。普通文档流布局，默认布局，无需特殊定位。relative相对定位，相对于元素原本位置进行偏…...

编程日记 2026/1/10 0:56:29

java 设计模式之模板方法模式

简介模板方法模式：定义一个算法的基本流程，将一些步骤延迟到子类中实现。模板方法模式可以提高代码的复用性， 模板方法中包含的角色： 抽象类：负责给出一个算法的基本流程，它由一个模板方法和若干个基本…...

编程日记 2025/6/19 19:23:17

基于大模型的腹股沟疝诊疗全流程风险预测与方案制定研究报告

目录一、引言 1.1 研究背景与意义 1.2 国内外研究现状 1.3 研究目的与创新点二、大模型技术概述 2.1 大模型基本原理 2.2 常用大模型类型及特点 2.3 大模型在医疗领域的应用潜力三、腹股沟疝诊疗流程分析 3.1 腹股沟疝的发病机制与分类 3.2 传统术前评估方法与局…...

编程日记 2025/12/6 12:54:34

无约束最优化问题的求解算法--梯度下降法（Gradient Descent）

文章目录梯度下降法梯度下降法原理（通俗版）梯度下降法公式学习率的设置**如何选择学习率？** 全局最优解梯度下降法流程损失函数的导函数三种梯度下降法**梯度下降法核心步骤回顾****优缺点详解****1. 全量梯度下降 (Batch Gradient Descent,…...

编程日记 2026/1/10 0:56:25

Python全功能PDF工具箱GUI：支持转换、加密、旋转、图片提取、日志记录等多功能操作

使用Python打造一款集成 PDF转换、编辑、加密、解密、图片提取、日志追踪等多个功能于一体的桌面工具应用（Tkinter ttkbootstrap PyPDF2 等库）。 ✨项目背景与开发动机在日常办公或学习中，我们经常会遇到各种关于PDF文件的操作需求&#…...

编程日记 2026/1/13 23:12:43

[密码学实战]国密算法面试题解析及应用

以下是密码学领域常见的面试题及其详细解析，涵盖基础理论、算法实现与应用场景，帮助系统化备战技术面试一、基础概念类 1. 密码学的主要目标是什么？答案：确保数据的机密性（加密防止窃听）、完整性（哈希校验防篡改）、认证性（数字签名验证身份）和不可否认性（签名防…...

编程日记 2025/12/5 3:55:00

React 受控表单绑定基础

React 中最常见的几个需求是： 渲染一组列表绑定点击事件表单数据与组件状态之间的绑定受控表单绑定是理解表单交互的关键之一。 📍什么是受控组件？ 在 React 中，所谓“受控组件”，指的是表单元素（如 &l…...

编程日记 2025/12/24 17:14:38

计算机视觉---相机标定

相机标定在机器人系统中的作用 1.确定相机的内部参数相机的内部参数包括焦距、主点坐标、像素尺寸等。这些参数决定了相机成像的几何关系。通过标定，可以精确获取这些参数，从而将图像中的像素坐标与实际的物理坐标建立联系。例如，已知相机…...

编程日记 2026/1/16 15:30:38

LeetCode 443 压缩字符串

字符数组压缩算法详解：实现与分析一、引言在处理字符数组时，我们常常遇到需要对连续重复字符进行压缩的场景。这不仅可以节省存储空间，还能提升数据传输效率。本文将深入解析一个经典的字符数组压缩算法，通过详细的实现步骤和…...

编程日记 2025/12/7 2:24:47

datasheet数据手册-阅读方法

DataSheet Datasheet（数据手册）：电子元器件或者芯片的数据手册，一般由厂家编写，格式一般为PDF，内容为电子分立元器件或者芯片的各项参数，电性参数，物理参数，甚至制造材料…...

编程日记 2025/12/1 18:14:42

AI绘制流程图，方法概述

1 deepseek 生成图片的mermaid格式代码，在kimi中进行绘图或在jupter notebook中绘制： 或在draw.io中进行绘制（mermaid代码） 2 svg是矢量图，可以插入到word """mermaid graph TDA[基线解算] --> B[北…...

编程日记 2025/12/2 4:18:32

ObjectOutputStream 深度解析

ObjectOutputStream 深度解析 ObjectOutputStream 是 Java IO 体系中的一个关键类，用于序列化（将对象转换为字节流），通常与 ObjectInputStream 配合使用，实现对象的持久化存储或网络传输。 1.作用：完成对象的序列化过程 2.它可以将JVM当中的Java对象序列化到文件中/网…...

编程日记 2025/12/1 15:51:24

git回滚指定版本并操作

你可以通过以下步骤切换到第三个版本。根据你的需求，有两种主要方法： 方法 1：临时查看第三个版本（不修改当前分支） 适用于仅查看或测试旧版本，不保留后续修改： 找到第三个版本的提交哈希&#…...

编程日记 2025/12/1 17:24:52

【AI插件开发】Notepad++ AI插件开发实践：支持配置界面

一、引用此前的系列文章已基本完成了Notepad的AI插件的功能开发，但是此前使用的配置为JSON配置文件，不支持界面配置。本章在此基础上集成支持配置界面，这样不需要手工修改配置文件，直接在界面上操作，方便快捷。注…...

编程日记 2026/1/12 15:12:09

问题docker服务无法启动，溯源发现是polkit服务没有正确运行 systemctl status polkit可以看到类似提示 Sep 18 02:58:24 server1 dbus[897]: [system] Failed to activate service org.freedesktop.PolicyKit1: timed out Sep 18 02:59:29 server1 systemd[1]: po…...

编程日记 2025/11/30 21:25:24

软件工程中数据一致性的探讨

软件工程中数据一致性的探讨引言数据一致性：软件工程中的业务正确性与性能的权衡数据一致性为何重要业务正确性：事务的原子性与一致性ACID原则的基石分布式事务的挑战一致性级别：从强一致到最终一致实践中的一致性权衡金融系统：…...

编程日记 2025/11/22 5:38:09

数据库原理及应用mysql版陈业斌实验四

🏝️专栏：Mysql_猫咪-9527的博客-CSDN博客 🌅主页：猫咪-9527-CSDN博客 “欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。” 目录实验四索引与视图 1.实验数据如下 student 表（学生表&…...

编程日记 2026/1/16 21:10:26

华为OD机试真题——最长的顺子（2025A卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分题型本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析； 并提供Java、python、JavaScript、C、C语言、GO六种语言的最佳实现方式！ 本文收录于专栏：《2025华为OD真题目录全流程解析/备考攻略/经验…...

编程日记 2026/1/12 2:15:17

【HTML】html文件

HTML文件全解析：搭建网页的基石在互联网的广袤世界里，每一个绚丽多彩、功能各异的网页背后，都离不开HTML文件的默默支撑。HTML，即超文本标记语言（HyperText Markup Language），作为网页创建的基…...

编程日记 2025/9/27 14:22:27

使用 XWPFDocument 生成表格时固定列宽度

一、XWPFDocument XWPFTable个性化属性 1.初始默认写法 XWPFTable table document.createTable(n, m); //在文档中创建一个n行m列的表格 table.setWidth("100%"); // 表格占页面100%宽度// 通过getRow获取行进行自定义设置 XWPFTableRow row table.getRow(0); XW…...

编程日记 2025/9/16 10:06:14

足球AI模型：一款用数据分析赛事的模型

2023 年欧冠决赛前，某体育数据平台的 AI 模型以 78% 的概率预测曼城夺冠 —— 最终瓜迪奥拉的球队首次捧起大耳朵杯。当足球遇上 AI，那些看似玄学的 "足球是圆的"，正在被数据与算法拆解成可计算的概率命题。今天我们就来聊聊&#…...

编程日记 2026/1/17 14:08:44

【ESP32|音频】一文读懂WAV音频文件格式【详解】

简介最近在学习I2S音频相关内容，无可避免会涉及到关于音频格式的内容，所以刚开始接触的时候有点一头雾水，后面了解了下WAV相关内容，大致能够看懂wav音频格式是怎么样的了。本文主要为后面ESP32 I2S音频系列文章做铺垫&#xff0…...

编程日记 2026/1/12 9:43:53

万向死锁的发生

我是标题 1.欧拉角2.万向死锁参考：小豆8593 1.欧拉角欧拉角在Unity中描述的是一种变换（Transform）共有3个轴体，默认顺序为x->y->z. 2.万向死锁可以把万向死锁的情况理解成：由于轴体旋转的顺序是固定的&am…...

编程日记 2025/12/1 10:13:59

JavaScript学习教程，从入门到精通，JavaScript BOM (Browser Object Model) 详解（18）

JavaScript BOM (Browser Object Model) 详解 1. BOM 介绍 BOM (Browser Object Model) 是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象。BOM的核心对象是window，它表示浏览器的一个实例。 BOM包含的主要对象： window…...

编程日记 2025/12/24 20:14:49

人工智能与云计算：技术融合与实践

1. 引言人工智能(AI)和云计算是当今科技领域最具变革性的两项技术。AI通过模拟人类智能解决问题，而云计算则提供了弹性可扩展的计算资源。两者的结合创造了前所未有的可能性，使企业能够以更低的成本部署复杂的AI解决方案。本文将探讨AI与云计算的技术融合，包括核心概念、…...

编程日记 2025/11/30 22:41:45

42.[前端开发-JavaScript高级]Day07-手写apply-call-bind-块级作用域

手写apply-call-bind <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…...

编程日记 2026/1/10 8:10:25

ObjectInputStream 终极解析与记忆指南

ObjectInputStream 终极解析与记忆指南一、核心本质 ObjectInputStream 是 Java 提供的对象反序列化流，继承自 InputStream，用于读取由ObjectOutputStream序列化的Java对象。核心特性速查表特性说明继承链InputStream → ObjectInputStream核心功能实现Java对象反序列化…...

编程日记 2025/12/1 11:48:59

数据结构有哪些类型（对于数据结构的简述）

在学习计算机时，数据结构是不可忽视的一点，从考研时的408课程，再到工作中编写软件，网站，要想在计算机领域站住脚跟，数据结构是必备的在这里，我对于数据结构进行了汇总，并简要描述&…...

编程日记 2025/11/30 22:15:27

Vscode 插件开发

文章目录 1、使用vscode官方插件生成框架，下载脚手架2、使用脚手架初始化项目，这里我选择的是js3、生成的文件结构如下，重要的就是以下两个文件4、代码5、打包使用6、发布官网地址7、publisher ID undefined provided in the extension manif…...

编程日记 2026/1/11 17:07:46

C# string和其他引用类型的区别

在C#中，字符串（String）和其他引用类型（Reference Types）之间有几个关键的区别，这些区别主要体现在它们的内存管理、赋值行为以及使用方式上。 1. 内存管理字符串（String）&#xff1…...

编程日记 2025/12/2 8:09:59

一、position属性

二、定位的应用

注意事项

注意事项

注意事项

注意事项

三、综合应用

1、数字定位在图片上

四、总结

相关文章：