position定位静态定位/绝对定位/相对定位
1.静态定位static：按照标准流进行布局
<!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>.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准relative:相当于太自己便宜*/position: static;width: 200px;height: 120px;border: 1px solid black;}</style></head><body><div class="main"><div class="son">静态定位</div></div>
</body>
</html>2.绝对定位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>.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准,进行定位relative:相当于太自己便宜*/position: absolute;width: 200px;height: 120px;border: 1px solid black;top: 30px;left: 30px;}</style></head><body><div class="main"><div class="son">绝对定位</div></div>
</body>
</html>3.相对定位relative：相对于原来的标准位置进行偏移
<!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{border: 1px solid black;}.main{width: 500px;height: 200px;border: 1px solid black;}.son{/* positionstatic:静态定位为position的默认值，表示盒子按照标准流进行布局absolute:以父盒子为基准,进行定位relative:相当于太自己便宜*/position: relative;width: 200px;height: 120px;border: 1px solid black;top: 30px;left: 30px;}</style></head><body><div class="main"><div>普通盒子</div><div>1</div><div class="son">相对定位</div></div>
</body>
</html>此时将position换成absolute效果如下
对比一下绝对定位和相对定位
相关文章：
position定位静态定位/绝对定位/相对定位
1.静态定位static：按照标准流进行布局 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…...
2024年09月CCF-GESP编程能力等级认证C++编程三级真题解析
本文收录于专栏《C++等级认证CCF-GESP真题解析》，专栏总目录：点这里。订阅后可阅读专栏内所有文章。 一、单选题（每题 2 分，共 30 分） 第 1 题 下列代码中，输出结果是（ ） #include<iostream> using namespace std; i...
Web自动化Demo-PHP+Selenium
1.新建工程 打开PhpStorm新建工程如下： 打开终端输入如下命令安装selenium： composer require php-webdriver/webdriver 2.编写代码 <?php require vendor/autoload.php;use Facebook\WebDriver\Remote\RemoteWebDriver; use Facebook\WebDriver…...
Python速成笔记——知识（GUI自动化处理屏幕和按键输出）
处理屏幕 获取屏幕快照 函数：pyautogui.screenshot(); 【注】该函数返回包含一个屏幕快照的Image对象； 分析屏幕快照 函数：pyautogui.pixel()； 【注】 传递一个坐标的元组，函数返回坐标对应像素点的RGB值（RGB元组） 函数：pyautogui.pixelMatchesColor() 【注】 函数第一…...
计算机是如何输入存储输出汉字、图片、音频、视频的
计算机是如何输入存储输出汉字、图片、音频、视频的 为了便于理解，先了解一下计算机的组成。 冯诺依曼计算机的五大组成部分。分别是运算器、控制器、存储器、输入设备和输出设备。参见下图： 一、运算器 运算器又称“算术逻辑单元”，是计算…...
springboot系列--web相关知识探索五
一、前言 web相关知识探索四中研究了请求中所带的参数是如何映射到接口参数中的，也即请求参数如何与接口参数绑定。主要有四种、分别是注解方式、Servlet API方式、复杂参数、以及自定义对象参数。web相关知识探索四中主要研究了复杂参数底层绑定原理。本次主要是研…...
开源商城系统crmeb phpstudy安装配置
BOSS让我最快时间部署一套开源商场系统，今天就以crmeb为例。 快速部署在linux中我会首选docker，因为我要在windows中部署，本文就选用phpstudy集成环境做了。 什么是crmeb 我从官网摘点： CRMEB产品与服务 CRMEB通过将CRM&#x…...
【论文阅读笔记】Bigtable: A Distributed Storage System for Structured Data
文章目录 1 简介2 数据模型2.1 行2.2 列族2.3 时间戳 3 API4 基础构建4.1 GFS4.2 SSTable4.3 Chubby 5 实现5.1 Tablet 位置5.2 Tablet 分配5.3 为 tablet 提供服务5.4 压缩5.4.1 小压缩5.4.2 主压缩 6 优化6.1 局部性组6.2 压缩6.3 缓存6.4 布隆过滤器6.5 Commit日志实现6.6 T…...
linux从入门到精通-从基础学起，逐步提升，探索linux奥秘（十一）--rpm管理和计划任务
linux从入门到精通-从基础学起，逐步提升，探索linux奥秘（十一）–rpm管理和计划任务 一、rpm管理（重点） 1、rpm管理 作用： rpm的作用类似于windows上的电脑管家中“软件管理”、安全卫士里面“…...
【C++几种单例模式解读及实现方式】
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、单例是什么？二、解读1.懒汉式2.饿汉式3.static变量特性4.call_once特性 总结 前言 单例模式几乎是每种语言都不可少的一种设计模式，…...
QT开发--串口通信
第十六章 串口通信 16.1 串口通信基础 串口通信主要通过DB9接口，适用于短距离（<10米）。关键参数包括： 波特率：每秒传输bit数，如9600。数据位：信息包中的有效数据位数。停止位：…...
数据库（至少还的再花两天 ）
1 连接查询 左连接 右连接 2 聚合函数 SQL 统计求和 求最值 count sum avg max min 3 SQL关键字 limit 分页 group by 分组 distinct 去重 4 Select执行顺序 from where group by order by 5 数据库三范式 原子性 唯一性 直接性 6 存储引擎 MyISAM InnoDB 7 …...
网络安全公司及其主要产品介绍
以下是一些全球领先的网络安全公司及其主要产品介绍： 一、思科（Cisco） 思科是全球最大的网络设备供应商之一，其网络安全产品以企业级解决方案为主，覆盖多种安全需求。 Cisco ASA（Adaptive Security Appli…...
orjson:高性能的Python JSON库
在Python中处理JSON数据是一项常见任务,标准库的json模块虽然功能齐全,但在性能方面还有提升空间。今天我要向大家介绍一个出色的第三方JSON库 - orjson。 orjson简介 orjson是一个快速、正确的Python JSON库。它具有以下主要特点: 性能卓越 - 在序列化和反序列化方面都比标准…...
常见几大排序算法
排序算法是计算机科学中的基本算法，它们将一个无序的数组或列表按特定顺序进行排列（如升序或降序）。常见的排序算法可以根据其时间复杂度、空间复杂度和适用场景分类。以下是几种常见的排序算法： 1. 冒泡排序（Bubble …...
Linux下CMake入门
CMake的基础知识 什么是 CMake CMake 是一个跨平台的构建工具，主要用于管理构建过程。CMake 不直接构建项目，而是生成特定平台上的构建系统（如 Unix 下的 Makefile，Windows 下的 Visual Studio 工程），然后…...
网络资源模板--Android Studio 实现简易记事本App
目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--基于Android studio 实现的简易记事本App 二、项目测试环境 三、项目详情 首页 创建一个空的笔记本列表 mNotebookList。使用该列表和指定的布局资源 item_notebook 创建…...
根据Vue对比来深入学习React 下 props 组件传值 插槽 样式操作 hooks 高阶组件 性能优化
文章目录 函数组件的特点props组件间的传值父传子看上例子传父兄弟组件传值祖先组件传值 插槽基础插槽具名插槽作用域插槽 样式操作**CSS Modules** 生命周期useRef常用hookuseStateuseEffectuseContextuseReduceruseMemouseCallback 高阶组件什么时候使用 react性能问题和优化…...
HTML（六）超链接
HTML讲解（一）body部分_html body-CSDN博客 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>title</title> </head><body><a href"https://blog.csdn.net/2301_8034953…...
【Coroutines】Implement Lua Coroutine by Kotlin - 2
Last Chapter Link 文章目录 Symmetric CoroutinesNon-Symmetric Coroutine SampleSymmetric Coroutine SampleHow to Implement Symmetric CoroutinesWonderful TricksCode DesignTail Recursion OptimizationFull Sources Symmetric Coroutines in last blog, we have talk…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
mac：大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何，是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试，是可以跑通文章里面的代码。训练速度也是很快的。 注意…...