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

【CSS3】05-定位 + 修饰属性

article 2026/2/12 15:45:36

本文介绍定位和CSS中的修饰属性。

1. 定位

1.1 相对定位

1.2 绝对定位

1.3 定位居中

1.4 固定定位

1.5 z-index堆叠层级

2. 修饰属性

2.1 垂直对齐方式 vertical-align

2.2 过渡属性

2.3 透明度 opacity

2.4 光标类型 cursor

1. 定位

灵活改变盒子在网页中的位置

实现：

position

加上边偏移属性：top bottom left right

1.1 相对定位

position:relative

一般和其他定位相互配合使用

1.2 绝对定位

position:absolute

子级绝对定位，父级相对定位

（子级无论怎么改变都会出现在父级区域的里面）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 400px;}.news {/* 父级相对 */position: relative;/* 版心 */margin: 100px auto;width: 400px;height: 350px;background-color: #f8f8f8;}/*1.绝对定位 脱标 不占位2.绝对定位参照物：先找最近的已经定位的祖先元素，如果没有祖先元素，就参照浏览器可视区改位置3.显示模式改变：宽高生效（具备了行内块）*/.news span {/* 子级绝对 */position: absolute;/* 边偏移属性改变位置 *//* 要去右上角 */right: 0;top: 0;/* span原来是行内，display转为块级 */display: block;width: 92px;height: 32px;background-color: rgba(0, 0, 0, 0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><img src="./5.webp" alt=""><span>展会活动</span><h4>2222世界移动大会</h4></div>
</body>
</html>

1.3 定位居中

在浏览器窗口中实现定位居中

实现步骤：

1. 绝对定位

2. 水平、垂直边偏移为50%

3. 子级向左、上移动自身尺寸的一半（也可以transform:translate(-50%,-50%)）

    <style>img {/* 子级绝对 */position: absolute;/* 右移、下移浏览器页面的一半 */left: 50%;top: 50%;/* 左移自身图片宽度的一半 我的图片宽度是810，所以左移405px */margin-left: -405px;/* 上移同理 */margin-top: -540px;}</style>
</head>
<body><img src="./5.webp" alt="">
</body>

第二种写法：

    <style>img {/* 子级绝对 */position: absolute;/* 右移、下移浏览器页面的一半 */left: 50%;top: 50%;transform: translate(-50%,-50%);}</style>

1.4 固定定位

position:fixed

在页面中无论怎么滑动，都不会动位置

    <style>* {margin: 0;padding: 0;}img {width: 200px;height: 200px;}/*固定定位：1. 脱标 不占位 2. 参照物：浏览器窗口 3. 行内块特点*/div {position: fixed;/* 浏览器窗口的最顶部 */top: 0;/* 浏览器窗口的最右部 */right: 0;/* 加个宽度，看是否发生变化 */width: 500px;}</style>

可以看到滑动页面时他的位置也不变

1.5 z-index堆叠层级

默认效果：按照标签书写顺序，后来者居上，后写的压在前一个上面

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

如图效果：

下面代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {position: absolute;/* 定位后，后来者居上 */width: 200px;height: 200px;}.box1 {background-color: pink;/* z-index取值是整数，默认是0，取值越大显示顺序越靠上 */z-index: 1;}.box2 {background-color: skyblue;/* 加边偏移，明显看到堆叠效果 */left: 100px;top: 100px;/* z-index取值比box1大才能压在他上面 */z-index: 2;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>

2. 修饰属性

2.1 垂直对齐方式 vertical-align

属性名：vertical-align

属性值：

baseline 基线对齐(默认)

top 顶部对齐

middle 居中对齐

bottom 底部对齐

什么是基线，为什么头像和昵称不能同行？

原因：将图片也当成文字处理，都在同一基线对齐

    <style>div {border: 1px solid #000;}img {width: 200px;height: 200px;/* 谁占的块大，给谁加 *//* 1. middle文字和图片对齐居中 */vertical-align: middle;/* 2. top顶对齐 *//* vertical-align: top; *//* 3.bottom底部对齐 *//* vertical-align: bottom; */}</style>
</head>
<body><div><!-- 默认：图片和文字，一个偏上一个偏下 --><img src="./5.webp" alt="">我是谁？我在哪？</div>
</body>

居中：

还有一种方法：直接取消底下的空白

转换为块级即可，让浏览器认为这是块，就不当成文字和其他文字一行了

img {width: 200px;height: 200px;display:block;
}

2.2 过渡属性

transition

可以为一个元素在不同状态之间切换的时候添加过渡效果（如大小变化）

属性名：transition 复合属性

属性值：过渡的属性花费时间秒s

写法：

1. 可以是具体的CSS属性

2. 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

3. transition 设置给元素本身

    <style>/* 默认 */img {width: 200px;height: 150px;/* 属性值不同的都变化 时间1s *//* 加给标签本身 */transition: all 1s;}/* 鼠标滑动到图片时 */img:hover {width: 300px;height: 300px;}</style>
</head>
<body><img src="./5.webp" alt="">
</body>

2.3 透明度 opacity

设置整个元素的透明度 (包含背景和内容)

属性名：opacity

属性值：0-1

0：完全透明（元素不可见）

1：不透明

0-1小数：半透明

2.4 光标类型 cursor

鼠标悬停在元素上时显示指针显示样式

属性名：cursor

属性值：

default 默认值通常是箭头

pointer 小手效果提示用户可以点击

text 工字型提示用户可以选择文字

move 十字光标提示用户可以移动

    <style>div {width: 200px;height: 200px;background-color: pink;/* cursor:pointer; 小手 */cursor:pointer;/* 工字型 可以选择文本的 */cursor: text;/* 可以移动 */cursor: move;}</style>
</head>
<body><div></div>

本文介绍定位和CSS中的修饰属性。

【CSS3】05-定位 + 修饰属性

本文介绍定位和CSS中的修饰属性。目录 1. 定位 1.1 相对定位 1.2 绝对定位 1.3 定位居中 1.4 固定定位 1.5 z-index堆叠层级 2. 修饰属性 2.1 垂直对齐方式 vertical-align 2.2 过渡属性 2.3 透明度 opacity 2.4 光标类型 cursor 1. 定位灵活改变盒子在网页中的位…...

编程日记 2026/2/9 12:59:27

C 语言测验

C 语言测验引言 C 语言作为一种历史悠久且广泛使用的编程语言，自1972年由Dennis Ritchie在贝尔实验室发明以来，一直是计算机科学领域的基石。C 语言以其高效、灵活、可移植的特点，在操作系统、嵌入式系统、游戏开发等多个领域占据着重要地位。为了帮助读者深入了解C语言，…...

编程日记 2025/5/28 17:30:15

如何屏蔽mac电脑更新提醒，禁止系统更新

最烦mac的系统更新提醒了，过几天就是更新弹窗提醒，现在可以直接禁掉了，眼不见心不乱，不然一升级，开发环境全都不能用了，那才是最可怕的，屏蔽的方法也很简单，就是屏蔽mac系统更新的请…...

编程日记 2026/2/5 17:28:29

tcp的粘包拆包问题，如何解决？

TCP的粘包和拆包问题是由于TCP协议面向流的特性导致数据边界不明确，解决方案需在应用层明确数据包边界。以下是具体解决方法： 1. 固定长度消息（Fixed-Length Protocol） 实现方式：每个数据包长度固定，不足…...

编程日记 2026/2/7 2:59:42

Rclone同步Linux数据到google云盘

文章目录 Rclone管理云存储Rclone安装和使用说明安装rclone配置rclone连接到云盘基本备份命令高级备份选项自动化备份加密备份（可选）恢复数据常见云存储服务名称注意事项 googleCloud 平台中操作OAuth权限请求页面（OAuth同意屏幕）…...

编程日记 2026/2/5 17:28:32

AI人工智能-Jupyter NotbookPycharm：Py开发

安装命令： pip install jupyter 启动命令： jupyter notebook 启动成功后，下面网址会默认自动打开当前用户的根目录。其实这个页面显示的内容，是我们电脑目录C:\Users\当前用户\下的文件夹我们平常做实验，希望在…...

编程日记 2026/2/5 17:32:50

DDR简介

一、什么是DDR？ DDR SDRAM（Double Data Rate Synchronous DYNAMIC RAM）中文名是：双倍数据速率同步动态随机存储器。传统的SDRAM只在时钟信号的上升沿传输数据，而DDR可以同时在时钟的上升沿和下降沿传输数据&#xf…...

编程日记 2026/2/5 13:49:37

Kubernetes 入门篇之 Node 安装与部署

上篇记录了Master节点的安装与部署，本篇记录一下node的安装与部署。 1. 基础环境配置关闭防火墙与交换分区（swap），关闭selinux，配置yum源参考上篇；启用 IPv4 数据包转发和 iptables 网络过滤参考上篇&a…...

编程日记 2025/11/6 13:21:25

企业数据治理实践：“七剑” 合璧，释放数据价值

在数字化转型的浪潮中，数据已成为企业的核心资产，其治理水平直接关乎企业的竞争力和可持续发展能力。数据模型治理、元数据治理、数据质量治理、数据标准治理、主数据治理、数据安全治理以及数据服务平台治理，共同构成了企业数据治理的关键体…...

编程日记 2025/5/10 1:34:11

VRRP(虚拟路由器冗余协议)、虚拟路由器、master路由器、backup路由器

VRRP(虚拟路由器冗余协议) 1、介绍虚拟路由冗余协议 VRRP (Virtual Router Redundancy Protocol)通过把几台路由设备联合组成一台虚拟的路由设备，将虚拟路由设备的IP地址作为用户的默认网关实现与外部网络通信。当网关设备发生故障时，VRRP机制能够选举…...

编程日记 2026/2/10 9:58:51

基本元素定位（findElement方法）

通过ID定位：使用元素的ID属性进行定位，是最简单和最常用的方法，因为ID在页面上是唯一的。 //定位百度的搜索框元素，并且输入数据(ID定位)-唯一 chromeDriver.findElement(By.id("kw")).sendKeys("腾讯课堂")…...

编程日记 2025/5/17 0:06:50

多模态RAG实践：如何高效对齐不同模态的Embedding空间？

目录多模态RAG实践：如何高效对齐不同模态的Embedding空间？ 一、为什么需要对齐Embedding空间？ 二、常见的对齐方法与关键技术点 （一）对比学习（Contrastive Learning） （二&#…...

编程日记 2026/2/5 17:32:50

Cesium 核心思想及基础概念应用

文章目录 Cesium 基础理解（一）1. 场景（Scene）2. 查看器（Viewer）3. 相机（Camera）4. 实体（Entity）5. 图元（Primitive）6. 数据加载与解析…...

编程日记 2026/2/9 22:36:31

vue中的拖拽

拖拽总结实现方式特点适用场景HTML5 原生拖拽 API✅ 直接使用 dataTransfer 进行数据传输 ✅ 兼容性好（大部分浏览器支持） ✅ 适合简单的拖拽场景低代码平台、表单生成器、组件拖拽Vue/React 组件库（如 Vue Draggable、SortableJS&#xff…...

编程日记 2026/2/5 17:39:01

Linux进程间通信（1）

1.IPC 1.什么是IPC？ Inter Process Communication 2.进程间通信常用的几种方式 1，管道通信：有名管道，无名管道 2，信号- 系统开销小 3，消息队列-内核的链表 4，信号量-计数器 5，共享…...

编程日记 2026/2/7 2:56:56

Scala相关知识学习总结3

包 - 包声明：和Java类似，作用是区分同名类、管理类命名空间。Scala包名只能含数字、字母等，不能数字开头、不能用关键字。 - 包说明：有类似Java的包管理风格，也有独特嵌套风格。嵌套风格有两个特点，一是&…...

编程日记 2026/2/5 17:28:33

Opencv计算机视觉编程攻略-第七节提取直线、轮廓和区域

第七节提取直线、轮廓和区域 1.用Canny 算子检测图像轮廓2.用霍夫变换检测直线；3.点集的直线拟合4.提取连续区域5.计算区域的形状描述子图像的边缘区域勾画出了图像含有重要的视觉信息。正因如此，边缘可应用于目标识别等领域。但是简单的二值边缘分布图…...

编程日记 2026/2/5 17:32:53

中和农信：让金融“活水”精准浇灌乡村沃土

2025年政府工作报告首提“投资于人”概念，并22次提及“金融”，强调要着力抓好“三农”工作，深入推进乡村全面振兴；一体推进地方中小金融机构风险处置和转型发展；扎扎实实落实促进民营经济发展的政策措施，切…...

编程日记 2026/2/5 19:03:24

背包DP总结

牛客周赛 Round 81 E.建筑入门知识点：完全背包，完全背包的路径转移以及回溯由题意可以推导出，下层麻将的数字一定大于上层数字，所以我们可以假设一个最基础的麻将塔，也就是： 1 2 2 3 3 3 … 形如这样的&…...

编程日记 2026/2/7 10:58:05

Labview信号采集与多功能分析系统（可仿真）

1.摘要《Labview信号采集与多功能分析系统》可以实时分析信号的时域特征，例如信号的均值、方差、峰值、峭度等。系统可以进行信号的自相关与互关分析。此系统也可以分析信号的频域特征，包括快速傅里叶变换后的时频特征、短时傅里叶变换STFT后的时频域特…...

编程日记 2026/2/5 17:31:43

【C#使用S7.NET库读取和写入西门子PLC变量】

C#使用S7.NET库读取和写入西门子PLC变量前言使用S7.NET库读取使用S7.NET库写入前言本来想用Wincc的接口给读和写Wincc，但是速度实在太感人了，所以不如直接读和写PLC的变量，这种方式速度瞬间快了不知道多少倍（经测试4000个变量…...

编程日记 2025/12/28 10:37:38

蓝桥杯游戏 6251 单调队列

传送门 0游戏 - 蓝桥云课有了单调队列，在求解答案时：当我们需要对最大值的列表和最小值的列表进行俩俩组合，如果直接用两个f0r循环进行匹配，那么时间复杂度太大，容易超时。我们可以进行一个推导，假设最大…...

编程日记 2026/2/11 11:03:48

[250331] Paozhu 发布 1.9.0：C++ Web 框架，比肩脚本语言｜ DeaDBeeF 播放器发布 1.10.0

目录 Paozhu 发布 1.9.0：C Web 框架，快速开发，比肩脚本语言DeaDBeeF 音乐播放器发布 1.10.0 版本！ Paozhu 发布 1.9.0：C Web 框架，快速开发，比肩脚本语言 Paozhu (炮竹🧨) 是一个功…...

编程日记 2026/2/6 0:15:08

理解专家并行，需要了解einsum函数 import torch# 设置输入张量的维度：s 3 tokens, e 2 experts, c 2 capacity, m 4 embedding dim s, e, c, m 3, 2, 2, 4# 1. 输入 token 的嵌入向量 (s, m) reshaped_input torch.tensor([[1.0, 1.0, 1.0, 1.0],…...

编程日记 2025/7/8 2:45:53

gitee 配置git上传

Git入门？查看帮助 , Visual Studio / TortoiseGit / Eclipse / Xcode 下如何连接本站, 如何导入仓库简易的命令行入门教程: Git 全局设置: 以 176fuguM2项目为例 git config --global user.name "堕落圣甲虫" git config --global user.email "11…...

编程日记 2025/5/19 1:30:06