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

css5定位

news 2025/8/29 9:54:22

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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/8/25 20:54:47

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/8/5 0:56:09

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2025/8/22 5:43:03

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/8/20 11:30:50

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/8/26 19:38:48

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19