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

css5定位

news 2026/4/15 6:33:23

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;交付是艺术与政治的混合体。 第四篇解决的是一个在技术书籍里经常被回避的核心问题&#xff1a;如何在复杂的国企环境、多供应商格局和真实的一线压力下&#xff0c;把一个工业互联网系统真正交到用户手里&#xff0c;并让它…...

编程新知 2026/4/15 5:28:16

告别重复造轮子：用 Codex 自动生成脚本，效率提升 300%

当你可以用自然语言描述需求&#xff0c;让 AI 在 5 秒内生成可运行脚本时&#xff0c;为什么还要花 30 分钟手动编写重复性代码&#xff1f; 引言&#xff1a;编程生产力的新范式 在日常开发工作中&#xff0c;有多少时间被浪费在编写重复性脚本上&#xff1f;文件批量重命名、…...

编程新知 2026/4/15 5:25:39

20个核心AI概念轻松入门：收藏这份小白友好指南，开启大模型学习之旅！

如果你曾尝试学习AI&#xff0c;大概率至少有过一次这样的感受……“这到底在讲什么&#xff1f;” 术语太多。 工具太多。 网上所有人都说得好像理所当然。 学习AI很容易让人感到崩溃。 尤其如果你不是直接从事这一行&#xff0c;几乎像在学一门全新的语言。 但我逐渐意识到一…...

编程新知 2026/4/15 3:33:09

芯片胶制造企业有哪些

在半导体封装领域&#xff0c;芯片胶虽然只是薄薄一层&#xff0c;却直接决定着电子产品的生死。现在市场上芯片胶制造企业众多&#xff0c;今天咱们就来好好聊聊&#xff0c;看看都有哪些企业在这个领域崭露头角。汉思新材料&#xff1a;国产替代的先锋汉思新材料深耕电子封装…...

编程新知 2026/4/15 2:45:53

SITS2026多模态搜索性能压测报告首度公开（含Query延迟＜120ms的GPU资源配比公式）

第一章&#xff1a;SITS2026案例&#xff1a;电商多模态搜索应用 2026奇点智能技术大会(https://ml-summit.org) 在SITS2026技术实践峰会上&#xff0c;某头部电商平台展示了其新一代多模态搜索系统——SITS-Search&#xff0c;该系统支持文本、商品图、手绘草图及语音指令的联…...

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

HJ177 可匹配子段计数

知识点双指针 校招时部分企业笔试将禁止编程题跳出页面&#xff0c;为提前适应&#xff0c;练习时请使用在线自测&#xff0c;而非本地IDE。 描述 给定整数数组 aa&#xff08;长度 nn&#xff09;与数组 bb&#xff08;长度 mm&#xff0c;m≦nm≦n&#xff09;。设一个长度…...

编程新知 2026/4/15 0:17:28

为什么用户越来越依赖IT服务台？从工单系统看企业效率被“反向放大”的问题

一、一个被忽视的变化&#xff1a;用户越来越“离不开IT”在很多企业的日常运营中&#xff0c;有一个变化正在悄悄发生&#xff0c;但却很少被系统性分析。那就是&#xff1a;业务部门对IT服务台的依赖程度&#xff0c;正在持续上升。最初&#xff0c;IT服务台的设立&#xff0…...

编程新知 2026/4/14 23:03:29

像素时装锻造坊应用场景：独立电影概念设计中的像素化分镜草图生成

像素时装锻造坊在独立电影概念设计中的应用&#xff1a;像素化分镜草图生成实践 1. 独立电影分镜设计的痛点与机遇 独立电影制作常常面临预算有限但创意无限的矛盾。传统分镜设计需要雇佣专业分镜师&#xff0c;成本高昂且周期长。而使用普通AI工具生成的分镜又往往缺乏艺术统…...

编程新知 2026/4/14 22:54:44

Qwen3.5-9B .accelerate库深度优化：大模型分布式训练与推理加速

Qwen3.5-9B .accelerate库深度优化&#xff1a;大模型分布式训练与推理加速 1. 为什么需要加速Qwen3.5-9B&#xff1f; Qwen3.5-9B作为90亿参数规模的大语言模型&#xff0c;在实际应用中面临两大核心挑战&#xff1a;训练成本高和推理延迟大。传统单卡环境下&#xff0c;完整…...

编程新知 2026/4/14 22:13:51

node-opencv背景减除技术：动态场景分析与运动物体检测的终极方案

node-opencv背景减除技术&#xff1a;动态场景分析与运动物体检测的终极方案 【免费下载链接】node-opencv OpenCV Bindings for node.js 项目地址: https://gitcode.com/gh_mirrors/no/node-opencv node-opencv是一个强大的OpenCV Node.js绑定库&#xff0c;它提供了丰…...

编程新知 2026/4/14 21:59:48