css3浮动定位

css3浮动定位

  • 前言
  • 浮动float的基本概念
    • 浮动的使用
    • 浮动的顺序贴靠特性
    • 浮动的元素一定能设置宽高
  • 使用浮动实现网页布局
  • BFC规范和浏览器差异
    • 如何创建BFC
    • BFC的其他作用
    • 浏览器差异
  • 清除浮动
  • 相对定位 relative
  • 绝对定位 absolute
    • 绝对定位脱离标准文档流
    • 绝对定位的参考盒子
    • 绝对定位的盒子垂直居中
    • 堆叠顺序z-index属性
    • 绝对定位的用途
  • 固定定位 fixed
    • 固定定位的常用用途
      • 返回顶部
      • 楼层导航
  • 结语

前言

在网页设计的舞台上,我们常常需要元素自由灵活地漂浮在页面上,为用户呈现更富有动感的视觉体验。CSS3的浮动定位技术,就像一场舞蹈,可以让元素轻盈地在页面上舞动。本文将带你进入这个富有创意的领域,解锁浮动定位的神奇之处。

浮动float的基本概念

最本质的功能:用来实现并排

浮动的使用

要浮动,并排的盒子都要设置浮动

父盒子要有足够的宽度,否则子盒子会掉下去

浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标签等

使用浮动实现网页布局

注意事项

  • 垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动!
  • 大盒子带着小盒子跑,一个大盒子中,又是一个小天地,内部可以继续使用浮动
  • div是免费的,不要节约盒子

BFC规范和浏览器差异

BFC (Box Formatting Context,块级格式化上下文) 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

  • 一个盒子不设置height,当内容子元素都浮动时,无法撑起自身
  • 这个盒子没有形成BFC

如何创建BFC

  • 方法1: float的值不是none
  • 方法2: position的值不是static或者relative
  • 方法3: display的值是inline-block、flex或者inline-flex
  • 方法4: overflow:hidden (表示溢出隐藏,溢出盒子边框的内容将会被隐藏),这个是非常好用的让盒子形成BFC的方法

BFC的其他作用

  • BFC可以取消盒子margin塌陷
  • BFC可以阻止元素被浮动元素覆盖

浏览器差异

  • IE6、7浏览器使用haslayout机制,和BFC规范略有差异比如IE浏览器可以使用zoom:1属性“让盒子拥有layout’
  • 如果要制作兼容到IE6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置height属性,规范编程,不要“玩杂技”

清除浮动

  • 方法一:让内部有浮动的父盒子形成BFC,它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
  • 方法二:给后面的父盒子设置clear:both属性clear表示清除浮动对自己的影响,both表示左右浮动都清除
  • 方法三:使用::after伪元素给盒子添加最后一个子元素,并且给::after设置clear:both
  • 方法四:在两个父盒子之间“隔墙”,隔一个携带clear:both的盒子

相对定位 relative

相对定位:盒子可以相对自己原来的位置进行位置调整,称为相对定位

位置描述词:

  • left 向右移动
  • right 向左移动
  • top 向下移动
  • bottom 向上移动

相对定位的性质:相对定位的元素,会在“老家留坑”本质上仍然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成“影子”,不会对页面其他元素产生任何影响

相对定位的用途:

  • 相对定位用来微调元素位置
  • 相对定位的元素,可以当做绝对定位的参考盒子

绝对定位 absolute

绝对定位:盒子可以在浏览器中以坐标进行位置精准描述拥有自己的绝对位置

位置描述词:

  • left 向右移动
  • right 向左移动
  • top 向下移动
  • bottom 向上移动

绝对定位脱离标准文档流

  • 绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何千扰,而是对它们进行压盖
  • 脱离标准文档流的方法:浮动、绝对定位、固定定位

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基准点
  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。这个盒子通常是相对定位的,所以这个性质也叫做“子绝父相”

绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术

position:absolute;
top:50%;
margin-top:  -自己高度一半

堆叠顺序z-index属性

z-index属性是一个没有单位的正整数,数值大的能够压住数值小的

绝对定位的用途

  • 绝对定位用来制作“压盖”、“遮罩”效果
  • 绝对定位用来结合CSS精灵使用
  • 绝对定位可以结合js实现动画

固定定位 fixed

