CSS布局:浮动与绝对定位的异同点

news2024/11/25 10:07:13

CSS布局:浮动与绝对定位的异同点_cherry_vincent的博客-CSDN博客

浮动 ( float ) 和绝对定位 ( position:absolute )

相同点

(1)都是漂起来( 离开原来的位置 )

(2)并且都不占着原来的位置

(3)另外,如h1包文字的标签,默认只设height的情况下,它的width是铺满父元素的宽度的,而当浮动或绝对定位后,它的宽度就是h1内文字的宽度

不同点:

float后,(这里float:left )它后面的对象,会占据它原来的位置,

但是后面对象里的文字和图片等好像知道它在左边,所以他们会自动的在它右边显示,

也就是,后面对象的文字图片等不会被它挡住

position:absolute绝对定位后,它后面的对象,也会占据它原来的位置,

但是后面的对象,完全视它不存在,直接在左上角显示,

也就是,后面对象的文字图片等左上部分会被它挡住

默认情况下(即h3不设浮动、不设绝对定位)


h3设float情况下

 

 h3设绝对定位情况下


————————————————
版权声明:本文为CSDN博主「cherry_vincent」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/cherry_vicent/article/details/41926287

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/566478.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flutter 笔记 | Flutter 布局组件

布局类组件都会包含一个或多个子组件,布局类组件都是直接或间接继承SingleChildRenderObjectWidget 和MultiChildRenderObjectWidget的Widget,它们一般都会有一个child或children属性用于接收子 Widget。 不同的布局类组件对子组件排列(layo…

企业级WordPress开发 – 创建企业级网站的优秀提示

目录 “企业级”是什么意思? 使用WordPress创建企业级网站有什么好处? 使用 WordPress 进行企业开发的主要好处 WordPress 可扩展、灵活且价格合理 WordPress 提供响应式 Web 开发 WordPress 提供了巨大的可扩展性 不断更新使 WordPress 万无一…

JAVA-创建PDF文档

目录 一、前期准备 1、中文字体文件 2、maven依赖 二、创建PDF文档方法 三、通过可填充PDF模板将业务参数进行填充 1、 设置可填充的PDF表单 2、代码开干,代码填充可编辑PDF并另存文件 一、前期准备 1、中文字体文件 本演示使用的是iText 7版本&#xff0c…

Jeddak-DPSQL 首次开源!基于差分隐私的 SQL 代理保护能力

动手点关注 干货不迷路 ‍ ‍1. 背景 火山引擎对于用户敏感数据尤为重视,在火山引擎提供的数据分析产品中,广泛采用差分隐私技术对用户敏感信息进行保护。此类数据产品通常构建于 ClickHouse 等数据引擎之上,以 SQL 查询方式来执行计算逻辑&a…

【计算机网络复习】第六章 关系数据理论 1

关系模式的设计 按照一定的原则从数量众多而又相互关联的数据中,构造出一组既能较好地反映现实世界,而又有良好的操作性能的关系模式 ●冗余度高 ●修改困难 ●插入问题 ●删除问题 ★产生问题的原因 属性间约束关系(即数据间的依赖关系&…

【JavaSE】Java基础语法(十):构造方法

文章目录 ⛄1. 构造方法的格式和执行时机⛄2. 构造方法的作用⛄3. 构造方法的特点⛄4. 构造方法的注意事项⛄5. 构造方法为什么不能被重写 在面向对象编程的思想中,构造方法(Constructor)是一个特殊的函数,用于创建和初始化类的对…

“数字”厨电成新宠?“传统”厨电如何凭实力年销破百亿?|厨房电器SMI社媒心智品牌榜

Social Power 核心解读 AI加持,数字厨电新物种持续走红 传统厨电发力社媒,“有范儿”实力吸睛 4月中下旬的“魔都”可谓热闹非凡,上海车展喧嚣未落,隔壁2023AWE(中国家电及消费电子博览会)的群雄逐鹿紧随…

Electron 小白介绍,你能看懂吗?

目录 前言一、Electron是什么1.官网介绍2.小白介绍 二、Electron开发了哪些应用三、Electron的优势在哪里1.优势2.带给我们什么优势 四、Electron如何学习1.前置知识2.学习建议 五、Electron的乐趣总结 前言 在最近的学习中,我接触了 Electron 这个前端框架&#x…

总结加载Shellcode的各种方式(更新中!)

1.内联汇编加载 使用内联汇编只能加载32位程序的ShellCode&#xff0c;因为64位程序不支持写内联汇编 #pragma comment(linker, "/section:.data,RWE") //将data段的内存设置成可读可写可执行 #include <Windows.h>//ShellCode部分 unsigned char buf[] &qu…

Hadoop的基础操作

Hadoop的基础操作 HDFS是Hadoop的分布式文件框架&#xff0c;它的实际目标是能够在普通的硬件上运行&#xff0c;并且能够处理大量的数据。HDFS采用主从架构&#xff0c;其中由一个NameNode和多个DataNode NameNode负责管理文件系统的命名空间和客户端的访问DataNode负责存储实…

企业为什么要做数字化转型,应该如何进行转型?

企业需要数字化转型才能在当今快速发展的商业环境中保持竞争力和相关性。数字化转型涉及利用数字技术和战略从根本上改变企业的运营方式、为客户创造价值并实现他们的目标。以下是企业进行数字化转型的一些关键原因&#xff1a; 提高运营效率&#xff1a;数字技术可实现自动化、…

如何使用ArcGIS标注上下标

&#xff08;本文首发于“水经注GIS”公号&#xff0c;关注公号免费领取地图数据&#xff09; 在某些情况下除了需要普通的标注之外还需要上下标注&#xff0c;对于这一需求&#xff0c;ArcGIS是支持的&#xff0c;这里为大家介绍一下ArcGIS标注上下标的方法&#xff0c;希望能…

初阶数据结构之栈的实现(五)

文章目录 &#x1f60f;专栏导读&#x1f916;文章导读&#x1f640;什么是栈&#xff1f;&#x1f640;画图描述 &#x1f633;栈的代码实现及其各类讲解&#x1f633;栈的初始化代码实现及其讲解&#x1f633;栈的初始化 &#x1f633;栈的销毁代码实现及其讲解&#x1f633;…

【面试题】2023vue面试题

大厂面试题分享 面试题库 前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 1、说说你对 SPA 单页面的理解&#xff0c;它的优缺点分别是什么&#xff1f; SPA&#xf…

【运维知识进阶篇】集群架构-Nginx高可用Keepalived

高可用是指2台机器启动着完全相同的业务系统&#xff0c;一台机器宕机后&#xff0c;另一台可以快速启用&#xff0c;用户是无感知的。高可用硬件通常使用F5&#xff0c;软件通常使用keepalived。keepalived软件是基于VRRP协议实现的&#xff0c;VRRP虚拟路由冗余协议&#xff…

详解Node.js开发中不可或缺的7个库

在Node.js开发中&#xff0c;选择合适的库对于提高开发效率和优化应用程序性能至关重要。本文将介绍七个备受关注的Node.js库&#xff0c;它们在各自的领域中展现了出色的功能和性能。这些库分别是&#xff1a;Config、Fetch、Ioredis、Multer、Cache、Fast-xml-parser和Cron。…

一图看懂 pkg_resources 模块:包资源API,资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 pkg_resources 模块&#xff1a;包资源API&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1f9ca;模块图&#x1f9ca;类关系图&#x1f9…

JavaEE(系列15) -- 多线程(JUC中常见的类)

JUC----- java.util.concurrent(并发) 1. ReentrantLock 1. 可重入互斥锁. 和 synchronized 定位类似, 都是用来实现互斥效果, 保证线程安全. 2. ReentrantLock 也是可重入锁. "Reentrant" 这个单词的原意就是 "可重入". 1. ReentrantLock 的用法: lock():…

【花雕学AI】微软 Bing 图像魔法师:让你的描述变成图像,让你的图像变成现实

你有没有想过&#xff0c;如果你能够用语言来创造图像&#xff0c;那该有多么神奇和有趣&#xff1f;你有没有想过&#xff0c;如果你能够看到你想象中的图像&#xff0c;那该有多么震撼和美妙&#xff1f;现在&#xff0c;这一切都可以实现了&#xff0c;因为微软 Bing 图像魔…

NetApp EF 系列全闪存阵列——性能极佳,性价比优势突出

NetApp EF 系列全闪存阵列——性能极佳&#xff0c;性价比优势突出 如果您需要为实时分析、HPC 和数据库等性能敏感型工作负载提供强劲动力&#xff0c;NetApp EF 系列全闪存阵列的性价比优势不言自明。其可为要求最苛刻的应用程序提供微秒级响应&#xff0c;最大限度地延长正…