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

web前端之文档流、浮动、定位详解

news 2025/7/11 7:33:42

目录

一、文档流

二、浮动

1.添加浮动

2.清除浮动

三、定位

1.相对定位

2.绝对定位

一、文档流

什么是文档流？

        ● 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每

行中按从左至右的顺序排放标签，即为文档流。

        ● 也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签

则会另起一行，在新的一行中继 续从左至右摆放。

        ● 这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较

麻烦。

例如我们想让两个盒子并排存放在网页中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: red;">我是第一个盒子<br />你们好</div><div class="second_box" style="width: 200px;height: 200px;background-color: aqua;">我是第二个盒子<br />你们好</div></body>
</html>

但实际情况是如下：

我们该如何解决这种问题呢？

这就引出了下面所讲的浮动了

二、浮动

1.添加浮动

        所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

        语法：float：none/left/right;（分别表示：不浮动、向左浮动、向右浮动）

        注：当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

● 当一个标签浮动以后，其下方的标签会上移。
● 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流 , 这时不会再影响父标签的高度 , 也就是浮动标签
不会撑开父标签。

        这时，我们通过给盒子添加浮动，就可以实现上面我们想要的结果了：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{float: left;}.second_box{float: left;}</style></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: red;">我是第一个盒子<br />你们好</div><div class="second_box" style="width: 200px;height: 200px;background-color: aqua;">我是第二个盒子<br />你们好</div></body>
</html>

2.清除浮动

        但是我们会发现，当我们想继续添加第三个盒子时会导致被第一个盒子覆盖（因为第一个盒子脱离了文档流）：

这时就需要我们为第三个盒子清除浮动了：

● clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值：
        left ： 忽略左侧浮动
        right ：忽略右侧浮动
        both ：忽略全部浮动 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{float: left;}.second_box{float: left;}.third_box{clear: left;/*让第三个盒子忽略浮动*/}</style></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: red;">我是第一个盒子<br />你们好</div><div class="second_box" style="width: 200px;height: 200px;background-color: aqua;">我是第二个盒子<br />你们好</div><div class="third_box" style="width: 300px;height: 300px;background-color: pink;">我是第三个盒子<br />你们好</div></body>
</html>

        效果如下：

三、定位

        相信大家在平时浏览网页经常会看到一些轮播图片，图片两侧还有半透明的小箭头供用户选

择图片。这样的功能就需要用到定位操作了

        定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一

个标签甚至浏览器窗口本身而出现的位置。

1.相对定位

        相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

可以通过position:relative; 开启相对定位

left right top bottom四个属性来设置标签的偏移量。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{position: relative;/*开启相对定位*/left: 100px;}</style></head><body><div class="main_box" style="width: 200px;height: 200px;background-color: blue;">我是第一个盒子<br />你们好</div></body>
</html>

相对定位的特点 ：
        1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
        2.相对定位是相对于标签在文档流中原来的位置进行定位
        3.相对定位的标签不会脱离文档流

2.绝对定位

        绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉

上会其他的标签重叠。

可以通过position: absolute; 开启绝对定位
left right top bottom四个属性来设置标签的偏移量 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{position: relative;width: 400px;}.butr{width: 20px;position: absolute;margin-left: 380px;margin-top: 120px;opacity: 0.5;}.butl{width: 20px;position: absolute;margin-top: 120px;opacity: 0.5;}.butr{right: 0px;}.butl{left: 0px;}img{width: 400px;}</style></head><body><div class="main_box"><img src="img/aliyun.jpg" alt="" /><input type="button" value=">" class="butr"/><input type="button" value="<" class="butl"/></div></body>
</html>

        这样，我们就完成了一个轮播图片的设计。效果如下：

绝对定位的特点：
        1.开启绝对定位，会使标签脱离文档流
        2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
        3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签 的绝对定位都会同时开启父标签的相对定位） 如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

        以上就是关于web前端css部分最后一点内容的补充，希望本篇文章内给大家带来帮助！

相关文章：

web前端之文档流、浮动、定位详解

目录 一、文档流 二、浮动 1.添加浮动 2.清除浮动 三、定位 1.相对定位 2.绝对定位 一、文档流 什么是文档流&#xff1f; ● 文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 &#xff0c;并在每 行中按从左至右的顺序排放标签&#xff0c…...