不管页面如何卷动,它永远固定在那里

position:fixed;
top:100px;
left:100px;

注意事项:

  • 固定定位只能以页面为参考点,没有子固父相这个性质
  • 固定定位脱离标准文档流

固定定位的常用用途

返回顶部

固定定位(position: fixed;)常常用于创建返回顶部按钮,这样用户可以轻松返回网页顶部。以下是一个简单的 HTML 和 CSS 示例,演示如何创建一个返回顶部按钮:

HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Scroll to Top Example</title>
</head>
<body><div class="content"><!-- 页面内容 --><h1>Scroll down to see the button</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div><!-- 返回顶部按钮 --><div class="scroll-to-top"><a href="#" id="scrollToTopButton">&#9650; Top</a></div><script src="script.js"></script>
</body>
</html>

CSS 样式(styles.css):

body {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.content {height: 1000px; /* 为了演示滚动效果而设置的高度 */padding: 20px;
}.scroll-to-top {position: fixed;bottom: 20px;right: 20px;background-color: #007bff;color: #fff;padding: 10px;border-radius: 5px;cursor: pointer;
}#scrollToTopButton {text-decoration: none;color: #fff;
}

JavaScript 脚本(script.js):

document.addEventListener("DOMContentLoaded", function () {// 获取返回顶部按钮var scrollToTopButton = document.getElementById("scrollToTopButton");// 添加点击事件监听器scrollToTopButton.addEventListener("click", function (event) {event.preventDefault(); // 阻止默认行为// 平滑滚动到页面顶部window.scrollTo({top: 0,behavior: "smooth"});});// 监听页面滚动事件window.addEventListener("scroll", function () {// 如果页面滚动超过一定高度,显示返回顶部按钮;否则隐藏if (window.scrollY > 200) {scrollToTopButton.style.display = "block";} else {scrollToTopButton.style.display = "none";}});
});

这个示例中,.scroll-to-top 类定义了返回顶部按钮的样式,其中 position: fixed; 使按钮在页面滚动时保持固定在右下角。JavaScript 部分监听页面滚动事件,当滚动高度超过一定值时显示按钮,否则隐藏。点击按钮时,通过 JavaScript 使用平滑滚动效果返回页面顶部。

楼层导航

固定定位 (position: fixed;) 也常被用于创建楼层导航,使用户能够方便地导航到页面的不同部分。以下是一个简单的 HTML 和 CSS 示例,演示如何创建一个楼层导航:

HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Floor Navigation Example</title>
</head>
<body><div id="section1" class="section"><h2>Section 1</h2><p>This is the content of Section 1.</p></div><div id="section2" class="section"><h2>Section 2</h2><p>This is the content of Section 2.</p></div><div id="section3" class="section"><h2>Section 3</h2><p>This is the content of Section 3.</p></div><!-- 楼层导航 --><div class="floor-navigation"><ul><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li><li><a href="#section3">Section 3</a></li></ul></div></body>
</html>

CSS 样式(styles.css):

body {margin: 0;padding: 0;font-family: Arial, sans-serif;
}.section {height: 500px;padding: 20px;
}.floor-navigation {position: fixed;top: 50%;right: 20px;transform: translateY(-50%);background-color: #007bff;color: #fff;padding: 10px;border-radius: 5px;
}.floor-navigation ul {list-style: none;padding: 0;
}.floor-navigation li {margin-bottom: 10px;
}.floor-navigation a {text-decoration: none;color: #fff;display: block;padding: 5px;border-radius: 3px;
}.floor-navigation a:hover {background-color: #0056b3;
}

在这个示例中,.floor-navigation 类定义了楼层导航的样式,其中 position: fixed; 使其固定在页面的右侧。导航链接通过锚点 href 属性与各个部分的 ID 相关联,点击链接时页面会平滑滚动到相应的部分。楼层导航的位置通过 topright 属性进行调整,使其在页面右侧居中显示,并通过 transform 属性进行垂直居中。:hover 伪类用于提供链接的悬停样式。

结语

浮动定位不仅仅是页面布局的一种方式,更是一门艺术。通过本文的学习,你将更加熟练地运用CSS3中的浮动定位,为你的网页注入更多生机和灵活性。让我们一同跳入这场浮动的舞蹈,创造出引人入胜的用户体验。

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

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

