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

css5定位

news 2026/2/9 22:29:05

css

  • 一.定位
    • 1.概念（定位=定位模式+边位移）
    • 2.静态位移static（不常用）
    • 3.相对定位relative（不脱标）（占位置）
    • 4.绝对定位absolute（脱标）（不占位置）
    • 5.固定定位fixed（脱标）（不占位置）（一个小算法）
    • 6.粘性定位sticky（不脱标）（占位置）
    • 7.总结
  • 二.子绝父相
  • 三.叠放次序（z-index)(定位的盒子才用）
  • 四.定位拓展
    • 1.绝对定位盒子居中
    • 2.定位的特殊性
    • 3.脱标的盒子不会触动外边距塌陷
    • 4.绝对（固定）定位会压住盒子
  • 五.元素的显示与隐藏
    • 1.display
    • 2.visibility
    • 3.overflow
    • 4.总结
  • 六.网页布局总结

一.定位

1.概念（定位=定位模式+边位移）

why
在这里插入图片描述
定位模式
在这里插入图片描述
边位移
在这里插入图片描述

2.静态位移static（不常用）

相当于标准流，无边位移
在这里插入图片描述

3.相对定位relative（不脱标）（占位置）

在这里插入图片描述

4.绝对定位absolute（脱标）（不占位置）

在这里插入图片描述

5.固定定位fixed（脱标）（不占位置）（一个小算法）

在这里插入图片描述
eg：
在这里插入图片描述
在这里插入图片描述

6.粘性定位sticky（不脱标）（占位置）

在这里插入图片描述

7.总结

在这里插入图片描述

二.子绝父相

在这里插入图片描述

三.叠放次序（z-index)(定位的盒子才用）

在这里插入图片描述

四.定位拓展

1.绝对定位盒子居中

eg：在这里插入图片描述

在这里插入图片描述

2.定位的特殊性

绝对定位和固定定位和浮动类似
不需要display即可有行内块属性
在这里插入图片描述

3.脱标的盒子不会触动外边距塌陷

浮动的盒子也不会
只有标准流会
在这里插入图片描述

4.绝对（固定）定位会压住盒子

but
浮动不会
在这里插入图片描述

五.元素的显示与隐藏

1.display

在这里插入图片描述

2.visibility

在这里插入图片描述

3.overflow

在这里插入图片描述

4.总结

在这里插入图片描述

六.网页布局总结

在这里插入图片描述

相关文章：

css5定位

css 一.定位1.概念（定位定位模式边位移）2.静态位移static（不常用）3.相对定位relative（不脱标）（占位置）4.绝对定位absolute（脱标）（不占位置&#x…...

编程日记 2024/3/2 0:14:36

【解决】修改 UI界面渲染层级 的常见误区

开发平台：Unity 2021版本   问题描述 Unity 中管理 UI 上显示元素的前后层级关系大致为以下两种方式： 方式一：修改UI元素队列顺序与层级方式二：使用 Canvas 组件中的 Override Sort 属性配置 方式二 对应复杂的 UI 层级关系将常…...

编程日记 2024/3/2 0:13:35

蓝桥杯练习系统（算法训练）ALGO-995 24点

资源限制 内存限制：256.0MB C/C时间限制：1.0s Java时间限制：3.0s Python时间限制：5.0s 问题描述 24点游戏是一个非常有意思的游戏，很流行，玩法很简单：给你4张牌，每张牌上有数…...

编程日记 2024/3/2 0:12:34

汽车电子笔记：BootLoader升级过程疑难问题解决方式（Bootloader响应10 02 + 刷死拯救机制）

目录 1、概述 2、如何在BootLoader响应10 02 2.1、实现流程图 2.2、实现方式（代码思路） 3、刷死拯救机制(100%能救活，适配各类控制器...

编程日记 2024/3/2 0:03:26

高级RAG：揭秘PDF解析

原文地址：https://pub.towardsai.net/advanced-rag-02-unveiling-pdf-parsing-b84ae866344e 2024 年 2 月 3 日 附加内容：揭秘PDF解析：如何从科学pdf论文中提取公式 对于RAG，从文档中提取信息是一个不可避免的场景。确保从源头…...

编程日记 2024/3/2 0:00:23

Android之UI Automator框架源码分析（第九篇：UiDevice获取UiAutomation对象的过程分析）

前言 学习UiDevice对象，就需要看它的构造方法，构造方法中有UiDevice对象持有一些对象，每个对象都是我们分析程序的重点，毕竟UiDevice对象的功能，依赖这些组合的对象 备注：当前对象持有的对象，初…...

编程日记 2024/3/1 23:58:21

【C语言】指针初阶2.0版本

这篇博文我们来继续学习指针的其他内容 指针2.0 传值调用与传址调用传值调用传址调用 一维数组与指针理解数组名使用指针深入理解一维数组 二级指针指针数组二维数组与指针 传值调用与传址调用 在开始之前，我们需要先了解这个概念，后面才能够正常的学习…...

编程日记 2024/3/1 23:57:20

小红书关键词爬虫

标题 1 统计要收集的关键词，制作一个文件夹2 爬取每一页的内容3 爬取标题和内容4 如果内容可以被查看，爬取评论内容5 将结果进行汇总，并且每个帖子保存为一个json文件，具体内容6 总结 1 统计要收集的关键词，制作一个文…...

编程日记 2024/3/1 23:56:18

网络爬虫的危害，如何有效的防止非法利用

近年来，不法分子利用“爬虫”软件收集公民隐私数据案件屡见不鲜。2023年8月23日，北京市高级人民法院召开北京法院侵犯公民个人信息犯罪案件审判情况新闻通报会，通报侵犯公民个人隐私信息案件审判情况，并发布典型案例。在这些典型案…...

编程日记 2024/3/1 23:55:17

2024/2/29 备战蓝桥杯 6-1 二分

目录 查找 【深基13.例1】查找 - 洛谷 数对 A-B 数对 - 洛谷 砍树 [COCI 2011/2012 #5] EKO / 砍树 - 洛谷 参考连接：AcWing 789. 数的范围---二分法一次搞懂 - AcWing 1.程序中不要同时出现l mid, r mdi这两条语句。 2.如过程序中出现了l mid&#xff0…...

编程日记 2024/3/1 23:54:16

浅析ARMv8体系结构：原子操作

文章目录 概述LL/SC机制独占内存访问指令多字节独占内存访问指令 独占监视器经典自旋锁实现 LSE机制原子内存操作指令CAS指令交换指令 相关参考 概述 在编程中，当多个处理器或线程访问共享数据，并且至少有一个正在写入时，操作必须是原子的&a…...

编程日记 2024/3/1 23:53:15

综合练习(二)

目录 列出薪金比 SMITH 或 ALLEN 多的所有员工的编号、姓名、部门名称、领导姓名、部门人数，以及所在部门的平均工资、最高和最低工资 补充 spool Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 列出薪金比 SMITH 或 AL…...

编程日记 2024/3/1 23:52:14

sql-labs第46关（order by盲注脚本）

一、环境 网上有自己找 二、解释 order by 注入我们看他的true和false来进行注入出来 二、实操 让我们用sort 看看源码 最终我们的id是放到order by后面了 如果我们直接用列去排序 ?sortusername/password username： password： 可以看到顺序是不…...

编程日记 2024/3/1 23:50:13

13款可以轻松上手画图软件推荐

在当今的数字世界里，我们有各种各样的创作工具，尤其是画图软件。所以问题来了：我们应该如何选择许多免费的绘画软件？为了回答这个问题，我们将在本文中分享10个领先的画图软件。每一个都有其独特的特点和优势&#xff0…...

编程日记 2024/3/1 23:47:10

vue实现商品评分效果（通过插件实现）

Vue.js 实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分&#xff0c;并且评分显示了相应的星星数。 废话不多说&#xff0c;直接上代码 方法一&#xff1a; <template><div><avue-form :model"formData"><avue-form-it…...

编程日记 2024/3/1 23:44:08

SpringBoot 手写 Starter

spring-boot-starter 模块 1.介绍 SpringBoot中的starter是一种非常重要的机制&#xff0c;能够抛弃以前繁杂的配置&#xff0c;将其统一集成进starter&#xff0c;应用者只需要在maven中引入starter依赖&#xff0c;SpringBoot就能自动扫描到要加载的信息并启动相应的默认配…...

编程日记 2024/3/1 23:42:06

C++ 学习笔记（Structured bindings）

C 学习笔记&#xff08;Structured bindings&#xff09; 这个特性是 C17 引入的&#xff0c;个人认为主要是解决如何让函数返回多个值的问题。在这之前&#xff0c;我们一般用 std::pair 或者 std::tuple 来返回多个值。比如下面的例子&#xff1a; std::tuple<int, int …...

编程日记 2024/3/1 23:41:05

K8S常用kubectl命令汇总（持续更新中）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/3/1 23:40:04

加密和签名的区别及应用场景

原文网址&#xff1a;加密和签名的区别及应用场景_IT利刃出鞘的博客-CSDN博客 简介 本文介绍加密和签名的区别及应用场景。 RSA是一种非对称加密算法&#xff0c; 可生成一对密钥&#xff08;私钥和公钥&#xff09;。&#xff08;RSA可以同时支持加密和签名&#xff09;。 …...

编程日记 2024/3/1 23:36:01

双非二本找实习前的准备day3

学习目标&#xff1a; 每天2-3到简单sql&#xff08;刷完即止&#xff09;&#xff0c;每天复习代码随想录上的题目3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; 1&#xff09;偶尔还是贪玩游戏&…...

编程日记 2024/3/1 23:35:00

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/8 20:41:51

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/2/9 20:16:17

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51