编程日记 2024/6/28 10:49:03

[JS]节点操作

DOM节点 DOM树中的所有内容都是节点, 我们重点关注元素节点 作用 使开发者可以根据节点的关系获取元素, 而不是只能依赖选择器, 提高了编码的灵活性 节点分类 元素节点: 所有的标签都是元素节点, html是根节点属性节点: 所有的属性都是属性节点, 比如href文本节点: 所有的文…...

编程日记 2024/6/28 10:46:59

基于SpringBoot+Vue的论坛网站系统(带1w+文档)

基于SpringBootVue的论坛网站系统(带1w文档) 对于之前论坛网站的管理&#xff0c;大部分都是使用传统的人工方式去管理&#xff0c;这样导致了管理效率低下、出错频率高。而且&#xff0c;时间一长的话&#xff0c;积累下来的数据信息不容易保存&#xff0c;对于查询、更新还有…...

编程日记 2024/6/28 10:44:57

03逻辑门电路

分立门电路&#xff1a; 集成门电路&#xff1a; TTL门电路 MOS门电路&#xff1a;NMOS门电路、PMOS门电路、CMOS门电路 BICMOS门电路&#xff1a;CMOS的高输入阻抗和TTL的高放大倍数的结合 向更低功耗、更高速度发展 MOS管的Rdson在可变电阻区的阻值也一般会小于1000欧姆 …...

编程日记 2024/6/28 10:42:54

2毛钱的SOT23-5封装28V、1.5A、1.2MHz DCDC转换器用于LCD偏置电源和白光LED驱动等MT3540升压芯片

前言 之前发了一个TI的BOOST升压芯片&#xff0c;用于LCD偏置电压或LED驱动&#xff0c;请访问以下链接。 6毛钱SOT-23封装28V、400mA 开关升压转换器&#xff0c;LCD偏置电源和白光LED应用芯片TPS61040 国产半导体厂家发展迅猛&#xff0c;今天推荐一个公司带“航天”的升压…...

编程日记 2024/6/28 10:41:53

Zookeeper部署

Zookeeper部署 下载安装包Linux解压安装包修改配置文件编辑zoo.cf配置 启动服务停止服务常用zookeeper指令查看namespace列表创建namespace删除namespace 注意&#xff1a;该文章为简单部署操作&#xff0c;没有复杂的配置内容&#xff0c;用的是3.7.2版本。 下载安装包 进入z…...

编程日记 2024/6/28 10:37:49

2.x86游戏实战-跨进程读取血量

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 接下来会写C/C代码&#xff0c;C/C代码不是很难&#xff0c;然后为了快速掌握逆向这个技能&#xff0c;我…...

编程日记 2024/6/28 10:35:47

element-plus 日期选择添加确定按钮

需求&#xff1a;选择日期后&#xff0c;点击确定按钮关闭面板 思路&#xff1a; 使用shortcuts自定义确定和取消按钮选择日期后使用handleOpen()强制开启面板点击确定后使用handleClose()关闭面板 <template><el-date-pickerref"pickerRef"v-model"…...

编程日记 2024/6/28 10:34:45

Redis优化之持久化

目录 1.Redis高可用 2.Redis持久化 2.1 RDB持久化 2.1.1 触发条件 2.1.2 执行流程 2.1.3 启动时加载 2.2 AOF持久化 2.2.1 开启AOF 2.2.2 执行流程 2.2.3 文件重写触发方式 2.2.4 文件重写的流程 2.2.5 启动时加载 2.3 RDB和AOF的优缺点 3.Redis性能管理 3.1 查看…...

编程日记 2024/6/28 10:33:44

ubuntu22.04 编译安装libcurl C++ library

1. 安装必须的依赖项 sudo apt update #sudo apt install build-essential autoconf libtool pkg-config libssl-dev libz-dev 2. 下载及编译前准备 cd /opt mkdir curl && cd curl mkdir build && mkdir install git clone https://github.com/curl/curl.git…...

编程日记 2024/6/28 10:32:43

js函数闭包解析

闭包是JavaScript中非常重要的概念&#xff0c;理解闭包对于编写高质量的代码是至关重要的。本文将详细解析闭包的概念&#xff0c;并提供一些代码示例来帮助读者更好地理解闭包的使用。 什么是闭包&#xff1f; 闭包是指在一个函数内部定义的函数&#xff0c;该函数可以访问包…...