相关文章

【PostgreSQL】外部数据

PostgreSQL外部数据 PostgreSQL 实现了 SQL/MED 规范的部分内容&#xff0c;允许您使用常规 SQL 查询访问驻留在 PostgreSQL 外部的数据。此类数据称为外部数据。&#xff08;请注意&#xff0c;不要将此用法与外键混淆&#xff0c;外键是数据库中的一种约束。 外部数据是在外…

java基础学习days06 --- final关键字和继承

一、final 可以修饰类&#xff0c;变量&#xff0c;方法 final修饰类&#xff0c;该类不可被继承final 修饰变量&#xff0c;该变量不可被修改&#xff0c;是一个常量final修饰方法&#xff0c;该方法不可被重写 二、继承 1、继承的定义及特点 继承是面向对象编程中的一个基…

【ONE·MySQL || 常见的基本函数】

总言 主要内容&#xff1a;介绍了MySQL中常用的基本函数。一些聚合函数、时间日期函数、字符串函数、数字函数等。       文章目录 总言1、聚合函数1.1、汇总1.2、COUNT()函数1.2.1、基本说明1.2.2、使用演示 1.3、SUM( )函数1.3.1、基本说明1.3.2、使用演示 1.4、AVG( )函…

java基础之Java8新特性-Optional

目录 1.简介 2.Optional类常用方法 3.示例代码 4.示例代码仓库地址 1.简介 Java 8引入了一个重要的新特性&#xff0c;即Optional类。Optional类是为了解决空指针异常而设计的。 在Java中&#xff0c;当我们尝试访问一个空对象的属性或调用其方法时&#xff0c;很容易抛出…

【服务器数据恢复】Hyper-V虚拟化数据恢复案例

服务器数据恢复环境&#xff1a; Windows Server操作系统服务器&#xff0c;部署Hyper-V虚拟化环境&#xff0c;虚拟机的硬盘文件和配置文件存放在某品牌MD3200存储中&#xff0c;MD3200存储中有一组由4块硬盘组成的raid5阵列&#xff0c;存放虚拟机的数据文件&#xff1b;另外…

国内首款支持苹果Find My芯片-伦茨科技ST17H6x

深圳市伦茨科技有限公司&#xff08;以下简称“伦茨科技”&#xff09;发布ST17H6x Soc平台。成为继Nordic之后全球第二家取得Apple Find My「查找」认证的芯片厂家&#xff0c;该平台提供可通过Apple Find My认证的Apple查找&#xff08;Find My&#xff09;功能集成解决方案。…

建立四叉树[中等]

一、题目 给你一个n * n矩阵grid&#xff0c;矩阵由若干0和1组成。请你用四叉树表示该矩阵grid。你需要返回能表示矩阵grid的四叉树的根结点。四叉树数据结构中&#xff0c;每个内部节点只有四个子节点。此外&#xff0c;每个节点都有两个属性&#xff1a; 【1】val&#xff1…

WebRTC协议研究

背景 自己在做一个视频分析项目的时候&#xff0c;需要将后台读取的视频实时抛转到前台web页面显示&#xff0c;本来是用的是MQTT协议&#xff0c;已经可以满足需求。但是在实时上线测试的时候&#xff0c;发现当图片比较大的时候&#xff0c;会存在页面不能实时显示图片的bug&…

GLSL着色器入门(持续更新中...)

目录 第一章&#xff1a;OpenGL works with triangles 第二章&#xff1a; Parallel Processing 第章 推荐来自b站的课程004 GLSL is not Javascript_哔哩哔哩_bilibili 第一章&#xff1a;OpenGL works with triangles 当我们谈论GLSL着色器时&#xff0c;其实就是在说怎么…

C语言奇偶数交换排序问题

目录 问题描述如下&#xff1a; move函数的具体实现&#xff1a; main函数 运行效果 代码&#xff08;注意看注释&#xff09;&#xff1a; 问题描述如下&#xff1a; 给定一个整数数组&#xff0c;要求将其中的奇数元素全部移动到前面&#xff0c;偶数元素全…

Go : ssh操作(四)批处理

简介 有的时候我们不只是进行单纯的上传&#xff0c; 下载&#xff0c; 指令&#xff0c; 而是多个动作的组合操作代码 batch.go package clientimport ("errors""github.com/pkg/sftp""golang.org/x/crypto/ssh" )type BatchCode intconst (…

【深度学习:Foundation Models】基础模型完整指南

【深度学习&#xff1a;Foundation Models】基础模型完整指南 什么是基础模型&#xff1f;基础模型背后的 5 项人工智能原理根据大量数据进行预训练自我监督学习过度拟合微调和快速工程&#xff08;适应性强&#xff09;广义的 基础模型的用例基础模型的类型计算机视觉基础模型…

最新版CleanMyMac X4.14.7智能清理mac磁盘垃圾工具

CleanMyMac X是一款专业的Mac清理软件&#xff0c;可智能清理mac磁盘垃圾和多余语言安装包&#xff0c;快速释放电脑内存&#xff0c;轻松管理和升级Mac上的应用。同时CleanMyMac X可以强力卸载恶意软件&#xff0c;修复系统漏洞&#xff0c;一键扫描和优化Mac系统&#xff0c;…

借助GPT理解 “ Android中 点击弹框外部 取消弹框”

在平常的开发工作中 或 阅读技术博客/书籍 时&#xff0c;难免会遇到我们不懂的知识点&#xff0c;网络上搜索的资料 需要有准确性&#xff0c;系统性&#xff0c;可实操性。 这样的资料查询很费时间且还不一定能找到&#xff0c;但是如果借助训练过的的gpt&#xff0c;就会省下…

[Kubernetes]7. K8s包管理工具Helm、使用Helm部署mongodb集群(主从数据库集群)

上一节讲解了[Kubernetes]6. k8s Pod配置管理ConfigMap & Secret以及传递环境变量的使用,k8s的命名空间以及使用kubens管理命名空间的使用,这里来介绍一下Helm的使用 一.Helm相关介绍 1.介绍 在 kubernetes 系统上部署容器化应用时需要事 先手动编写资源配置清单文件 以…

Prometheus实战篇:Prometheus监控docker

Prometheus实战篇:Prometheus监控docker 准备环境 监控docker 为了能够获取到Docker容器的运行状态,用户可以通过Docker的stats命令获取当前主机上运行容器的统计信息,可以查看容器的CPU利用率,内存使用量,网络IO总量以及磁盘IO总量等信息. docker stats除了使用命令以外,用户…

【占用网络】SurroundOcc:基于环视相机实现3D语义占用预测 ICCV 2023

前言 本文分享“占用网络”方案中&#xff0c;来自ICCV 2023的SurroundOcc&#xff0c;它基于环视相机实现3D语义占用预测。 使用空间交叉注意力将多相机图像信息提升到3D体素特征&#xff0c;即3D体素Query到2D图像中查询融合特征的思想。 然后使用3D卷积逐步对体素特征进行…

如何快速断行、分割行、切割行、换行、限制每行字数、平均分割每行字数、序号自动换行、关键字断行等等内容格式整理

首先&#xff0c;需要用到的这个工具&#xff1a; 百度 密码&#xff1a;qwu2蓝奏云 密码&#xff1a;2r1z 打开工具&#xff0c;切换到“文章工作域”&#xff08;嗯...默认就是&#xff09; 找到这个&#xff0c;多内容断行分割 点击打开&#xff0c;出现如下窗口设置 相关的…

Netty-Netty基础应用与了解

前言 Netty 的优势 1、 API 使用简单&#xff0c;开发门槛低&#xff1b; 2、功能强大&#xff0c;预置了多种编解码功能&#xff0c;支持多种主流协议&#xff1b; 3、定制能力强&#xff0c;可以通过 ChannelHandler 对通信框架进行灵活地扩展&#xff1b; 4、性能高…

【教程】通过Excel宏/Pandas两种方法来自动添加渐变数据条

这种数据真的很难看懂&#xff1a; 一般会对其画折线图或者数据条&#xff0c;相比起来就非常直观&#xff1a; 但是每一列都要手动这样设置就非常累了&#xff0c;所以这里就用到了VBA宏(或者Pandas)。 VBA宏方法 从这里进入宏&#xff1a; 随便写一个宏名后点创建&#xff1…