编程日记 2024/6/28 10:30:41

查看Oracle、MySQL、PostGreSQL中的依赖关系

查看Oracle、MySQL、PostGreSQL中的依赖关系 在有些程序员开发习惯中&#xff0c;喜欢为了应用代码的简洁或复用&#xff0c;而在数据库创建一个复杂关连查询的VIEW&#xff0c;甚至是VIEW套VIEW嵌套使用&#xff0c; 这里就有个问题如果上线后如发现依赖的表字段类型或长度不…...

编程日记 2024/6/28 10:29:40

多线程（基础）

前言&#x1f440;~ 上一章我们介绍了什么是进程&#xff0c;对于进程就了解那么多即可&#xff0c;我们作为java程序员更关注线程&#xff0c;线程内容比较多&#xff0c;所以我们要分好几部分才能讲完 目录 进程的缺点 多线程&#xff08;重要&#xff09; 进程和线程的区…...

编程日记 2024/6/28 10:26:35

BUG cn.bing.com 重定向的次数过多，无法搜索内容

BUG cn.bing.com 重定向的次数过多&#xff0c;无法搜索内容 环境 windows 11 edge浏览器详情 使用Microsoft Edge 必应搜索显示"cn.bing.com"重定向次数过多&#xff0c;无法进行正常的检索功能 解决办法 检查是否开启某些科_学_上_网&#xff08;翻_墙&#xf…...

编程日记 2024/6/28 10:22:30

【数据科学】学习资源汇总（不定时更新）

好书推荐&#xff1a;BooksPDF/数据科学/Python数据科学手册.pdf at master zhixingchou/BooksPDF GitHub...

编程日记 2024/6/28 10:21:29

完美解决ValueError: column index (256) not an int in range(256)的正确解决方法，亲测有效！！！

完美解决ValueError: column index (256) not an int in range(256)的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 完美解决ValueError: column index (256) not an int in range(256)的正确解决方法&#xff0c;亲测有效&#xff01;&…...

编程日记 2024/6/28 10:20:27

# 音频处理4_傅里叶变换

1.离散傅里叶变换 对于离散时域信号 x[n]使用离散傅里叶变换&#xff08;Discrete Fourier Transform, DFT&#xff09;进行频域分析。 DFT 将离散信号 x[n] 变换为其频谱表示 X[k]&#xff0c;定义如下&#xff1a; X [ k ] ∑ n 0 N − 1 x [ n ] e − j 2 π k n N X[k]…...

编程日记 2024/6/28 10:18:25

提升网络速度的几种有效方法

在数字化时代&#xff0c;网络速度对于我们的日常生活和工作至关重要。无论是观看高清视频、在线游戏&#xff0c;还是进行视频会议&#xff0c;快速稳定的网络连接都是不可或缺的。如果你发现自己当前的网络速度不尽如人意&#xff0c;那么不妨尝试以下几种方法来提升它。 升…...

编程日记 2024/6/28 10:17:23

@PathVariable注解的使用及源码解析

前言 PathVariable 注解是我们进行JavaEE开发&#xff0c;最常见的几个注解之一&#xff0c;这篇博文我们以案例和源码相结合&#xff0c;帮助大家更好的了解PathVariable 注解 使用案例 1.获取 URL 上的值 RequestMapping("/id/{id}") public Object getId(Path…...

编程日记 2024/6/28 10:16:22

服务器配置重点看哪些参数

对服务器有需求时&#xff0c;应重点考虑以下几个关键参数&#xff0c;以下仅供参考&#xff1a; 处理器&#xff08;CPU&#xff09;&#xff1a;包括CPU的品牌&#xff08;如Intel或AMD&#xff09;、型号、核心数、线程数、主频和缓存大小。核心数越多&#xff0c;处理并发请…...

编程日记 2024/6/28 10:15:20

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/7/11 5:50:54

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/7/10 15:59:15

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/7/10 15:13:26

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/7/8 17:54:23

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/7/9 16:07:47

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

编程新知 2025/7/11 0:40:42

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/7/9 0:49:27

GAN模式奔溃的探讨论文综述（一）

简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...

编程新知 2025/7/8 21:53:37

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

编程新知 2025/7/10 17:52:20

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2025/7/8 5:01:38